Condividi tramite

Utilizzare gli attributi personalizzati per abilitare le funzionalità della finestra di progettazione in messaggi e-mail, pagine e moduli

  • Articolo

Le finestre di progettazione del contenuto consentono di usufruire di un editor grafico e di un editor di codice HTML. Sebbene l'HTML generato sia compatibile con qualsiasi renderer HTML, puoi disporre anche di alcuni attributi personalizzati che supportano gli elementi di progettazione per il trascinamento e impostazioni di stile generali fornite dall'editor grafico. I modelli di pagina e i modelli di messaggio predefiniti forniti con Dynamics 365 Customer Insights - Journeys utilizzano questi attributi personalizzati per consentirti una personalizzazione più semplice in modi specifici. Puoi utilizzare questi attributi personalizzati anche per progettare i tuoi modelli.

Suggerimento

Microsoft non offre supporto per l'HTML personalizzato nelle e-mail.

Riepilogo dei tag e degli attributi

La tabella seguente rappresenta un riferimento rapido agli attributi personalizzati e ai tag META descritti in questo argomento.

Attributo personalizzato Descrizione
<meta type="xrm/designer/setting" name="type" value="marketing-designer-content-editor-document"> Quando questo tag è presente nella sezione <head> del tuo documento, la scheda Finestra di progettazione fornirà funzionalità di trascinamento. Se il tag non è presente, nella scheda Finestra di progettazione sarà disponibile l'editor a pagina intera, semplificato. Altre informazioni: Visualizzare la casella degli strumenti e abilitare la modifica mediante trascinamento
<meta type="xrm/designer/setting" name="additional-fonts" datatype="font" value="<font-list>"> Quando il tag è presente nell'<head> del documento, i caratteri elencati in <font-list> (separati da punto e virgola) verranno aggiunti al menu dei caratteri nella barra degli strumenti di formattazione per gli elementi di testo. Altre informazioni: Aggiungere nuovi caratteri alla barra degli strumenti degli elementi di testo
<div data-container="true"> … </div> Contrassegna l'inizio e la fine di un contenitore in cui gli utenti possono trascinare elementi di progettazione. Altre informazioni: Creare un contenitore in cui gli utenti possono aggiungere elementi di progettazione
<div data-editorblocktype="<element-type>"> … </div> Contrassegna l'inizio e la fine di un elemento di progettazione. Il valore dell'attributo identifica il tipo di elemento (testo, immagine, pulsante e così via). Alcuni elementi di progettazione supportano altri attributi riportati di seguito. Altre informazioni: Identificare gli elementi di progettazione e Bloccare elementi nella vista di progettazione
<meta type="xrm/designer/setting" name="<name>" value="<initial-value>" datatype="<data-type>" label="<label>"> Questo tag definisce un'impostazione di stile a livello di documento che gli utenti possono modificare tramite la scheda Finestra di progettazione>Stili. Altre informazioni: Aggiungere impostazioni alla scheda Stili
/* @<tag-name> */ … /* @<tag-name> */ Utilizza commenti CSS come questi per racchiudere un valore CSS che deve essere controllato da un'impostazione di stile, in cui <tag-name> è il valore dell'attributo name per il tag META che ha stabilito l'impostazione. Altre informazioni: Aggiungere commenti CSS per implementare impostazioni di stile nell'intestazione
property-reference= "<attr>:@< tag-name >;<attr>:@< tag-name >; …" Inserisci questo attributo in qualsiasi tag HTML per aggiungere un attributo con un valore controllato da un'impostazione di stile, dove <attr> è il nome dell'attributo da creare e <tag-name> è il valore dell'attributo name per il tag META che ha stabilito l'impostazione. Altre informazioni: Aggiungere attributi property-reference per implementare impostazioni di stile nel corpo

Nelle sezioni successive di questo argomento vengono fornite ulteriori informazioni su come utilizzare tutte le funzionalità riepilogate nella tabella.

Visualizzare la casella degli strumenti e abilitare la modifica mediante trascinamento

Per avviare una progettazione molto rapidamente, puoi incollare l'HTML sviluppato in qualunque strumento di terze parti direttamente nella scheda HTML della finestra di progettazione. Tuttavia, quando esegui questa operazione, nella scheda Finestra di progettazione verrà visualizzato un singolo editor di testo RTF che offre una barra degli strumenti per la formattazione del testo e mostra tutti i collegamenti, le immagini e gli stili inclusi nel file HTML. Non saranno invece disponibili le schede Casella degli strumenti, Proprietà o Stili e la funzionalità di trascinamento. Questa visualizzazione Progettazione semplificata viene talvolta denominata editor a pagina intera. Puoi abilitare la funzionalità di trascinamento per qualunque progettazione incollata mediante l'aggiunta del tag META seguente alla sezione <head> del documento:

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

Nell'immagine seguente viene mostrata la stessa progettazione in modalità di modifica a pagina intera (a sinistra) e in modalità di trascinamento (a destra). L'unica differenza sta nel fatto che la progettazione a destra include il tag META, pertanto il trascinamento è abilitato, ed è visibile il pannello laterale.

Editor a pagina intera rispetto all'editor drag-and-drop.

Nota

Quando utilizzi un editor a pagina intera, puoi comunque selezionare e modificare il testo, nonché assegnargli uno stile, utilizzando la barra degli strumenti di formattazione del testo (visualizzata). Inoltre, puoi fare doppio clic su immagini, collegamenti e altri elementi per impostare le relative proprietà mediante una finestra di dialogo popup. La barra degli strumenti include anche il pulsante Modifica assistitaPulsante di personalizzazione. per l'aggiunta di contenuto dinamico come, ad esempio, i valori di campo ricavati dal record del contatto di ogni destinatario.

Creare un contenitore in cui gli utenti possono aggiungere elementi di progettazione

Nella scheda Finestra di progettazione gli utenti possono modificare solo il contenuto presente in un elemento di progettazione e possono trascinare solo nuovi elementi di progettazione nelle parti del documento configurate come contenitori di dati. Pertanto, puoi creare modelli in cui alcune aree (esterne ai contenitori) sono bloccate per la modifica nella scheda Progettazione, mentre altre (all'interno dei contenitori sbloccati) accettano le modifiche e il contenuto trascinato.

Utilizza i tag <div> che includono l'attributo data-container="true" per creare i contenitori di dati, ad esempio:

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

I tag di testo o HTML nidificati in una coppia di tag DIV data-container, e che non fanno parte di un elemento di progettazione, creeranno un'area non trascinabile e non modificabile tra due aree trascinabili. Ad esempio: 

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

Nota

Quando un editor a pagina intera è abilitato, tutte le funzionalità di trascinamento sono disabilitate e puoi modificare tutto il contenuto della scheda Finestra di progettazione, incluso il contenuto esterno ai tag div data-container, che non ha alcun effetto sull'editor a pagina intera.

Bloccare un contenitore nella vista di progettazione

Puoi bloccare un contenitore per convertirne tutto il contenuto in sola lettura nella scheda Progettazione. Se un contenitore bloccato contiene elementi di progettazione, l'intero contenuto e tutte le impostazioni di questi elementi rimangono bloccati e la scheda Proprietà non verrà mai visualizzata per loro, anche se sono selezionati.

È consigliabile utilizzare la funzionalità di blocco del contenitore per bloccare un contenitore dopo aver aggiunto e configurato i componenti di progettazione in esso contenuti.

Per bloccare un contenitore, aggiungi l'attributo data-locked="hard" al tag del contenitore, come illustrato di seguito:

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

Nota

Puoi inoltre bloccare il contenuto a livello degli elementi di progettazione. Se il contenuto è bloccato a livello del contenitore, tale impostazione ignora lo stato bloccato/sbloccato di tutti gli elementi di progettazione all'interno di tale contenitore. Altre informazioni: Bloccare elementi nella vista di progettazione

Per applicare ulteriormente il blocco del contenitore, puoi limitare l'accesso alla scheda HTML in modo da impedire agli utenti selezionati di accedere al codice (in cui potrebbero in altro modo sovrascrivere questa impostazione). Altre informazioni: Controllare l'accesso alle funzionalità di progettazione

Identificare gli elementi di progettazione

Ogni volta che aggiungi un elemento di progettazione utilizzando la scheda Finestra di progettazione, l'editor inserisce una coppia di tag <div> per contrassegnare l'inizio e la fine dell'elemento e crea qualsiasi HTML sia necessario per visualizzare l'elemento come specificato nelle relative impostazioni della scheda Proprietà.

Gli elementi di progettazione sono contrassegnati con tag <div> che includono un attributo del modulo data-editorblocktype="<element-type>", dove il valore di questo attributo identifica il tipo di elemento. Ad esempio, il tag <div> seguente crea un elemento di testo:

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

Nella tabella seguente sono elencati i valori disponibili per l'attributo data-editorblocktype.

Nome elemento di progettazione Tipo di elemento data-editorblocktype Valore attributo
Elemento di testo Elemento di progettazione comune Text
Elemento immagine Elemento di progettazione comune Image
Elemento divisore Elemento di progettazione comune Divisore
Elemento pulsante Elemento di progettazione comune Pulsante
Elemento blocco di contenuto Elemento di progettazione comune Contenuto
Questo tipo di elemento di progettazione include inoltre un attributo data-block-datatype="<block-type>", che identifica il tipo di blocco di contenuto, dove <block-type> ha un valore text o image.
Elemento pagina di marketing E-mail Pagina di marketing
Elemento evento E-mail Event
Elemento sondaggio E-mail Survey
Elemento modulo Modulo FormBlock
Elemento campo Contenuto del modulo Field-<field-name>, ad esempio: Field-email
Elemento elenco sottoscrizioni Contenuto del modulo SubscriptionListBlock
Elemento inoltra a un amico Contenuto del modulo ForwardToFriendBlock
Elemento Non inviare per e-mail ed elemento Ricordami Contenuto del modulo Field-checkbox
Ciascuno di questi elementi crea caselle di controllo e viene altrimenti differenziato dalle rispettive impostazioni interne.
Elemento pulsante Invia Contenuto del modulo SubmitButtonBlock
Elemento pulsante Reimposta Contenuto del modulo ResetButtonBlock
Elemento captcha Contenuto del modulo CaptchaBlock

Per ulteriori informazioni su ognuno di questi elementi di progettazione, vedi Informazioni di riferimento sugli elementi di progettazione.

Importante

Quando lavori sulla scheda HTML, devi evitare di modificare il contenuto racchiuso tra i tag <div> dei tuoi elementi di progettazione perché i risultati di tale operazione possono essere imprevedibili e le tue modifiche possono essere comunque sovrascritte dalla finestra di progettazione. Utilizza invece la scheda Finestra di progettazione per gestire il contenuto e le proprietà dell'elemento di progettazione.

Bloccare elementi nella vista di progettazione

Puoi bloccare il contenuto e le proprietà di qualsiasi elemento di progettazione aggiungendo l'attributo seguente al relativo tag <div> di apertura:

data-protected="true"

Ad esempio:

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

Quando un elemento di progettazione viene contrassegnato come protetto, gli utenti che lavorano nella scheda Progettazione per una pagina o messaggio e-mail non potranno modificare le proprietà o il contenuto dell'elemento. Questo attributo viene sempre incluso per l'elemento di blocco del contenuto, ma puoi aggiungerlo a qualsiasi tipo di elemento di progettazione per proteggerlo. Qualsiasi elemento di progettazione che includa questo attributo appare ombreggiato nella scheda HTML a indicare che è protetto, ma puoi comunque modificarlo in questo punto se insisti. Imposta questo attributo su "false" (o rimuovilo semplicemente) per rimuovere la protezione da un elemento di progettazione.

Nota

Puoi inoltre bloccare il contenuto a livello del contenitore, ignorando in tal modo lo stato bloccato/sbloccato di tutti gli elementi di progettazione all'interno di tale contenitore. Altre informazioni: Bloccare un contenitore nella vista di progettazione

Per applicare ulteriormente il blocco del contenuto, puoi limitare l'accesso alla scheda HTML in modo da impedire agli utenti selezionati di accedere al codice (in cui potrebbero in altro modo sovrascrivere questa impostazione). Altre informazioni: Controllare l'accesso alle funzionalità di progettazione

Importare il file HTML creato esternamente nella finestra di progettazione

È possibile utilizzare qualsiasi strumento per creare il layout e i contenuti HTML iniziali per un messaggio e-mail, una pagina o un modulo di marketing. Quando l'HTML è pronto, incollarlo nella finestra di progettazione, quindi aggiungere le funzionalità di Dynamics 365 Customer Insights - Journeys necessarie come descritto nelle seguenti sottosezioni.

Importare il codice HTML

Per importare il codice HTML creato esternamente nella finestra di progettazione, iniziare effettuando le operazioni seguenti:

  1. Creare un messaggio e-mail, una pagina o un modulo di marketing in Dynamics 365 Customer Insights - Journeys.
  2. Passare alla scheda Progetta>HTML della finestra di progettazione.
  3. Cancellare il contenuto dalla scheda HTML e incollare il codice HTML creato esternamente.
  4. Passare alla scheda Progetta>Progettazione della finestra di progettazione ed esaminare il progetto.
  5. Se stai lavorando a un messaggio e-mail di marketing, assicurati utilizzare la modifica assistita per Inserire tutti i contenuti e collegamenti necessari (incluso un collegamento al Centro sottoscrizioni e l'indirizzo del mittente fisico).

Mancia

Poiché hai appena incollato il codice HTML esterno, la progettazione probabilmente non includerà alcun codice specifico di Dynamics 365 Customer Insights - Journeys, pertanto Progettazione mostra l'editor a pagina intera, che include le funzionalità di formattazione del testo di base, formattazione di immagini e (per i messaggi e-mail) la modifica assistita per l'aggiunta dei contenuti dinamici. Per ulteriori informazioni su come utilizzare l'editor a pagina intera, vedere Visualizzare la casella degli strumenti e abilitare la modifica mediante trascinamento. Se l'editor a pagina intera fornisce tutte funzionalità necessarie, usarlo per perfezionare la progettazione e quindi per passarla allo stato Live come di consueto. Se si preferisce utilizzare l'editor di trascinamento per perfezionare la progettazione, vedere la sezione seguente per informazioni su come abilitarlo.

Abilitare l'editor di trascinamento dopo l'importazione

Se si desidera abilitare l'editor di trascinamento con funzionalità complete e/o aggiungere elementi di progettazione avanzata mentre si lavora nella vista Progettazione, è possibile farlo facilmente modificando ulteriormente il codice HTML nel modo seguente:

  1. Tornare alla scheda Progetta>HTML della finestra di progettazione.

  2. Abilita l'editor con trascinamento della selezione aggiungendo il meta tag richiesto alla sezione del documento come descritto in Mostra la casella degli strumenti e abilita la modifica tramite trascinamento.

  3. Eseguire le operazioni seguenti mentre si lavora sulla scheda Progetta>HTML:

    • Per ogni fase della progettazione in cui si desidera poter trascinare uno o più elementi di progettazione, aggiungere il codice per creare un contenitore di dati come descritto in Creare un contenitore in cui gli utenti possono aggiungere elementi di progettazione.
    • Se si desidera posizionare gli elementi di progettazione direttamente nel codice senza utilizzare il trascinamento, è possibile digitare il codice necessario direttamente nella tabella Progetta>HTML. Gli elementi aggiunti in questo modo non supporteranno il trascinamento, ma forniranno le impostazioni nel pannello Proprietà della scheda Progetta>Progettazione. Con questa tecnica è possibile solo posizionare elementi di testo, immagine, divisore e pulsante (per gli altri elementi di progettazione creare contenitori e usare il trascinamento). Vedere la tabella dopo questa procedura per le strutture HTML necessarie per creare ognuno di questi elementi; copiare e incollare il codice direttamente dalla tabella in base alle esigenze.

  4. È ora possibile passare alla scheda Progetta>Progettazione e trascinare gli elementi di progettazione in ognuno dei contenitori impostati e quindi usare il pannello Proprietà per configurare ogni elemento di progettazione trascinato o incollato direttamente nel codice.

Tipo di elemento di progettazione Incollare questo codice Note                                                     
Text <div data-editorblocktype="Text"><p> Enter your text here</p></div> È possibile inserire direttamente contenuti HTML tra tag <p> qui, oppure passare Progettazione per usare l'editor di testo RTF per eseguire questa operazione.
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> Il modo più semplice per modificare l'origine delle immagini e/o il collegamento delle immagini è quello di passare a Progettazione e usare il pannello Proprietà. Ma è anche possibile modificare gli attributi seguenti direttamente in HTML:
  • Impostare il collegamento e/o il titolo dell'immagine modificando gli attributi href e/o del titolo dell'elemento <a>.
  • Per rimuovere il collegamento dall'immagine, cancellare il contenuto degli attributi href e title dell'elemento <a> (ma mantenere gli attributi e le virgolette, ad esempio, href="").
  • Impostare l'origine dell'immagine modificato l'attributo src dell'elemento <img>.
Non modificare nulla dell'altro codice.
Divisore <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> Non modificare il contenuto di questo codice direttamente nell'editor HTML. Passare invece a Progettazione e usare il pannello Proprietà.
Pulsante <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" Non modificare il contenuto di questo codice direttamente nell'editor HTML. Passare invece a Progettazione e usare il pannello Proprietà.

Per ulteriori informazioni su come appaiono gli elementi di progettazione nel codice, vedere Identificare gli elementi di progettazione.

Aggiungere nuovi caratteri alla barra degli strumenti degli elementi di testo

Gli elementi di testo offrono una barra degli strumenti popup di formattazione, che include un menu per l'applicazione di un carattere al testo selezionato.

Selettore di font per gli elementi di testo.

Per aggiungere nuovi caratteri al selettore di carattere, aggiungi un <meta> che utilizza il seguente formato nell'<head> del documento:

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

Dove <font-list> è un elenco separato da punti e virgola di nomi di caratteri.

Aggiungere impostazioni alla scheda Stili

La praticità dei modelli predefiniti sta nel fatto che forniscono impostazioni di stile globali nella scheda Stili, che consentono agli utenti di regolare rapidamente la famiglia di caratteri, la tavolozza dei colori e altre impostazioni globali abilitate per il modello. Ogni modello include solo le impostazioni di stile appropriate alla progettazione specifica. Puoi progettare in modo analogo modelli che consentono solo le impostazioni di stile corrette per te e i tuoi utenti.

Scheda Progettazione > Stili.

Per aggiungere un'impostazione alla scheda Stili, devi effettuare le operazioni seguenti:

  • Aggiungere un tag <meta> alla sezione <head> del documento per creare l'impostazione.
  • Configurare stili e/o tag HTML che applicano le impostazioni create dal tag META.

Le seguenti sottosezioni illustrano come eseguire queste operazioni.

Aggiungere un tag META per creare l'impostazione

Il tag <meta> necessario assume il formato seguente:

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

Dove:

  • <name> identifica il tag META, a cui devi fare riferimento anche negli stili e nei tag HTML in cui verrà applicata l'impostazione.
  • <initial-value> è un valore predefinito appropriato per lo stile.
  • <data-type> identifica il tipo di valore che verrà fornito dagli utenti. Questa impostazione influisce sul tipo di controllo che viene presentato nella scheda Stili. Devi utilizzare uno dei valori elencati nella tabella seguente.
  • <label> specifica il testo da mostrare nella scheda Stili per l'impostazione.
Valore Datatype Descrizione
color Imposta un colore utilizzando valori di hashtag come #000 o #1a32bf. Crea un controllo di selezione del colore nella scheda Stili.
font Imposta il nome di una famiglia di caratteri. Puoi inoltre configurare stack di caratteri utilizzando un elenco di nomi di caratteri separati da virgola nell'ordine di preferenza. Crea un semplice campo di input nella scheda Stili.
number Imposta un valore numerico senza unità (utilizza testo per consentire a unità come px o em di essere specificate insieme al valore). Crea un campo di input con i pulsanti su/giù che possono essere utilizzati anche per aumentare/ridurre il valore corrente nella scheda Stili.
picture Imposta l'origine di un'immagine (come un URL). Crea un semplice campo di input nella scheda Stili.
text Imposta un valore che può includere testo e numeri. Utilizza questo tipo di dati anche per i valori numerici che potrebbero includere un'unità, ad esempio px o em. Crea un semplice campo di input nella scheda Stili.

Nota

L'etichetta mostrata nella scheda Stili può apparire tra parentesi quadre, ad esempio "[Il mio stile]". Le parentesi quadre indicano che il testo visualizzato non dispone di una traduzione. Se scegli un valore supportato da uno dei modelli predefiniti (ad esempio "Colore 1"), sarà disponibile una traduzione, pertanto le parentesi quadre non verranno visualizzate.

Nota

Un'impostazione di stile stabilita utilizzando un tag <meta>, come descritto qui, viene visualizzata nella scheda Stili solo quando a questa impostazione viene fatto riferimento in almeno uno stile effettivo o un tag HTML, come descritto nelle sezioni successive.

Aggiungere commenti CSS per implementare impostazioni di stile nell'intestazione

Le impostazioni effettuate nella scheda Stili possono essere applicate agli stili CSS stabiliti nella sezione <head> del tuo documento HTML racchiudendo un valore CSS con due commenti CSS contenenti il valore dell'attributo name per il tag META xrm/designer/setting corrispondente. La coppia di commenti CSS assume il formato seguente:

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

Dove:

  • <tag-name> è l'attributo del nome per il tag META xrm/designer/setting che stabilisce l'impostazione della scheda Stili pertinente.
  • <value> è un valore che verrà sostituito quando un utente modifica l'impostazione della scheda Stili pertinente.

Importante

Puoi utilizzare queste coppie di commenti CSS solo nelle classi e negli stili definiti all'interno dei tag <style> nella sezione <head>. Deve inoltre essere presente solo un set di tag <style>, con tutti gli stili CSS configurati.

Di seguito è riportato un esempio in cui puoi visualizzare un tag META xrm/designer/setting che crea un controllo di selezione del colore denominato "Colore 1" nella scheda Stili. Uno stile CSS applica quindi questa impostazione per stabilire il colore del testo per gli elementi <h1>.

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

Aggiungere attributi property-reference per implementare impostazioni di stile nel corpo

Le impostazioni specificate nella scheda Stili possono essere applicate come valori di attributo a qualsiasi tag HTML nella sezione <body> del documento aggiungendo un attributo del modulo seguente a ciascun tag pertinente:

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

Dove:

  • <attr> è il nome dell'attributo da creare.
  • <tag-name> è il valore dell'attributo name del tag META che ha stabilito l'impostazione.
  • Se all'interno di un singolo attributo property-reference sono presenti più attributi, questi devono essere separati l'uno dall'altro mediante punto e virgola.

Di seguito è riportato un esempio in cui puoi vedere tag META xrm/designer/setting che creano due impostazioni per il controllo di un'immagine hero (banner) nel documento, con controlli denominati "Immagine Hero" e "Altezza Immagine Hero" nella scheda Stili. La proprietà property-reference viene quindi utilizzata in un tag <img> per implementare tali impostazioni.

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

Pertanto, in questo esempio, il tag <img> si risolverebbe in modo analogo al seguente:

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