Bagikan melalui

Tag templat Liquid untuk komponen kode

  • Artikel

Catatan

Mulai 12 Oktober 2022, portal Power Apps menjadi Power Pages. Informasi selengkapnya: Microsoft Power Pages kini tersedia secara umum (blog)
Kami akan segera memigrasikan dan menggabungkan dokumentasi portal Power Apps dengan dokumentasi Power Pages.

Power Apps component framework ini memberdayakan pengembang dan pembuat aplikasi profesional untuk membuat komponen kode untuk aplikasi berdasarkan model dan kanvas. Komponen kode ini dapat memberikan pengalaman yang disempurnakan bagi pengguna yang menggunakan data pada formulir, tampilan, dan dasbor. Informasi lebih lanjut: Menggunakan komponen kode di portal

Penting

Tag template liquid untuk komponen kode memerlukan portal versi 9.3.10.x atau versi yang lebih baru.

Dengan rilis ini, kami telah memperkenalkan kemampuan menambahkan komponen kode yang dibuat menggunakan tag template liquid pada halaman web dan komponen yang diaktifkan menggunakan Web API yang diaktifkan untuk komponen tingkat bidang pada formulir di portal.

Komponen kode dapat ditambahkan menggunakan tag template Liquid codecomponent. Kunci untuk membuat keterangan komponen kode yang harus dimuat diteruskan dalam menggunakan atribut name. Kuncinya bisa berupa GUID (yang merupakan ID komponen kode), atau nama komponen kode yang diimpor ke Microsoft Dataverse.

Nilai properti yang diperkirakan komponen kode harus diteruskan sebagai pasangan kunci/nilai yang dipisahkan oleh ":" (tanda titik dua), dengan kunci adalah nama properti dan nilainya adalah nilai string JSON.

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

Contohnya, untuk menambahkan komponen kode yang memperkirakan parameter input bernama controlValue dengan tag template Liquid:

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

Tip

Contoh ini menggunakan parameter yang disebut controlvalue dan controlApiKey, tetapi komponen yang Anda gunakan mungkin memerlukan nama parameter yang berbeda.

Anda dapat menggunakan Kontrol Peta Sampel dan mengemas komponen kode sebagai solusi untuk digunakan dengan portal.

Catatan

Sumber dayayang dibuat oleh komunitas tidak didukung oleh Microsoft. Jika Anda memiliki pertanyaan atau masalah dengan sumber daya komunitas, hubungi penerbit sumber daya. Sebelum menggunakan sumber daya ini, Anda harus memastikannya memenuhi panduan Power Apps component framework dan hanya boleh digunakan untuk tujuan referensi.

Tutorial: Menggunakan komponen kode pada halaman dengan tag template Liquid

Dalam tutorial ini, Anda akan mengkonfigurasi portal Power Apps untuk menambahkan komponen ke halaman web. Anda akan mengunjungi halaman web portal dan berinteraksi dengan komponen.

Sebelum mulai

Jika Anda menggunakan komponen kode sampel yang digunakan dalam tutorial ini, pastikan Anda terlebih dulu mengimpor solusi sampel ke lingkungan sebelum memulai. Untuk mempelajari tentang impor solusi, buka Impor solusi.

Prasyarat

Untuk prasyarat, dan mempelajari lebih lanjut tentang komponen kode yang didukung/tidak didukung di portal, buka Menggunakan komponen kode di portal.

Catatan

Tutorial ini menggunakan komponen kode sampel yang dibuat menggunakan Power Apps component framework untuk memperagakan kontrol peta pada halaman web. Anda juga dapat menggunakan komponen yang ada atau baru, dan halaman web lain untuk tutorial ini. Dalam hal ini, pastikan untuk menggunakan komponen dan halaman web bila mengikuti langkah-langkah dalam tutorial ini. Untuk informasi lebih lanjut tentang cara membuat komponen kode, buka Membuat komponen pertama Anda.

Langkah 1. Menambahkan komponen kode ke halaman web dari Studio

  1. Buka portal Anda di Power Apps portal Studio.

  2. Di sudut kiri atas, pilih Halaman baru.

  3. Pilih Kosong.

  4. Pada panel properti sisi kanan, perbarui nama halaman web. Contohnya, "Penampil Peta."

  5. Perbarui URL sebagian. Contohnya, "mapviewer."

  6. Perluas Izin.

  7. Nonaktifkan Halaman tersedia untuk semua orang.

  8. Pilih peran web yang harus diizinkan akses ke halaman ini.

  9. Pilih area yang dapat diedit pada halaman untuk mengedit kode sumber Liquid.

  10. Buka editor kode studio.

  11. Tambahkan kontrol dengan tag template liquid menggunakan sintaks berikut:

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

    Tip

    Untuk mengambil rincian semua komponen impor, dan mencari nama komponen, lihat Web API CustomControl.

    Contoh:

    • Untuk mencari komponen:

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

    • Untuk mengambil 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 kode.

  13. Di sudut kanan atas, pilih Telusuri situs web.

  14. Halaman web sekarang akan menampilkan kontrol yang ditambahkan padanya.

Langkah berikutnya

Gambaran umum: Gunakan komponen kode di portal

Baca juga

Tag entitas Dataverse codecomponent
Tag Template Codecomponent
Gambaran Umum Power Apps component framework
Membuat komponen pertama Anda
Menambahkan komponen kode ke kolom atau tabel dalam aplikasi yang diarahkan model
Menerapkan sampel komponen Web API portal

Catatan

Apa bahasa dokumentasi yang Anda inginkan? Lakukan survei singkat. (perlu diketahui bahwa survei ini dalam bahasa Inggris)

Survei akan berlangsung kurang lebih selama tujuh menit. Tidak ada data pribadi yang dikumpulkan (pernyataan privasi).