Tag templat Liquid untuk komponen kode

Artikel
10/07/2023

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 Power Pages

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 Power Pages.

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 Power Pages.

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 Power Pages untuk menambahkan komponen ke halaman web. Anda akan mengunjungi halaman web situs 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 Power Pages, buka Menggunakan komponen kode di Power Pages.

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

Buka steknis Anda di Studio desain Power Pages.
Pilih ruang kerja halaman lalu pilih Buka + Halaman.
Beri nama halaman. Contohnya, Penampil Peta.
Pilih tata letak halaman Mulai dari kosong.
Pilih tombol Edit kode untuk membuka Visual Studio Code for the Web.
Tambahkan kontrol antara <div></div> 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
Pilih CTRL-S di keyboard untuk menyimpan kode pembaruan.
Telusuri kembali ke studio desain, lalu pilih Sinkronisasi untuk memperbarui halaman web dengan pengeditan dari Visual Studio Code.
Di sudut kanan atas, pilih Pratinjau dan Desktop untuk mempratinjau situs.
Halaman web sekarang akan menampilkan kontrol yang ditambahkan padanya.

Langkah berikutnya

Gambaran umum: Gunakan komponen kode di portal

Bagikan melalui