Kongsi melalui

Tag templat Liquid untuk komponen kod

Power Apps component framework memperkasakan pembangun profesional dan pembuat aplikasi untuk mencipta komponen kod aplikasi berpandukan model dan aplikasi kanvas. Komponen kod ini boleh memberikan pengalaman yang dipertingkat untuk pengguna yang bekerja dengan data pada borang, pandangan dan papan pemuka. Maklumat lanjut: Gunakan komponen kod dalam Power Pages

Penting

Tag templat liquid untuk komponen kod memerlukan versi portal 9.3.10. x atau lebih baharu.

Dengan keluaran ini, kami telah memperkenalkan keupayaan untuk menambah komponen kod menggunakan Tag templat Liquid pada halaman web, dan komponen yang didayakan menggunakan API Web yang didayakan untuk komponen peringkat medan pada borang dalam Power Pages.

Komponen kod boleh ditambah menggunakan tag templat Liquid codecomponent. Kekunci untuk menandakan komponen kod yang perlu dimuatkan diluluskan dalam menggunakan atribut name. Kekunci boleh merupakan GUID (yang merupakan ID komponen kod) atau nama komponen kod yang diimport ke dalam Microsoft Dataverse.

Nilai sifat yang komponen kod yang menjangka perlu dihantar sebagai pasangan kekunci /nilai yang dipisahkan mengikut ":" (tanda titik bertindih), yang mana kekunci ialah nama sifat dan nilai adalah nilai rentetan JSON.

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

Sebagai contoh, untuk menambah komponen kod yang menjangkakan parameter yang dinamakan controlValue, gunakan tag templat Liquid berikut:

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

Tip

Contoh ini menggunakan parameter yang dipanggil controlvalue dan controlApiKey, namun komponen yang anda gunakan mungkin memerlukan nama parameter yang berbeza.

Anda boleh menggunakan kawalan peta sampel dan pakejkan komponen kod sebagai penyelesaian untuk digunakan dengan Power Pages.

Nota

Microsoft tidak menyokong sumber ciptaan komuniti. Jika anda mempunyai pertanyaan atau isu dengan sumber komuniti, hubungi penerbit sumber. Sebelum menggunakan sumber ini, anda perlu memastikannya mematuhi garis panduan Power Apps component framework dan hanya boleh digunakan untuk tujuan rujukan.

Tutorial: Gunakan komponen kod pada halaman dengan tag templat Liquid

Dalam tutorial ini, anda mengkonfigurasi Power Pages untuk menambah komponen pada halaman web. Anda kemudian melawati halaman web tapak dan berinteraksi dengan komponen.

Sebelum anda mula

Jika anda menggunakan komponen kod sampel yang digunakan dalam tutorial ini, pastikan anda terlebih dahulu mengimport penyelesaian sampel ke persekitaran sebelum anda mulakan. Untuk mengetahui tentang import penyelesaian, pergi ke Penyelesaian import.

Prasyarat

Untuk prasyarat dan untuk mengetahui tentang komponen kod yang disokong/tidak disokong dalam Power Pages, pergi ke Gunakan komponen kod dalam Power Pages.

Nota

Tutorial ini menggunakan komponen kod sampel yang dicipta menggunakan Power Apps component framework untuk menunjukkan kawalan peta pada halaman web. Anda juga boleh menggunakan mana-mana komponen sedia ada atau baharu anda sendiri dan mana-mana halaman web lain untuk tutorial ini. Dalam hal ini, pastikan anda menggunakan komponen dan halaman web apabila mengikuti langkah dalam tutorial ini. Untuk maklumat lanjut tentang cara untuk mencipta komponen kod, pergi ke Cipta komponen pertama anda.

Langkah 1. Tambah komponen kod kepada halaman web daripada Studio

  1. Buka tapak anda dalam studio reka bentuk Power Pages.

  2. Pilih ruang kerja Halaman dan pilih + Halaman.

  3. Berikan nama kepada halaman. Contohnya, Pemapar peta.

  4. Pilih Mulakan daripada tataletak halaman kosong.

  5. Pilih butang Edit kod untuk membuka Visual Studio Code untuk Web.

  6. Tambah kawalan antara <div></div> dengan tag templat Liquid menggunakan sintaks berikut:

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

    Tag Liquid ditambah dalam VS Code.

    Tip

    Untuk mendapatkan butiran semua komponen yang diimport dan mencari nama komponen, rujuk kepada API Web CustomControl.

    Contohnya:

    • Untuk mencari komponen:

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

    • Untuk mendapatkan parameter input untuk komponen:

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

  7. Pilih CTRL-S pada papan kekunci untuk menyimpan kod kemas kini.

  8. Navigasi kembali ke studio reka bentuk dan pilih Segerak untuk mengemaskinikan halaman web dengan mengedit daripada Visual Studio Code.

  9. Pada penjuru kanan sebelah atas, pilih Pratonton dan Desktop untuk pratonton tapak tersebut.

  10. Halaman web kini menunjukkan kawalan yang ditambahkan padanya.

    Petakan komponen pada halaman web.

Langkah-langkah berikutnya

Gambaran keseluruhan: Gunakan komponen kod dalam portal

Lihat juga

  • Last updated on