Bagikan melalui

Menggunakan atribut kustom untuk mengaktifkan fitur desainer dalam email, halaman, dan formulir

  • Artikel

Desainer konten menyediakan editor grafis dan editor kode HTML. HTML yang mereka hasilkan kompatibel dengan penyaji HTML apa pun, namun mereka juga mendukung beberapa atribut kustom yang mendukung elemen desain tarik dan lepaskan serta pengaturan gaya umum yang diberikan oleh editor grafis. Template pesan default dan template halaman yang disediakan dengan Dynamics 365 Customer Insights - Journeys memanfaatkan atribut khusus ini untuk memudahkan Anda menyesuaikannya dengan cara tertentu. Anda juga dapat menggunakan atribut kustom ini saat mendesain template Anda sendiri.

Tip

Microsoft tidak menyediakan dukungan untuk HTML kustom dalam email.

Ringkasan tag dan atribut

Tabel berikut menyediakan referensi cepat untuk atribut kustom dan tag meta yang dijelaskan dalam topik ini.

Atribut kustom Keterangan
<meta type="xrm/designer/setting" name="type" value="marketing-designer-content-editor-document"> Saat tag ini ada di <head> dokumen Anda, tab Desainer akan menyediakan fitur seret dan letakkan. Jika tag ini tidak ada, tab Desainer menyediakan editor halaman penuh yang disederhanakan. Informasi selengkapnya: Tampilkan kotak alat dan aktifkan pengeditan seret dan lepas
<meta type="xrm/designer/setting" name="additional-fonts" datatype="font" value="<font-list>"> Ketika tag ini ada di <head> dokumen Anda, font yang tercantum dalam <font-list> (dipisahkan titik koma) akan ditambahkan ke menu font di toolbar pemformatan untuk elemen teks. Informasi selengkapnya: Menambahkan font baru ke toolbar elemen teks
<div data-container="true"> … </div> Menandai bagian awal dan akhir kontainer tempat pengguna dapat menarik dan melepaskan elemen desain. Informasi selengkapnya: Membuat kontainer tempat pengguna dapat menambahkan elemen desain
<div data-editorblocktype="<element-type>"> … </div> Menandai bagian awal dan akhir elemen desain. Nilai atribut akan mengidentifikasi jenis elemen tersebut (teks, gambar, tombol, dan sebagainya). Beberapa elemen desain mendukung atribut tambahan di sini. Informasi selengkapnya: Mengidentifikasi elemen desain dan elemen Kunci dalam tampilan Desainer
<meta type="xrm/designer/setting" name="<name>" value="<initial-value>" datatype="<data-type>" label="<label>"> Tag ini menentukan pengaturan gaya seluruh dokumen yang dapat diedit pengguna menggunakan tab Gaya Desainer> . Informasi selengkapnya: Menambahkan pengaturan ke tab Gaya
/* @<tag-name> */ … /* @<tag-name> */ Gunakan CSS komentar seperti ini untuk mengelilingi nilai yang CSS akan dikontrol oleh pengaturan gaya, di mana <tag-name> adalah nilai atribut name untuk tag meta yang menetapkan pengaturan. Informasi selengkapnya: Tambahkan CSS komentar untuk menerapkan pengaturan gaya di kepala
property-reference= "<attr>:@< tag-name >;<attr>:@< tag-name >; …" Tempatkan atribut ini di tag HTML apa pun untuk menempatkan atribut dengan nilai yang dikontrol oleh pengaturan gaya, di mana <attr> adalah nama atribut yang akan dibuat dan <tag-name> adalah nilai name atribut untuk tag meta yang menetapkan pengaturan. Informasi selengkapnya: Menambahkan atribut referensi properti untuk menerapkan pengaturan gaya dalam isi

Bagian selanjutnya dari topik ini memberikan informasi lebih lanjut tentang cara menggunakan masing-masing fitur yang dirangkum dalam tabel.

Menampilkan toolbox dan mengaktifkan pengeditan tarik dan lepaskan

Anda dapat menempelkan HTML yang dikembangkan di alat pihak ketiga mana pun langsung ke tab HTML perancang untuk mulai membangun desain dengan sangat cepat. Namun, saat Anda melakukannya, tab Desainer akan ditampilkan sebagai editor teks kaya tunggal yang menyediakan toolbar pemformatan teks, dan menampilkan semua gambar, tautan, dan gaya yang disertakan dalam HTML Anda, tetapi tidak menyediakan tab Toolbox, Properties, atau Styles , atau fungsionalitas seret dan letakkan apa pun (tampilan Designer yang disederhanakan ini terkadang disebut editor halaman penuh). Namun, Anda dapat mengaktifkan fungsionalitas seret dan lepas untuk desain apa pun yang ditempelkan dengan menambahkan tag meta berikut ke <head> bagian dokumen Anda:

<meta type="xrm/designer/setting" name="type" value="marketing-designer-content-editor-document">

Gambar berikut menunjukkan desain yang sama dalam mode edit halaman penuh (kiri) dan mode tarik dan lepaskan (kanan). Satu-satunya perbedaan adalah desain di sebelah kanan mencakup tag meta, sehingga tarik dan lepaskan diaktifkan, dan panel samping ditampilkan.

Editor satu halaman penuh vs. editor seret dan lepas.

Catatan

Bila menggunakan editor halaman penuh, Anda tetap dapat memilih, mengedit, dan memberi gaya teks menggunakan toolbar pemformatan teks (ditampilkan), serta dapat mengklik dua kali gambar, tautan, dan elemen lain untuk menetapkan propertinya menggunakan dialog pop-up. Toolbar juga menyertakan tombol edit Tombol personalisasi.Bantuan untuk menambahkan konten dinamis, seperti nilai bidang yang diambil dari catatan kontak setiap penerima.

Membuat kontainer tempat pengguna dapat menambahkan elemen desain

Pada tab Desainer , pengguna hanya bisa mengedit konten yang terdapat dalam elemen desain, dan hanya bisa menyeret elemen desain baru ke bagian dokumen yang disiapkan sebagai wadah data. Oleh karena itu, Anda dapat membuat templat di mana beberapa area (di luar kontainer) dikunci untuk pengeditan pada tab Desain , sementara ares lainnya (di dalam kontainer yang tidak terkunci) akan menerima pengeditan dan konten yang diseret.

Gunakan <div> tag yang menyertakan atribut data-container="true" untuk membuat kontainer data, seperti:

<table aria-role="presentation">
    <tbody><tr>
        <td>
            LOCKED
        </td>
        <td>
            <div data-container="true">
                <!-- DRAG HERE -->
            </div>
        </td>
    </tr>
</tbody></table>

Teks atau tag HTML apa pun yang ditumpuk dalam pasangan tag div kontainer data, dan bukan bagian dari elemen desain, akan membuat area yang tidak dapat diseret dan tidak dapat diedit di antara dua area yang dapat diseret. Contoh: 

<div data-container="true">
    <!-- DRAG HERE --> <p> LOCKED </p> <!-- DRAG HERE -->
</div>

Catatan

Saat editor halaman penuh diaktifkan, semua fitur seret dan lepas dinonaktifkan, dan Anda dapat mengedit semua konten di tab Desainer , termasuk konten di luar data-container tag div (yang tidak berpengaruh di editor halaman penuh).

Mengunci kontainer dalam tampilan Desainer

Anda bisa mengunci kontainer untuk membuat semua kontennya baca-saja pada tab Desainer . Jika kontainer terkunci berisi elemen desain, maka semua konten dan pengaturan untuk elemen tersebut akan tetap terkunci, dan tab Properti tidak akan pernah ditampilkan untuk mereka, bahkan jika Anda memilihnya.

Anda mungkin menggunakan fitur pengunci kontainer untuk mengunci kontainer setelah Anda selesai menambahkan dan mengonfigurasi komponen desain untuknya.

Untuk mengunci kontainer, tambahkan atribut ke data-locked="hard" tag kontainer, seperti ini:

<div data-container="true" data-locked="hard">
    <!-- All elements and content here are locked, with no properties shown -->
</div>

Catatan

Anda juga dapat mengunci konten di tingkat elemen desain. Jika konten dikunci di tingkat kontainer, pengaturan tersebut akan menimpa status dikunci/buka kunci semua elemen desain dalam kontainer tersebut. Informasi selengkapnya: Mengunci elemen dalam tampilan Designer

Untuk lebih menerapkan penguncian kontainer, Anda dapat membatasi akses ke tab HTML , yang akan mencegah pengguna yang dipilih mengakses kode (di mana mereka dapat mengalahkan pengaturan ini). Informasi selengkapnya: Mengontrol akses ke fitur desainer

Mengidentifikasi elemen desain

Setiap kali Anda menambahkan elemen desain menggunakan tab Desainer , editor menyisipkan sepasang tag untuk menandai awal dan akhir elemen, dan membuat HTML apa pun yang diperlukan untuk menampilkan elemen seperti yang ditentukan dalam pengaturannya pada <div> tab Properti .

Elemen desain ditandai dengan <div> tag yang menyertakan atribut formulir data-editorblocktype="<element-type>", di mana nilai atribut ini mengidentifikasi jenis elemen itu. Misalnya, tag berikut <div> membuat elemen teks:

<div data-editorblocktype="Text">
    ...
    <!-- Don't edit the element content here -->
    ...
</div>

Tabel berikut mencantumkan nilai yang tersedia untuk data-editorblocktype atribut.

Nama elemen desain Jenis elemen data-editorblocktype Nilai atribut
Elemen teks Elemen desain umum Text
Elemen gambar Elemen desain umum Image
Elemen pembagi Elemen desain umum Pembagi
Elemen tombol Elemen desain umum Tombol
Elemen blok konten Elemen desain umum Konten
(Jenis elemen desain ini juga mencakup atribut, yang data-block-datatype="<block-type>" mengidentifikasi jenis blok konten itu, di mana <blok-jenis> memiliki nilai salah satu text atau image.)
Elemen halaman pemasaran Email Halaman Pemasaran
Elemen aktivitas Email Event
Elemen survei Email Survey
Elemen formulir Formulir FormBlock
Elemen bidang Konten formulir Bidang-bidang-nama<>, misalnya: Bidang-email
Elemen daftar langganan Konten formulir SubscriptionListBlock
Elemen teruskan ke teman Konten formulir ForwardToFriendBlock
Elemen jangan kirim email dan Elemen ingat saya Konten formulir Bidang kotak centang
(Elemen ini masing-masing membuat kotak centang dan dibedakan dengan pengaturan internal mereka).
Elemen tombol kirim Konten formulir SubmitButtonBlock
Elemen tombol atur ulang Konten formulir ResetButtonBlock
Elemen captcha Konten formulir CaptchaBlock

Untuk informasi selengkapnya tentang masing-masing elemen desain ini, lihat Referensi elemen desain.

Penting

Saat Anda mengerjakan tab HTML , Anda harus menghindari pengeditan konten apa pun di antara <div> tag elemen desain Anda karena hasil melakukannya tidak dapat diprediksi, dan pengeditan Anda kemungkinan akan ditimpa oleh perancang. Sebagai gantinya, gunakan tab Desainer untuk mengelola konten dan properti elemen desain Anda.

Mengunci elemen dalam tampilan Desainer

Anda dapat mengunci konten dan properti elemen desain apa pun dengan menambahkan atribut berikut ke tag pembukanya <div> :

data-protected="true"

Sebagai contoh:

<div data-editorblocktype="Divider" data-protected="true">
    …
        <!-- Don't edit the element content here -->
    …
</div>

Saat elemen desain ditandai sebagai dilindungi, pengguna yang bekerja di tab Desainer untuk halaman atau email tidak akan dapat mengedit properti atau konten elemen. Atribut ini selalu disertakan untuk elemen blok konten, tapi Anda dapat menambahkannya ke setiap jenis elemen desain untuk melindunginya. Setiap elemen desain yang menyertakan atribut ini ditampilkan sebagai berbayang pada tab HTML untuk menunjukkan bahwa atribut tersebut dilindungi, tetapi Anda masih dapat mengeditnya di sana jika Anda bersikeras. Tetapkan atribut ini ke "salah" (atau hapus saja) untuk menghapus perlindungan dari elemen desain.

Catatan

Anda juga dapat mengunci konten di tingkat kontainer, yang akan menimpa status dikunci/buka kunci semua elemen desain dalam kontainer tersebut. Informasi selengkapnya: Mengunci kontainer dalam tampilan desainer

Untuk lebih menerapkan penguncian konten, Anda dapat membatasi akses ke tab HTML , yang akan mencegah pengguna yang dipilih mengakses kode (di mana mereka dapat mengalahkan pengaturan ini). Informasi selengkapnya: Mengontrol akses ke fitur desainer

Mengimpor HTML yang dibuat secara eksternal ke desainer

Anda dapat menggunakan alat apa pun yang Anda suka untuk membuat tata letak dan konten HTML awal untuk email pemasaran, halaman, atau formulir. Ketika HTML Anda sudah siap, cukup tempelkan ke desainer yang relevan dan kemudian tambahkan fitur apa pun Dynamics 365 Customer Insights - Journeys yang Anda butuhkan seperti yang dijelaskan dalam subbagian berikut.

Mengimpor kode HTML

Untuk memungkinkan HTML dibuat secara eksternal ke dalam desainer, mulai dengan melakukan hal berikut:

  1. Buat email pemasaran, halaman, atau formulir Dynamics 365 Customer Insights - Journeys baru.
  2. Buka tab Desain>HTML desainer.
  3. Hapus semua konten dari tab HTML dan tempelkan di HTML yang Anda buat secara eksternal.
  4. Buka tab Desainer>Desain desainer dan periksa desain Anda.
  5. Jika Anda bekerja dengan email pemasaran, pastikan untuk menggunakan bantuan edit untuk menempatkan semua konten dan tautan yang diperlukan (termasuk tautan pusat langganan dan alamat pengirim fisik Anda).

Tip

Karena Anda baru saja menyisipkan HTML eksternal, desain Anda mungkin tidak menyertakan kode apa pun yang spesifik Dynamics 365 Customer Insights - Journeys, sehingga Desainer menampilkan editor halaman penuh, yang menyediakan fitur untuk pemformatan teks dasar, pemformatan gambar, dan (untuk email) membantu mengedit untuk menambahkan konten dinamis. Untuk informasi selengkapnya tentang cara bekerja dengan editor halaman penuh, lihat Menampilkan kotak alat dan mengaktifkan pengeditan seret dan letakkan. Jika editor halaman penuh menyediakan semua fungsi yang Anda butuhkan, kemudian menggunakannya untuk menyempurnakan desain Anda dan kemudian menayangkan secara langsung seperti biasa. Jika Anda lebih suka menggunakan editor seret dan lepas untuk menyempurnakan desain Anda, lihat bagian berikutnya untuk informasi tentang cara mengaktifkannya.

Mengaktifkan editor tarik dan lepas setelah impor

Jika Anda ingin mengaktifkan editor seret dan lepas berfitur lengkap dan/atau menambahkan elemen desain tingkat lanjut saat bekerja dalam tampilan Desainer , Anda dapat dengan mudah melakukannya dengan mengedit lebih lanjut kode HTML yang diimpor sebagai berikut:

  1. Kembali ke tab Desain>HTML desainer.

  2. Aktifkan editor seret dan lepas dengan menambahkan tag meta yang diperlukan ke dokumen Anda seperti yang dijelaskan dalam Tampilkan kotak alat dan aktifkan pengeditan seret dan lepas.

  3. Lakukan hal berikut sesuai kebutuhan saat mengerjakan tab Desain>HTML :

    • Di setiap bagian desain tempat Anda ingin dapat menyeret satu atau beberapa elemen desain, tambahkan kode untuk membuat kontainer data seperti yang dijelaskan dalam Membuat kontainer tempat pengguna dapat menambahkan elemen desain.
    • Jika Anda lebih suka memposisikan elemen desain secara langsung dalam kode Anda tanpa menggunakan drag-and-drop, Anda dapat memasukkan kode yang diperlukan langsung ke tab HTML>Desain . Elemen yang Anda tambahkan dengan cara ini tidak akan mendukung drag-and-drop, tetapi mereka akan menyediakan pengaturan di panel Properti tab Desainer Desain> . Anda hanya dapat menempatkan elemen teks, gambar, pembagi, dan tombol menggunakan teknik ini (membuat kontainer dan menggunakan drag-and-drop untuk jenis elemen desain lainnya). Lihat tabel setelah prosedur ini untuk struktur HTML yang diperlukan untuk membuat masing-masing elemen ini; salin/tempel kode ini secara langsung dari tabel sebagaimana diperlukan.

  4. Anda sekarang dapat masuk ke tab Desainer Desain> dan menyeret elemen desain ke setiap kontainer yang Anda siapkan lalu menggunakan panel Properti untuk mengonfigurasi setiap elemen desain yang Anda seret atau tempelkan langsung ke kode Anda.

Tipe elemen desain Tempelkan kode ini Catatan                                                     
Text <div data-editorblocktype="Text"><p> Enter your text here</p></div> Anda dapat memasukkan konten HTML di antara tag langsung di <p> sini, atau pergi ke Desainer untuk menggunakan editor teks kaya untuk melakukannya.
Image <div data-editorblocktype="Image"><div align="Center" class="imageWrapper"><a href="example.com" title="example.com"><img alt="Some alt text" height="50" src="about:blank" width="50"></a></div></div> Cara termudah untuk mengubah sumber gambar Anda dan/atau tautan gambar adalah dengan membuka Desainer dan menggunakan panel Properti. Anda juga dapat mengedit atribut berikut secara langsung di HTML:
  • Tetapkan tautan gambar dan/atau judul dengan mengedit href dan/atau atribut judul pada elemen <a>.
  • Untuk menghapus tautan dari gambar, hapus konten href atribut dan title<a> elemen (tetapi pertahankan atribut dan tanda kutip, seperti href="").
  • Tetapkan sumber gambar dengan mengedit atribut src elemen <img>.
Jangan mengedit kode apa pun lainnya.
Divider <div data-editorblocktype="Divider"><div align="center" class="dividerWrapper"><table aria-role="presentation" style="padding: 0px; margin: 0px; width: 100%"><tbody><tr style="padding: 0px;"> <td style="margin:0px; padding-left: 0px; padding-right: 0px; padding-top: 5px; padding-bottom: 5px; vertical-align:top;"> <p style="margin: 0px; padding: 0px; border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: rgb(0, 0, 0); line-height: 0px; width: 100%;"><span>&nbsp;</span></p></td></tr></tbody></table></div></div> Jangan mengedit kode ini secara langsung di editor HTML. Sebagai gantinya, lakukan Designer dan gunakan panel Properties .
Button <div data-editorblocktype="Button"><!--[if mso]><div align="center"><v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" Jangan mengedit kode ini secara langsung di editor HTML. Sebagai gantinya, lakukan Designer dan gunakan panel Properties .

Untuk informasi selengkapnya tentang bagaimana elemen desain muncul dalam kode, lihat Mengidentifikasi elemen desain.

Menambahkan font baru ke kotak alat elemen teks

Elemen teks memberikan toolbar pemformatan pop-up dalam desainer, yang mencakup menu untuk menerapkan font teks yang dipilih.

Pemilih font untuk elemen teks.

Untuk menambahkan font baru ke pemilih font ini, tambahkan tag yang <meta> menggunakan formulir berikut ke <head> dokumen:

<meta type="xrm/designer/setting" name="additional-fonts" datatype="font" value="<font-list>">

Di mana <font-list> adalah daftar nama font yang dipisahkan titik koma.

Menambahkan pengaturan ke tab Gaya

Salah satu fitur praktis dari template out-of-box adalah bahwa mereka menyediakan pengaturan gaya global pada tab Styles , yang memungkinkan pengguna dengan cepat menyesuaikan keluarga font, palet warna, dan Pengaturan Global lain yang diaktifkan untuk template. Setiap template hanya mencakup pengaturan gaya yang sesuai untuk desain spesifik tersebut, dan Anda juga dapat mendesain template yang hanya menyediakan pengaturan gaya yang tepat untuk Anda dan pengguna Anda.

Tab Gaya Desainer > .

Untuk menambahkan pengaturan ke tab Gaya , Anda harus melakukan hal berikut:

  • <meta> Tambahkan tag ke <head> dokumen Anda untuk membuat pengaturan.
  • Konfigurasikan tag HTML dan/atau gaya yang menerapkan pengaturan yang dibuat oleh tag meta.

Subbagian berikut menjelaskan cara melakukan setiap hal ini.

Menambahkan tag meta untuk membuat pengaturan

Tag yang diperlukan <meta> mengambil bentuk berikut:

<meta type="xrm/designer/setting" name="<name>" value="<initial-value>" datatype="<data-type>" label="<label>">

Di mana:

  • <name> mengidentifikasi tag meta, yang juga harus Anda rujuk dalam gaya dan tag HTML tempat pengaturan akan diterapkan.
  • <initial-value> adalah nilai default yang sesuai untuk gaya.
  • <Data-type> mengidentifikasi jenis nilai yang akan diberikan pengguna. Pengaturan ini mempengaruhi tipe kontrol yang disajikan pada tab Gaya . Anda harus menggunakan salah satu nilai yang tercantum dalam tabel berikut.
  • <label> menentukan teks yang akan diperlihatkan di tab Gaya untuk pengaturan.
Nilai tipe data Keterangan
color Menentukan warna menggunakan nilai hash-tag seperti #000 atau #1a32bf. Membuat kontrol pemilih warna pada tab Gaya .
font Menentukan nama kelompok font. Anda juga dapat mengonfigurasi susunan font menggunakan daftar nama font yang dipisahkan tanda koma dalam urutan preferensi. Membuat bidang input sederhana pada tab Gaya .
number Mengatur nilai numerik tanpa unit (gunakan teks untuk memungkinkan unit seperti px atau em ditentukan bersama dengan nilai). Membuat bidang input dengan tombol atas/bawah yang juga dapat digunakan untuk menambah/mengurangi nilai saat ini pada tab Gaya .
picture Menetapkan sumber gambar (sebagai URL). Membuat bidang input sederhana pada tab Gaya .
text Menetapkan nilai yang dapat mencakup teks dan angka. Gunakan juga tipe data ini untuk nilai numerik yang mungkin menyertakan unit (seperti px atau em). Membuat bidang input sederhana pada tab Gaya .

Catatan

Label yang ditampilkan pada tab Gaya mungkin muncul dalam tanda kurung siku, seperti "[Gaya Saya]". Kurung siku menunjukkan bahwa teks yang sedang ditampilkan tidak memiliki terjemahan yang tersedia. Jika Anda memilih nilai yang didukung oleh salah satu dari template siap pakai (seperti "Warna 1"), maka terjemahan akan tersedia, sehingga kurung siku tidak akan ditampilkan.

Catatan

Pengaturan gaya yang ditetapkan menggunakan tag, seperti yang <meta> dijelaskan di sini, hanya ditampilkan pada tab Gaya bila pengaturan tersebut juga dirujuk dalam setidaknya satu gaya aktual atau tag HTML, seperti yang dijelaskan di bagian berikutnya.

Menambahkan komentar CSS untuk menerapkan pengaturan gaya dalam kepala

Pengaturan yang dibuat pada tab Gaya dapat diterapkan ke CSS gaya yang <head> ditetapkan dalam dokumen HTML Anda dengan mengelilingi CSS nilai dengan dua CSS komentar yang berisi nilai name atribut untuk tag meta yang cocok xrm/designer/setting . Pasangan komentar CSS menggunakan formulir berikut:

/* @<tag-name> */ <value> /* @<tag-name> */

Di mana:

  • <tag-name> adalah atribut name untuk tag meta xrm/designer/setting yang menetapkan pengaturan tab Styles yang relevan .
  • <value> adalah nilai yang akan diganti saat pengguna mengedit pengaturan tab Gaya yang relevan .

Penting

Anda hanya dapat menggunakan pasangan CSS komentar ini dalam gaya dan kelas yang ditentukan dalam <style> tag di bagian tersebut <head> . Selanjutnya harus ada hanya satu set <style> tag yang ada, dengan semua CSS gaya diatur di sana.

Berikut adalah contoh di mana Anda dapat melihat tag meta yang xrm/designer/setting membuat kontrol pemilih warna yang disebut "Warna 1" pada tab Gaya . Gaya CSS kemudian menerapkan pengaturan ini untuk menetapkan warna teks untuk <h1> elemen.

<head>
    <meta type="xrm/designer/setting" name="color1" value="#ff0000" datatype="color" label="Color 1">
    <style>
        h1 {color: /* @color1 */ #ff0000 /* @color1 */;}
    </style>
</head>

Menambahkan atribut referensi properti untuk menerapkan pengaturan gaya dalam badan

Pengaturan yang dibuat pada tab Gaya dapat diterapkan sebagai nilai atribut ke tag HTML apa pun di dokumen Anda dengan <body> menambahkan atribut formulir berikut ke setiap tag yang relevan:

property-reference= "<attr>:@< tag-name >;<attr>:@< tag-name >; …"

Di mana:

  • <ATTR> adalah nama atribut yang akan dibuat.
  • <tag-name> adalah nilai name atribut untuk tag meta yang menetapkan pengaturan.
  • Beberapa atribut, jika diperlukan, harus dipisahkan dengan titik koma dalam atribut referensi properti tunggal.

Berikut adalah contoh di mana Anda dapat melihat xrm/designer/setting tag meta yang membuat dua pengaturan untuk mengontrol gambar pahlawan (spanduk) dalam dokumen, dengan kontrol yang disebut "Gambar pahlawan" dan "Tinggi gambar pahlawan" pada tab Gaya . Properti property-reference ini kemudian digunakan dalam <img> tag untuk menerapkan pengaturan tersebut.

<head>
    <meta type="xrm/designer/setting" name="hero-image" value="picture.jpg" datatype="picture" label="Hero image">
    <meta type="xrm/designer/setting" name="hero-image-height" value="100px" datatype="text" label="Hero image height">
</head>
<body>
    <img property-reference="src:@hero-image;height:@hero-image-height;">
</body>

Jadi, dalam contoh ini, <img> tag akan menyelesaikan sesuatu seperti:

<img src="picture.jpg" height="100px">