v7 v8

Formattazione

Ultimo aggiornamento: 2023-08-31

Argomenti:
Email Design
Visualizza ulteriori informazioni su questo argomento

Creato per:
User

Developer

Modelli JavaScript

Un modello JavaScript è un HTML o un documento di testo che include codice JavaScript. Viene costruito allo stesso modo del contenuto di un’e-mail in un’azione di consegna.

Identificazione di un modello JavaScript

Un modello JavaScript è identificato dal nome e dallo spazio dei nomi, proprio come gli schemi e i moduli. Si consiglia tuttavia di aggiungere .js al nome del modello.

Struttura di un modello JavaScript

Esempio di modello di formattazione JavaScript HTML basato sullo schema "cus:book":

<html>
  <body>
    <!-- Title of book -->
    <h1><%= content.@name %></h1>
    <ul>
      <% for each(var chapter in content.chapter) { %>
        <li><%= chapter.@name %></li>
      <% }%>
    </ul>
  </body>
</html>

Le varie direttive JavaScript vengono visualizzate nel seguente formato:

Unisci campi: visualizza il contenuto dei dati con il <%= <source> %> sintassi dove <source>è il campo di origine dei dati da visualizzare.
Blocchi di istruzioni: esegue una serie di istruzioni JavaScript incluse tra i tag <% e %>.

Il contenuto object rappresenta l'elemento principale del documento XML di input.

Nel nostro esempio, la riga seguente mostra il contenuto del nome del registro:

<h1><%= content.@name %></h1>

Il codice seguente esegue iterazioni sul <chapter> elemento di raccolta:

<% for each(var chapter in content.chapter) { %>
  <li><%= chapter.@name %></li>
<% }%>

Gli attributi e gli elementi del contenuto sono rappresentati come oggetti JavaScript e rispettano la struttura del documento di origine.

Esempio:

contenuto.@name: recupera il valore dell’attributo "name" dell’elemento principale
contenuto.@['name']: identico al contenuto.@name sintassi
content.chapter.length: restituisce il numero di elementi sul <chapter elemento di raccolta
content.chapter[0].@name: recupera il nome del primo <chapter> elemento
chapter.name(): restituisce il nome del <chapter> elemento
chapter.parent().name(): restituisce il nome dell’elemento padre di <chapter>

ATTENZIONE

Poiché il carattere “-” è riservato nel linguaggio JavaScript, il recupero del valore di qualsiasi attributo o elemento contenente tale carattere deve essere eseguito tramite ['<field>'] sintassi.

Ad esempio: content.@['offer-id'].

Tutta la potenza di un linguaggio di programmazione (variabili, cicli, test condizionali, funzioni, ecc.) ) è disponibile per creare il documento di output. Le API SOAP sono accessibili per arricchire il documento di output.

Esempi:

Prova condizionale:

<% if (content.@number == 1 || content.@language == 'en') { %>
<!-- Content to be displayed if test is true-->
<% } %>

Chiamata di funzione:

<!-- Displays a horizontal bar -->
;<% function DisplayHorizontalBar() { %>
  <hr/>
<% } %>

<!-- The same function in a block  -->
<%
function DisplayHorizontalBar2()
{
  document.write('<hr/>');
}
%>

<!-- Returns the value in uppercase -->
<%
function formatName(value)
{
  return value.toUpperCase();
}
%>

<!-- Call functions -->
<%= DisplayHorizontalBar1() %>
<%= DisplayHorizontalBar2() %>
<%= formatName(content.@name) %>

Dichiarazioni e chiamata di variabile:

<%  var counter = 0; %>

<%= counter += 10 %>

Recupero e visualizzazione di un nome di destinatario con metodi statici:

<% var recipient = nms.recipient.get(1246); %>
<%= recipient.lastName %>

Recupero e visualizzazione del nome di un destinatario con metodi non statici:

<% var query = xtk.queryDef.create(
  <queryDef schema="nms:recipient" operation="get">
    <select>
      <node expr="@lastName"/>
    </select>
    <where>
      <condition expr="@id=1246"/>
    </where>
  </queryDef>);

  var recipient = query.ExecuteQuery();
%>

<%= recipient.@lastName %>

Inclusione di un modello JavaScript

Puoi creare una libreria di funzioni o variabili da utilizzare in un secondo momento. A questo scopo, importa il modello JavaScript con eval funzione. Questo consente di arricchire i contesti con funzioni aggiuntive dichiarate in altri modelli JavaScript.

Esempio: importazione di common.jsp modello.

<% eval(xtk.javascript.get("cus:common.js").data);  %>

Modifica di un modello JavaScript

La zona di modifica consente di popolare il contenuto del modello JavaScript:

NOTA

Lo schema del modello dati associato deve essere compilato per l’inizializzazione degli oggetti JavaScript.

Per generare l'anteprima del documento di output in qualsiasi momento, selezionare un contenuto e un formato di output (HTML, Testo, XML), quindi fare clic su Generate :

NOTA

Non è necessario salvare le modifiche per visualizzare in anteprima il documento di output.

Esempio di come creare e utilizzare un modello JavaScript

Di seguito è riportata la configurazione necessaria per implementare la seguente gestione dei contenuti utilizzando un modello JavaScript:

Questo esempio prevede i seguenti passaggi:

Crea il seguente schema (in questo caso: neo:news):

<srcSchema _cs="Invitation (neo)"   entitySchema="xtk:srcSchema" img="xtk:schema.png" label="Invitation" mappingType="sql" name="news" namespace="neo" xtkschema="xtk:srcSchema">

  <enumeration basetype="string" default="en" name="language">
    <value label="Français" name="fr" value="fr"/>
    <value label="English" name="gb" value="gb"/>
  </enumeration>

  <enumeration basetype="string" name="css">
    <value label="Blue" name="bl" value="blue"/>
    <value label="Orange" name="or" value="orange"/>
  </enumeration>

  <element label="Intervenants" name="attendee">
    <key internal="true" name="id">
      <keyfield xpath="@id"/>
    </key>
    <attribute label="Name" name="name" type="string"/>
    <element label="Image" name="image" target="xtk:fileRes" type="link"/>
    <attribute label="Description" name="description" type="string"/>
    <attribute default="Gid()" label="Id" name="id" type="long"/>
  </element>

  <element label="Invitation" name="news" template="ncm:content" xmlChildren="true">

    <compute-string expr="@name"/>
    <attribute enum="language" label="Language" name="language" type="string"/>
    <attribute enum="css" label="Stylesheet" name="css" type="string"/>
    <attribute label="Title" name="title" type="string"/>
    <element label="Presentation" name="presentation" type="html"/>
    <attribute label="Date" name="date" type="date"/>
    <element label="Attendees list" name="attendeesList" ordered="true" ref="attendee" unbound="true"/>

  </element>
</srcSchema>

Creare il Content management digita modulo (neo:news)

<form _cs="News (neo)" entitySchema="xtk:form"  img="xtk:form.png" label="News"  name="news" namespace="neo" type="contentForm" xtkschema="xtk:form">

  <container type="iconbox">
    <container label="Invitation">
      <input xpath="@langue"/>
      <input xpath="@css"/>
      <input xpath="@title"/>
      <input xpath="@date"/>
      <input xpath="presentation"/>
    </container>

    <container label="Intervenants">
      <container toolbarCaption="Liste des intervenants" type="notebooklist" xpath="attendeesList" xpath-label="@nom">
        <container>
          <input xpath="@nom"/>
          <input img="nl:sryimage.png" newEntityFormChoice="true" xpath="image">
            <sysFilter>
              <condition expr="@isImage = true"/>
            </sysFilter>
          </input>
          <input xpath="@description"/>
        </container>
      </container>
    </container>
  </container>

</form>

Crea i modelli JavaScript con il contenuto del messaggio per i formati HTML e Text.

Nel nostro esempio, per HTML:

<html>
  <head>
    <title>Newsletter</title>
     <style type="text/css">
      .body {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#514c48; margin-left: auto; margin-right: auto;}
      .body table {width:748; border: solid 1px; cellpadding:0; cellspacing:0"}
     </style>
  </head>
  <body>
    <p><center><%= mirrorPage %></center></p>
    <center>
      <table>
       <tr>
        <td>
          <img src="[LOGO]"/>
        </td>
        <td>
          <h1><%= content.@title %></h1>
        </td>
       </tr>
       <tr>

       <td>
        <div >
          <h0><%= hello,</h0>
          <p><%= content.presentation %></p>

          <h0>Useful information</h0>
          <p>
            <img src="[IMAGE 1]"/>When? <br/><%= formatDate(content.@date, "%2D %Bl %4Y") %> From 10 AM in your bookshop.</p><br/>
          <p>
            <img src="[IMAGE 2]"/>Who? <br>Meet our favorite authors and illustrators and get a signed copy of their book.</p><br/>
          <p>
            <img src="[IMAGE 3]"/>Attendance is free but there is a limited number of seats: sign up now!</p>
      </div>
      </td>

        <td>
         <div style="text-align:left; width:210; height:400px; background:url([IMAGE DE FOND])">

            <h0><%= participant %></h0>
            <%
            var i
            var iLength = content.attendeesList.length()
            for (i=0; i<iLength; i++)
            { %>
            <p>
              <%= generateImgTag(content.attendeesList[i].@["image-id"]) %>  <%= content.attendeesList[i].@description %>
            </p>
            <% }
            %>
         </div2>
        </td>
    </tr>
  </table>
</center>
</body>
</html>

Per il testo:

<%= content.@title %>
<%= content.presentation %>

*** When? On <%= formatDate(content.@date, "%2D %Bl %4Y") %> From 10 AM in your bookshop.

*** Who? Come and meet our favorite authors and illustrators and get a signed copy of their books.

*** Attendance is free but there is a limited number of seats: sign up now!

Guests:
******************
<%
var i
var iLength = content.attendeesList.length()
//for (i=(iLength-1); i>-1; i--)
for( i=0 ; i<iLength ; i++ )
  { %>
  Description <%= i %> : <%= content.attendeesList[i].@description %>
  <% }
%>

Ora crea il modello di pubblicazione utilizzato per entrambi i formati:
- Per HTML:
- Per il testo:
Puoi quindi utilizzare questo modello di contenuto nelle consegne.

Per ulteriori informazioni, consulta Utilizzo di un modello di contenuto.

Fogli di stile XSL

Il linguaggio XSLT consente di trasformare un documento XML in un documento di output. A seconda del metodo di output del foglio di stile, il documento risultante può essere generato in HTML, in testo normale o in un'altra struttura XML.

Questa trasformazione viene a sua volta descritta in XML in un documento noto come foglio di stile.

Identificazione di un foglio di stile

Un foglio di stile è identificato dal nome e dallo spazio dei nomi, proprio come gli schemi e le maschere. Tuttavia, si consiglia di aggiungere .xsl estensione al nome del foglio di stile.

La chiave di identificazione di un foglio di stile è una stringa formata dallo spazio dei nomi e dal nome separato da due punti, ad esempio: cus:book.xsl.

Struttura di un foglio di stile

Esempio di un foglio di stile di formattazione HTML basato sullo schema di esempio "cus:book":

<?xml version="1.0" encoding="ISO-8859-1" ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:output encoding="ISO-8859-1" method="html"/>
  <!-- Point of entry of the stylesheet -->
  <xsl:template match="/book">
    <html>
      <body>
        <!-- Book title -->
        <h1><xsl:value-of select="@name"/></h1>
        <lu>
          <!-- List of chapters -->
          <xsl:for-each select="child::chapter">
            <li><xsl:value-of select="@name"/></li>
          </xsl:for-each>
       </lu>
      </body>
    </html>
   </xsl:template>
</xsl:stylesheet>

Un foglio di stile è un documento XML che rispetta le regole seguenti:

i valori degli attributi sono tra virgolette,
un elemento deve avere un marcatore di apertura e un marcatore di chiusura,
sostituire i caratteri '<' o '&' con il simbolo '<' o '&' entità,
ogni elemento XSL deve utilizzare xsl spazio dei nomi.

Un foglio di stile deve iniziare con l'indicatore dell'elemento principale XSL <xsl:stylesheet> e termina con </xsl:stylesheet> marcatore. Lo spazio dei nomi XSL deve essere definito nel marcatore di apertura come segue:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

Il <xsl:output> specifica il formato del documento generato. Specifica il set di caratteri desiderato e il formato di output.

<xsl:output encoding="ISO-8859-1" method="html"/>

Le istruzioni seguenti descrivono la configurazione del foglio di stile per la formattazione del documento di output.

<xsl:template match="/book">
  <html>
    <body>
      <!-- Book title -->
      <h1><xsl:value-of select="@name"/></h1>
      <lu>
        <!-- List of chapters -->
        <xsl:for-each select="child::chapter">
          <li><xsl:value-of select="@name"/></li>
        </xsl:for-each>
      </lu>
    </body>
  </html>
</xsl:template>

Per impostazione predefinita, il processore XSLT cerca modello applicabile al nodo principale o principale del documento XML di input. La costruzione del documento di output inizia con questo modello.

Nel nostro esempio, una pagina HTML viene generata dallo schema "cus:book" visualizzando il nome del libro e l’elenco dei capitoli.

NOTA

Per ulteriori informazioni sul linguaggio XSLT, consultare un documento di riferimento XSLT.

Visualizzazione di HTML/XML

Per visualizzare un html , utilizza il disable-output-escape="yes" opzione dalla <xsl:value-of> direttiva. Questo consente di evitare la sostituzione dei caratteri con la relativa entità XML (ad esempio < con <).

Il <xsl:text> direttiva con disable-output-escape="yes" Questa opzione consente di inserire tag JavaScript per campi di personalizzazione o test condizionali.

Esempi:

Visualizzazione del contenuto di un campo di tipo html:

<xsl:value-of select="summary" disable-output-escaping="yes"/>

Inserimento del campo di personalizzazione <%= recipient.email %>:

<xsl:text disable-output-escaping="yes"><%= recipient.email %></xsl:text>

Aggiunta del test condizionale <% se (recipient.language == 'it') { %>:

<xsl:text disable-output-escaping="yes"><% if (recipient.language == 'en') { %></xsl:text>

Inclusione dei fogli di stile

È possibile creare una libreria di modelli o variabili da condividere tra più fogli di stile. Il "longMonth" modello, presentato in precedenza, è un tipico esempio del vantaggio di individuare un modello in remoto in un foglio di stile in modo che possa essere riutilizzato in un secondo momento.

Il <xsl:include> direttiva indica il nome del foglio di stile da includere nel documento.

Esempio: incluso il foglio di stile "common.xsl".

<? xml version="1.0" encoding="ISO-8859-1" ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:include href="common.xsl"/>
  <xsl:output encoding="ISO-8859-1" method="jsp" indent="yes"/>
  ...
</xsl:stylesheet>

NOTA

Il nome dello spazio dei nomi non deve essere inserito nel riferimento del foglio di stile da includere. Come standard, questo foglio di stile viene creato con lo spazio dei nomi utente.

Modifica di un foglio di stile

La zona di modifica consente di popolare il contenuto del foglio di stile:

Per generare un'anteprima del documento di output in qualsiasi momento, selezionare un'istanza di contenuto e il formato (HTML, Testo, XML), quindi fare clic su Generate :

NOTA

Non è necessario salvare le modifiche nel foglio di stile per visualizzare l'anteprima del documento di output.

Gestione delle immagini

Immagine con riferimento

È possibile fare riferimento alle immagini immesse nel documento di output di HTML con riferimenti assoluti o relativi.

Il riferimento relativo consente di immettere l'URL del server contenente le immagini in NcmRessourcesDir e NcmRessourcesDirPreview opzioni. Queste opzioni contengono la posizione delle immagini da pubblicare e visualizzare in anteprima nella console client di Adobe Campaign.

Queste due opzioni sono accessibili tramite la schermata di gestione delle opzioni nella Administration > Platform > Options cartella.

Esempio:

NcmResourcesDir = "https://server/images/"
NcmResourcesDirPreview = "x:/images/"

Durante l'elaborazione del foglio di stile, _resPath L'attributo dell'elemento principale del documento XML di input viene automaticamente compilato con una o più opzioni a seconda del contesto (anteprima o pubblicazione).

Esempio di come utilizzare l’opzione di posizionamento immagine e il relativo utilizzo con un’immagine:

<img src="<%= content.@_resPath %>/newsletter/image.png"/>

NOTA

È consigliabile dichiarare una variabile contenente il riferimento del server in cui sono memorizzate le immagini ("resPath" nel nostro esempio).

Utilizzo di risorse pubbliche

Puoi anche utilizzare Public resources per dichiarare le immagini e caricarle sul server a seconda delle impostazioni di istanza immesse nella procedura guidata di distribuzione.

Puoi quindi richiamare queste immagini nel contenuto. a questo scopo, utilizza la seguente sintassi nello schema di gestione dei contenuti:

<element label="Image" name="image" target="xtk:fileRes" type="link"/>

Nel modulo, il campo per la selezione dell’immagine viene aggiunto con la seguente sintassi:

<input img="nl:sryimage.png" newEntityFormChoice="true" xpath="image">
    <sysFilter>
      <condition expr="@isImage = true"/>
    </sysFilter>
  </input>

NOTA

Per ulteriori informazioni su Public resources e come configurarli e utilizzarli, consulta questa sezione.

Visualizzazione data

Nel documento di input XML le date vengono memorizzate in formato XML interno: AAAA/MM/GG HH:MM:SS (esempio 2018/10/01 12:23:30).

Adobe Campaign fornisce funzioni di formattazione della data per i modelli JavaScript e i fogli di stile XSL descritti di seguito.

Formattazione data JavaScript

Per visualizzare una data nel formato desiderato, Adobe Campaign fornisce formatDate funzione che accetta come input il contenuto della data e una stringa che specifica il formato di output con la seguente sintassi: %4Y/%2M/%2D %2H%2N%2S

Esempi:

Visualizza la data in 31/10/2018 formato:

 <%= formatDate(content.@date, "%2D/%2M/%4Y") %>

Visualizza la data in Luglio 2018 formato:

<%
 function displayDate(date)
  {
    var aMonth =
    [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ];

    var month = formatDate(content.@date, "%2M")
    var year = formatDate(content.@date, "%4Y")

    return aMonth[month-1]+" "+year;
  }
%>

<%= displayDate(content.@date) %>

Formattazione data XSL

La sintassi XSLT non contiene funzioni standard di gestione delle date. Per visualizzare una data nel formato desiderato, Adobe Campaign fornisce la funzione esterna data-formato. Questa funzione considera come input il contenuto della data e una stringa che specifica il formato di output con la seguente sintassi: %4Y/%2M/%2D %2H%2N%2S

Esempi:

Per visualizzare la data in 01/10/2018 formato:

<xsl:value-of select="external:date-format(@date, '%2D/%2M/%4Y')"/>

Per visualizzare la data in Luglio 2018 formato:

<!-- Returns the month in the form of a string with the month number as input -->
<xsl:template name="longMonth">
  <xsl:param name="monthNumber"/>

  <xsl:choose>
    <xsl:when test="$monthNumber = 1">January</xsl:when>
    <xsl:when test="$monthNumber = 2">February</xsl:when>
    <xsl:when test="$monthNumber = 3">March</xsl:when>
    <xsl:when test="$monthNumber = 4">April</xsl:when>
    <xsl:when test="$monthNumber = 5">May</xsl:when>
    <xsl:when test="$monthNumber = 6">June</xsl:when>
    <xsl:when test="$monthNumber = 7">July</xsl:when>
    <xsl:when test="$monthNumber = 8">August</xsl:when>
    <xsl:when test="$monthNumber = 9">September</xsl:when>
    <xsl:when test="$monthNumber = 10">October</xsl:when>
    <xsl:when test="$monthNumber = 11">November</xsl:when>
    <xsl:when test="$monthNumber = 12">December</xsl:when>
  </xsl:choose>
</xsl:template>

<!-- Display date -->
<xsl:call-template name="longMonth">
  <xsl:with-param name="monthNumber">
    <xsl:value-of select="external:date-format(@date, '%2M')"/>
  </xsl:with-param>
</xsl:call-template>
 <xsl:value-of select="external:date-format(@date, '%4y')"/>

Pagina precedente

Formattazione

Modelli JavaScript

Identificazione di un modello JavaScript

Struttura di un modello JavaScript

Inclusione di un modello JavaScript

Modifica di un modello JavaScript

Esempio di come creare e utilizzare un modello JavaScript

Fogli di stile XSL

Identificazione di un foglio di stile

Struttura di un foglio di stile

Visualizzazione di HTML/XML

Inclusione dei fogli di stile

Modifica di un foglio di stile

Gestione delle immagini

Immagine con riferimento

Utilizzo di risorse pubbliche

Visualizzazione data

Formattazione data JavaScript

Formattazione data XSL

In questa pagina

Visualizza successivo:

Scopri

Documentazione

Community

Assistenza

Risorse

Account Adobe

Adobe