Kod bileşenleri için Liquid şablonu etiketi

Power Apps component framework, profesyonel geliştiricilerin ve uygulama oluşturucularının model temelli uygulamalar ve tuval uygulamaları için kod bileşenleri oluşturmasını destekler. Bu kod bileşenleri; formlar, görünümler ve panolar üzerinde verilerle çalışan kullanıcılar için gelişmiş deneyim sağlayabilir. Daha fazla bilgi: Power Pages içinde kod bileşenleri kullanma

Önemli

Kod bileşenleri için Liquid şablon etiketi, portal sürümü 9.3.10.x veya üstünü gerektirir.

Bu sürümle birlikte, web sayfalarında Liquid şablon etiketi ile kod bileşenleri ekleme özelliğini sunduk ve Power Pages'da formlardaki alan düzeyinde bileşenler için etkinleştirilen Web API'sini kullanan bileşenleri etkinleştirdik.

Kod bileşenleri, codecomponent Liquid şablon etiketini kullanarak eklenebilir. Yüklenmesi gereken kod bileşenini belirtmek için anahtar, name özniteliğini kullanarak aktarılır. Anahtar, Microsoft Dataverse'te içeri aktarılan kod bileşeninin GUID'i (kod bileşeni kimliği) veya adı olabilir.

Kod bileşeninin ":" (iki nokta simgesi) ile ayrılan bir anahtar/değer çifti olarak aktarılması gerektiğini beklediği ve anahtarın özellik adı ve değeri olduğu özelliklerin değerleri, JSON dize değeridir.

{% codecomponent name: <ID or name> <property1:value> <property2:value> %}

Örneğin, controlValue adlı bir giriş parametresi bekleyerek bir kod bileşeni eklemek için aşağıdaki Liquid şablon etiketini kullanın:

{% codecomponent name:abc_SampleNamespace.MapControl controlValue:'Space Needle' controlApiKey:<API Key Value>%}

İpucu

Bu örnekte, controlvalue ve controlApiKey adlı parametreler kullanılmaktadır ancak kullandığınız bileşen için farklı parametre adları gerekebilir.

Power Pages ile kullanmak için sample map denetimi uygulayabilir ve kod bileşenini çözüm olarak paketleyebilirsiniz.

Not

Microsoft topluluk tarafından oluşturulan kaynakları desteklemez. Topluluk kaynaklarıyla ilgili soru veya sorunlarınız olursa kaynağın yayıncısına başvurun. Bu kaynakları kullanmadan önce bu topluluk kaynaklarının Power Apps component framework yönergelerini karşıladığından emin olmanız ve bunları yalnızca başvuru amacıyla kullanmanız gerekir.

Öğretici: Liquid şablon etiketi olan sayfalarda kod bileşenlerini kullanma

Bu eğitimde, bileşeni bir web sayfasına eklemek için Power Pages yapılandıracaksınız. Daha sonra site web sayfasını ziyaret edip bileşenle etkileşime girersiniz.

Başlamadan önce

Bu öğreticide kullanılan örnek kod bileşenini kullanıyorsanız ilk olarak örnek çözümleri ortama içeri aktardığınızdan emin olun. Çözümü içeri aktarma hakkında bilgi edinmek için bkz. Çözümleri içeri aktarma.

Önkoşullar

Ön koşullar ve Power Pages'da desteklenen/desteklenmeyen kod bileşenleri hakkında bilgi edinmek için bkz. Power Pages içinde kod bileşenleri kullanma.

Not

Bu öğreticide, web sayfasında bir harita denetimi göstermek için Power Apps component framework kullanarak oluşturulan örnek bir kod bileşeni kullanılmaktadır. Size ait mevcut veya yeni bileşenleri ve bu öğretici için diğer web sayfalarını da kullanabilirsiniz. Bu durumda, bu öğreticideki adımları izlerken bileşeninizi ve web sayfanızı kullandığınızdan emin olun. Kod bileşenleri oluşturma hakkında daha fazla bilgi için bkz. İlk bileşeninizi oluşturma.

1. Adım. Web sayfasına Stüdyo'dan kod bileşeni ekleme

  1. Power Pages tasarım stüdyosunda sitenizi açın.

  2. Sayfalar çalışma alanını seçin ve + Sayfa seçeneğini belirleyin.

  3. Sayfaya bir ad verin. Örneğin, Harita görüntüleyici.

  4. Sıfırdan başla sayfa düzenini seçin.

  5. Kodu düzenle düğmesini seçerek Web için Visual Studio Code'u açın.

  6. Aşağıdaki söz dizimini kullanarak <div></div> ile Liquid şablon etiketi arasına denetim ekleyin:

    {% codecomponent name:abc\_SampleNamespace.MapControl controlValue:'Space Needle' controlApiKey:'<API Key Value>' %}

    VS Code'a eklenen Liquid etiketi.

    İpucu

    Tüm içeri aktarılan bileşenlerin ayrıntılarını almak ve bileşen adı aramak için CustomControl Web API'sine başvurun.

    Örneğin:

    • Bileşen aramak için:

      https://contoso.api.crm10.dynamics.com/api/data/v9.2/customcontrols?$select=ContosoCustomControlName

    • Bileşenin giriş parametrelerini almak için:

      https://contoso.api.crm10.dynamics.com/api/data/v9.2/customcontrols?$filter=name eq 'ContosoCustomControlName' &$select=manifest

  7. Güncelleştirme kodunu kaydetmek için klavyede CTRL-S tuşlarını seçin.

  8. Tasarım stüdyosuna geri gidin ve Eşitle'yi seçerek web sayfasını Visual Studio Code'daki düzenlemelerle güncelleştirin.

  9. Sağ üst köşede, siteyi önizlemek için Önizle ve Masaüstü seçeneklerini belirleyin.

  10. Artık web sayfasında eklenen kontrol gösteriliyor.

    Web sayfasında map bileşeni.

Sonraki adımlar

Genel bakış: Portallarda kod bileşenleri kullanma

Ayrıca bkz.

  • Last updated on