Bagikan melalui

Templat web sebagai komponen

Template web dapat dibuat dan digunakan sebagai komponen pada halaman web untuk memungkinkan pembuat menggunakan komponen yang dapat digunakan kembali dan memberikan parameter agar memenuhi kebutuhan.

Sebagai pengembang, Anda dapat membuat template web untuk menyediakan fungsi khusus yang dapat dikonfigurasi oleh pembuat saat merancang halaman web.

Contohnya, Anda dapat membuat komponen berikut (dan lainnya) sebagai komponen template web yang dapat dikonfigurasi di studio desain:

  • Daftar lokasi dengan peta
  • Tampilan korsel
  • Galeri gambar atau video

Untuk menambahkan komponen ke halaman web, Anda dapat mengedit halaman menggunakan Visual Studio Code for the Web dan menambahkan Liquid mencakup objek ke salinan halaman:

{% include '<<web template name>>' <<parameter 1>>: '<<value>>' <<paramter 2>>: '<<value>>' %}

Contoh:

{% include 'webTemplateName' name: 'Topics' count:'4' %}

Membuat komponen templat web

Untuk membuat komponen template web yang memungkinkan pembuat meneruskan parameter, Anda harus menambahkan tag {% manifest %} ke template web. Bagian manifes menjelaskan parameter yang dapat dikonfigurasi untuk dilewatkan dan digunakan oleh kode template web.

Manifes adalah objek JSON yang menentukan properti template web yang ditampilkan di studio desain: jenis, nama tampilan, deskripsi, tabel, dan parameter. Properti template web ini dapat digunakan untuk menjembatani perbedaan antara pengembang pro dan pengeditan kode rendah. Parameter terkait dengan variabel yang digunakan pengembang dalam kode sumbernya, dan pembuat kode rendah dapat mengkonfigurasi nilainya.

Properti yang didukung manifes

Properti manifes Description
Tipe Perlu diatur ke Fungsional.

Fungsional: Tambahkan komponen templat web melalui proses Tambahkan komponen di studio desain.
Nama tampilan Nama akrab untuk komponen template web, muncul di studio desain.
deskripsi Deskripsi komponen template web.
tabel Larik tabel Dataverse yang dapat digunakan pembuat untuk menavigasi secara langsung ke ruang kerja Data untuk mengedit konfigurasi tabel atau rekaman. Tabel harus didaftarkan menggunakan nama logisnya.
params Parameter dengan properti yang ditentukan:

id: matches yang digunakan dalam kode templat web dan tag Liquid include.

displayName: Nama yang ramah di studio desain.

description: Teks pendek muncul melalui tooltip untuk memberikan konteks kepada pembuat yang menggunakan komponen.

Contoh:

{% manifest %} 
    { 
    "type": "Functional", 
    "displayName": "Data Cards", 
    "description": "This component displays data using a cards layout", 
    "tables": ["cards"], 
    "params": [ 
        { 
        "id": "title", 
        "displayName": "Title", 
        "description": "Heading for this component" 
        }, 
        { 
        "id": "count", 
        "displayName": "Count", 
        "description": "No. of items to be displayed" 
        }] 
    } 
{% endmanifest %} 

<!--additional web template code to use parameters to specialized functionality-->

Tulis kode template web

Jika Anda ingin memperluas template web siap pakai yang ada, sebaiknya buat salinan template web dan perluas salinannya untuk menyimpan kode sumber dan mencegah kehilangan data.

Semua parameter dilewatkan sebagai string. Di kode Anda, sebaiknya konversi nilai parameter ke jenis yang diinginkan saat diperlukan. Mengkonversi parameter dapat dicapai menggunakan filter Liquid.

Contoh:

  • {% assign posts_count = count | integer %}
  • {% assign column_count = columns | integer %}

Konfigurasi komponen template web di halaman web

Bila komponen template web (dengan bagian manifes) dibuat, Anda dapat menambahkan referensi Liquid yang terkait ke salinan halaman web ( Visual Studio Code for the Web, Visual Studio Code, aplikasi Manajemen Portal, atau metode lain) yang melewatkan berbagai parameter, seperti ditunjukkan dalam contoh ini:

{% include 'webTemplateName' name: 'Topics' count:'4' %}

Anda dapat mengkonfigurasi parameter secara langsung di studio desain. Dengan begitu, pengembang pro dapat membangun komponen lanjutan menggunakan template web yang dapat dikonfigurasi oleh pembuat kode rendah menggunakan studio desain.

Konfigurasikan parameter di studio desain.

Masalah dan batasan yang diketahui

Mengurung komponen template web ke komponen template web lain tidak didukung.

Langkah selanjutnya

Cara membuat komponen template web

Lihat Juga