Tag templat Liquid untuk komponen kod

Nota

Berkuat kuasa pada 12 Oktober 2022, portal Power Apps ialah Power Pages. Maklumat lanjut: Microsoft Power Pages kini tersedia secara umum (blog)
Kami akan memindahkan dan menggabungkan dokumentasi portal Power Apps dengan dokumentasi Power Pages tidak lama lagi.

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 portal

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 portal.

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>%}

Petua

Contoh ini menggunakan parameter yang dipanggil controlvalue dan controlApiKey, walau bagaimanapun 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 portal.

Nota

Sumber dicipta oleh komuniti yang tidak disokong oleh Microsoft. 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 akan mengkonfigurasi portal Power Apps untuk menambah komponen pada halaman web. Anda kemudiannya akan melawat halaman web portal dan berinteraksi dengan komponen tersebut.

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 portal, pergi ke Gunakan komponen kod dalam portal (Pratonton).

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 portal anda di Power Apps portal Studio.

  2. Di penjuru kiri atas, pilih Halaman baharu.

  3. Pilih Kosong.

  4. Pada tetingkap sifat sebelah kanan, kemas kini nama halaman web. Contohnya, "Pemapar Peta."

  5. Kemas kini sebahagian URL. Contohnya, "mapviewer."

  6. Kembangkan Keizinan.

  7. Nyahdayakan Halaman tersedia kepada semua orang.

  8. Pilih peranan web yang sepatutnya dibenarkan untuk mengakses halaman ini.

  9. Pilih kawasan boleh diedit pada halaman untuk mengedit kod sumber Liquid.

  10. Buka studio editor kod.

  11. Tambah kawalan dengan tag templat Liquid menggunakan sintaks berikut:

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

    Petua

    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

  12. Simpan dan tutup editor kod.

  13. Di penjuru kanan sebelah atas, pilih Semak imbas laman web.

  14. Halaman web kini akan menunjukkan kawalan yang ditambah padanya.

Langkah-langkah berikutnya

Gambaran keseluruhan: Gunakan komponen kod dalam portal

Lihat juga

Tag entiti Dataverse codecomponent
Tag Templat codecomponent
Gambaran keseluruhan Power Apps component framework
Cipta komponen anda yang pertama
Tambahkan komponen kod pada lajur atau jadual dalam aplikasi berpandukan model
Laksanakan komponen API Web portal sampel

Nota

Adakah anda boleh memberitahu kami tentang keutamaan bahasa dokumentasi anda? Jawab tinjauan pendek. (harap maklum bahawa tinjauan ini dalam bahasa Inggeris)

Tinjauan akan mengambil masa lebih kurang tujuh minit. Tiada data peribadi akan dikumpulkan (pernyataan privasi).

  • Last updated on