Differences

This shows you the differences between two versions of the page.

--- en:otml [2025/07/22 10:59] – bk
+++ en:otml [2025/07/22 11:03] (current) – old revision restored (2024/06/27 17:55) bk
@@ Line 1: / Line 1: @@
-====== How do I develop email templates for promio.connect? ======
+====== How to develop e-mail templates for promio.connect? ======
-Das folgende Dokument enthält technische Informationen zur Entwicklung von E-Mail-Vorlagen für promio.connect.
+The following document provides technical information for the development of e-mail templates for promio.connect.
-===== Allgemeine Informationen =====
+===== General information =====
-  * Sonderzeichen müssen XML-konforme Entitäten enthalten:
+  * Special characters must use XML conform entities:
     *  ''&quot;''
     * ''&amp;''
@@ Line 13: / Line 13: @@
     * ''&lt;''
     * ''&gt;''
-    * für alle anderen Entitäten müssen Sie die Dezimalsyntax verwenden; benutzen Sie z.B. ''&#160;'' instead of ''&nbsp;''
+    * for all other entities you have to use decimal syntax; e.g.: use ''&#160;'' instead of ''&nbsp;''
-  * UTF-8 4-byte Zeichen werden derzeit nicht unterstützt. Sie können die Bytelänge mit verschiedenen Tools überprüfen, z.B. [[http://www.ltg.ed.ac.uk/~richard/utf-8.cgi|UTF-8 Tool]].
+  * UTF-8 4-byte characters are not supported at the moment. You can check the byte length with several tools, e.g. [[http://www.ltg.ed.ac.uk/~richard/utf-8.cgi|UTF-8 Tool]]
-  * Die Zeilenlänge im Quellcode **darf 700 Zeichen nicht überschreiten**.
+  * The length of lines in the source code **must not exceed 700 characters**.
+If you use an IDE to develop the template, use the following namespaces for correct syntax highlighting:
-Wenn Sie eine IDE zur Entwicklung der Vorlage verwenden, verwenden Sie die folgenden Namespaces für die korrekte Syntaxhervorhebung:
 <code html>
@@ Line 27: / Line 29: @@
 </html>
 </code>
 ===== OTML =====
-OTML ist eine Erweiterung des HTML-Standards, die speziell für die Verwendung im E-Mail-Editor von promio.connect entwickelt wurde.
+OTML is an extension of the HTML standard, specifically created for usage in promio.connect's e-mail editor.
-Daher sind HTML- und CSS-Kenntnisse zwingend erforderlich.
+Because of this, an undestanding of HTML and CSS is mandatory.
-OTML ermöglicht es, bestimmte Teile einer E-Mail editierbar zu machen. Die Gesamtstruktur der E-Mail bleibt dabei unverändert.
+OTML serves the cause to make designated parts of an e-mail editable. The global structure of the e-mail will not be affected.
-Der E-Mail-Entwickler erstellt die E-Mail zunächst wie gewohnt. Anschließend können alle gewünschten Teile mithilfe von OTML editierbar gemacht werden.
+At first, the e-mail developer creates the e-mail as usual. After this is done, all intended parts can be made editable with the usage of OTML.
-Die OTML-Elemente sind in zwei Namensräume unterteilt: „pm“ und „pme“:
+The OTML elements are separated into two namespaces: ''pm'' and ''pme'':
-* „pm“-Elemente dienen der automatischen Generierung oder Integration von Inhalten, wie z. B. Inhaltsverzeichnissen oder Datenquellen.
+  * ''pm'' elements are used for automatic generation or integration of content, such as the table of contents or data sources.
-* „pme“-Elemente sind vom Benutzer editierbare Elemente, z. B. einzeilige und mehrzeilige Editoren.
+  * ''pme'' elements are user editable elements, e.g. singleline and multiline editors.
-==== Bearbeitbarer Titel ====
-Wenn Sie möchten, dass der Benutzer den Titel der E-Mail bearbeiten kann, fügen Sie Ihrem Tag ''<title>'' das Attribut ''editable="true"'' hinzu. Dies hat meist nur dann Auswirkungen, wenn die E-Mail in der eigenständigen Browserversion geöffnet wird.
-=== Beispiel ===
+==== Editable Title ====
+If you want the user to be able to edit the title of the mail, add the attribute ''editable="true"'' to your ''<title>'' tag. This has mostly only an effect if the E-Mail is opened in its stand-alone browser version.
+=== Example ===
 <code html>
@@ Line 64: / Line 71: @@
 ==== Repeater ====
-Ein Repeater wird durch das OTML-Tag „<pme:repeater />“ dargestellt.
+A repeater is represented by the OTML tag ''<pme:repeater />''.
-Ein Repeater-Element definiert einen Bereich mit sich wiederholenden Blöcken und muss ein oder mehrere <pme:layout />-Elemente enthalten. Jedes Layout kann dann vom Nutzer über eine Auswahlliste zur E-Mail hinzugefügt werden.
-Das Repeater-Element kann ein oder mehrere <pme:repeatercontent />-Elemente enthalten.
+A repeater element defines an area of repeating blocks and **must contain one or more  ''<pme:layout />'' elements**. Each layout can then be
+added to the e-mail by the user via a selection list.
-Eine genaue Anleitung zur Erstellung eines Creatives mit dem E-Mail-Builder finden Sie im Artikel //"[[de:e_mail_builder]]"//.
+The repeater element can hold one or more ''<pme:repeatercontent />'' elements.
-Individuelle Erläuterungen zu Ihren eigenen Templates können in einer mandantensprezifischen Wiki hinterlegt werden. Der Mandant benötigt hierzu eine Lizenz. Bei Interesse kontaktieren Sie bitte unseren Support.
-^ Attribut ^ Typ ^ Erforderlich ^ Beschreibung ^
+^ Attribute ^ Type   ^ Required ^ Description                                                                                ^
-| Titel | Zeichenfolge | Nein | Titel des Repeaters. Dies ist nützlich, wenn Sie mehr als einen Repeater in Ihrer Vorlage verwenden. |
+| title     | string | No       | Title of the repeater. This is useful, if you use more than one repeater in your template. |
-=== Beispiel ===
+=== Example ===
 <code html>
@@ Line 115: / Line 119: @@
 ==== Layout ====
-Ein Layout wird durch das OTML-Tag „<pme:layout />“ dargestellt.
+A layout is represented by the OTML tag ''<pme:layout />''.
-Ein Layout-Element enthält eine Vorlage, die der E-Mail hinzugefügt werden kann. Es ist ein Unterelement des Elements „<pme:repeater>“ und kann mehrfach hinzugefügt werden.
+A layout element contains a template, which can be added to the e-mail. It's a sub-element of the ''<pme:repeater>'' element and can be
+added multiple times.
-^ Attribut ^ Typ ^ Erforderlich ^ Beschreibung ^
+^ Attribute ^ Type   ^ Required ^ Description                ^
-| Name | Zeichenfolge | Ja | Eindeutiger Name für das Layout |
+| name	    | string | Yes      | Unique name for the layout |
-=== Beispiel ===
+=== Example ===
 <code html>
@@ Line 142: / Line 147: @@
-==== Repeater-Inhalte ====
+==== Repeatercontent ====
-Ein Repeater-Inhalt wird durch das OTML-Tag „<pme:repeatercontent />“ repräsentiert.
+A repeatercontent is represented by the OTML tag ''<pme:repeatercontent />''.
-Der Repeater-Inhalt bestimmt einen vordefinierten Teil eines „<pme:repeater />“-Elements und verhält sich genau wie ein „<pme:layout />“-Element.
+The repeatercontent determines a pre-defined part of a ''<pme:repeater />'' element and  acts exactly like a ''<pme:layout />'' element.
-Er ist ein Unterelement des „<pme:repeater>“-Elements und kann mehrfach hinzugefügt werden. Mit dem „<pme:repeatercontent />“-Element ist es möglich,
+It's a sub-element of the ''<pme:repeater>'' element and can be added multiple times. With the ''<pme:repeatercontent />'' element its possible,
-ein „<pme:repeater />“-Element vorab zu füllen.
+to pre-fill a ''<pme:repeater />''.
-=== Beispiel ===
+=== Example ===
 <code html>
@@ Line 178: / Line 184: @@
 ==== Preheader ====
-Ein Preheader wird durch das OTML-Tag „<pme:preheader />“ dargestellt.
+A preheader is represented by the OTML tag ''<pme:preheader />''.
-Ein Preheader ist der Vorschautext, der in den meisten E-Mail-Clients unter dem Absender angezeigt wird.
+A preheader is the preview text which is shown beneath the sender in most e-mail clients.
+During the build process of the e-mail, the content of the preheader element will be put directly after the ''<body>'' tag. All
-Während der E-Mail-Erstellung wird der Inhalt des Preheader-Elements direkt nach dem Tag „<body>“ eingefügt. Alle von promio.connect bereitgestellten Tracking-Pixel werden nach dem Preheader eingebettet. Dadurch ist für den Endnutzer kein HTML-Quellcode sichtbar.
+tracking pixels provided by promio.connect will be embedded after the preheader. This way, there is no HTML source code visible to the
+end-user.
 <code html>
@@ Line 192: / Line 199: @@
 ==== Singleline ====
-Ein einzeiliges Element wird durch das OTML-Tag „<pme:singleline />“ repräsentiert.
+A singleline element is represented by the OTML tag ''<pme:singleline />''.
-Das einzeilige Element bietet ein einfaches Texteingabefeld und wird meist für kurze Texte wie Überschriften verwendet.
+The singleline element offers a simple text input field and is mostly used for short texts like a headline.
-^ Attribut ^ Typ ^ Erforderlich ^ Beschreibung ^
-| data-pmclass | string | Nein | Der Wert wird als Klasse für das Link-Element festgelegt, wenn dem einzeiligen Element ein Link hinzugefügt wird. |
-| label | string | Nein | Der Titel des Elements, der in der Bearbeitungsansicht angezeigt wird. |
-| linkable | boolean | Nein | Wenn „linkable“ „false“ ist, kann kein Link um das einzeilige Element herum hinzugefügt oder geändert werden. |
-| pmtoctitle | string | Nein | Titel für den Eintrag im Inhaltsverzeichnis.<br>Legen Sie einen Wert fest, um einen Titel vorab zuzuweisen, oder lassen Sie das Feld leer, um bei Bedarf einen Inhaltsverzeichnistitel festlegen zu können. |
-| max-length | integer | Nein | Maximale Zeichenlänge. Der Benutzer kann dieses Limit nicht überschreiten.                                                        |
+^ Attribute    ^ Type    ^ Required ^ Description                                                                                                                                 ^
+| data-pmclass | string  | No       | The value will be set as class on the link element, if a link is added to the singleline element.                                           |
+| label        | string  | No       | The title of the element, which is shown in the edit view.                                                                                  |
+| linkable     | boolean | No       | If linkable is false, its not possible to add or change a link around the singleline element.                                               |
+| pmtoctitle   | string  | No       | Title for entry inside the TOC.<br>Set a value to preallocate a title or leave it blank to make it possible, to set a TOC title if desired. |
+| max-length   | integer | No       | Maximum lenght of characters. The user will not be able to exceed this limit.                                                               |
-=== Beispiel ===
+=== Example ===
 <code html>
@@ Line 216: / Line 224: @@
-==== Multiline und Multiline-Config ====
+==== Multiline and Multiline-Config ====
+A multiline element is represented by the OTML tag ''<pme:multiline />''.
+The multiline element offers an advanced text and HTML editor based on CKEditor 4. It is mostly used for long texts or where HTML input is desired.
-Ein mehrzeiliges Element wird durch das OTML-Tag „<pme:multiline />“ dargestellt.
-Das mehrzeilige Element bietet einen erweiterten Text- und HTML-Editor basierend auf CKEditor 4. Es wird hauptsächlich für lange Texte oder HTML-Eingaben verwendet.
+^ Attribute ^ Type ^ Required ^ Description ^
+| label | string | No | The title of the element, which is shown in the edit view. |
+| linkable | boolean | No | Make it possible to add a link around the editor content. If you enable this, we recommend that you use a special multiline-config for these editors in which the link button is removed from the toolbar. |
+| pmtoctitle | string | No | Title for entry inside the TOC.<br>Set a value to pre-allocate a title or leave it blank to make it possible, to set a TOC title if desired. |
+| max-length | integer | No | Maximum lenght of characters. The user is able exceed this limit, but a warning will be shown. |
+| config | string | No | Name of the multiline-config, that should be used for this editor. |
-^ Attribut ^ Typ ^ Erforderlich ^ Beschreibung ^
-| label | string | Nein | Der Titel des Elements, der in der Bearbeitungsansicht angezeigt wird. |
-| linkable | boolean | Nein | Ermöglicht das Hinzufügen eines Links um den Editorinhalt. Wenn Sie diese Option aktivieren, empfehlen wir Ihnen, für diese Editoren eine spezielle mehrzeilige Konfiguration zu verwenden, in der der Link-Button aus der Symbolleiste entfernt wird. |
-| pmtoctitle | string | Nein | Titel für den Eintrag im Inhaltsverzeichnis.<br>Legen Sie einen Wert fest, um einen Titel vorab zuzuweisen, oder lassen Sie das Feld leer, um bei Bedarf einen Inhaltsverzeichnistitel festlegen zu können. |
-| max-length | integer | Nein | Maximale Zeichenlänge. Der Benutzer kann dieses Limit überschreiten, es wird jedoch eine Warnung angezeigt. |
-| config | string | Nein | Name der mehrzeiligen Konfiguration, die für diesen Editor verwendet werden soll. |
-=== Beispiel ===
+=== Example ===
 <code html>
@@ Line 237: / Line 247: @@
-Der mehrzeilige Editor kann mit einem mehrzeiligen Konfigurationselement konfiguriert werden, das durch den OTML-Tag „<pm:multiline-config>“ repräsentiert wird.
+The multiline editor can be configured with a multiline-config element, which is represented by the OTML tag ''<pm:multiline-config>''.
-^ Attribut ^ Typ ^ Erforderlich ^ Beschreibung ^
+^ Attribute ^ Type ^ Required ^ Description ^
-| Name | Zeichenfolge | Ja | Der Name des Konfigurationselements. |
+| name | string | Yes | The name of the config element. |
-| Standard | Boolescher Wert | Nein | Auf „true“ setzen, wenn diese Konfiguration für alle pme:multiline-Elemente verwendet werden soll, für die kein Konfigurationsname angegeben ist. |
+| default | boolean | No | Set to true, if this config should be used for all pme:multiline elements, where no config is specified by name. |
-Der Inhalt einer mehrzeiligen Konfiguration muss eine CKEditor-Konfiguration im JSON-Format sein.
+The content of a multiline-config must be a CKEditor configuration in JSON format.
-=== Beispiel ===
+=== Example ===
 <code html>
@@ Line 385: / Line 395: @@
 </code>
-==== Bilder ====
+==== Image ====
-Bilder haben keine spezielle OTML-Elementdarstellung. Stattdessen verwenden sie das Standard-HTML-Tag „<img />“ mit erweiterten Attributen.
+Images have no special OTML element representation. Instead they use the standard HTML ''<img />'' tag with extended attributes.
-^ Attribut ^ Typ ^ Erforderlich ^ Beschreibung ^
+^ Attribute     ^ Type    ^ Required ^ Description                                                                                                                                 ^
-| pmedit | Boolean | Nein | Wenn pmedit wahr ist, kann das Bild bearbeitet werden. |
+| pmedit        | boolean | No       | If pmedit is true, the image is editable.                                                                                                   |
-| pmscale | Zeichenfolge | Nein | Mögliche Werte: Zuschneiden / Höhe / Breite |
+| pmscale		| string  | No       | Possible values: crop / height / width                                                                                                      |
-| pmscaleheight | Ganzzahl | Nein | Verwenden Sie eine andere Höhe als die im Attribut „height“ definierte. Dies ist nützlich für die Darstellung auf HiDPI-/Retina-Displays. |
+| pmscaleheight | integer | No       | Use an alternate height instead of the one defined in the height attribute. This is useful for presentation on HiDPI / Retina displays.     |
-| pmscalewidth | Ganzzahl | Nein | Verwenden Sie eine andere Breite als die im Attribut „width“ definierte. Dies ist nützlich für die Darstellung auf HiDPI-/Retina-Displays. |
+| pmscalewidth  | integer | No       | Use an alternate width instead of the one defined in the width attribute. This is useful for presentation on HiDPI / Retina displays.       |
-| pmtoctitle | Zeichenfolge | Nein | Titel für den Eintrag im Inhaltsverzeichnis.<br>Legen Sie einen Wert fest, um einen Titel vorab zuzuweisen, oder lassen Sie das Feld leer, um bei Bedarf einen Inhaltsverzeichnistitel festlegen zu können. |
+| pmtoctitle    | string  | No       | Title for entry inside the TOC.<br>Set a value to preallocate a title or leave it blank to make it possible, to set a TOC title if desired. |
-=== Werte für pmscale ===
-^ Wert ^ Beschreibung ^
+=== Values for pmscale ===
-| Zuschneiden | Bild zentrieren und auf die definierten Abmessungen zuschneiden. **Höhe und Breite müssen definiert sein.**
-| Höhe | Bildgröße auf die definierte Höhe anpassen. Die Breite wird proportional zu den Abmessungen des Originalbilds berechnet. |
-| Breite | Bildgröße auf die definierte Breite anpassen. Die Höhe wird proportional zu den Abmessungen des Originalbilds berechnet. |
+^ Value  ^ Description                                                                                                           ^
+| crop   | Center the image and crop it to the defined dimensions. **Height and width must be defined.**
+| height | Resize the image to the defined height. The width is calculated proportional to the dimensions of the original image. |
+| width  | Resize the image to the defined width. The height is calculated proportional to the dimensions of the original image. |
-=== Beispiel ===
+=== Example ===
 <code html>
@@ Line 417: / Line 428: @@
-==== Termin ====
+==== Appointment ====
+To provide a link to an appointment, you can use the ''<pme:appointment>'' element.
+Based on the inserted data, an iCal calendar file will be generated.
-Um einen Link zu einem Termin bereitzustellen, können Sie das Element „<pme:appointment>“ verwenden.
-Basierend auf den eingegebenen Daten wird eine iCal-Kalenderdatei generiert.
-^ Attribut ^ Beschreibung ^
+^ Attribute      ^ Description                            ^
-| Text | In der E-Mail sichtbarer Text |
+| text           | Text that is visible in the e-mail     |
-| Zusammenfassung | Titel des Termins |
+| summary        | Title of the appointment               |
-| OrganizerName | Name des Terminorganisators |
+| organizerName  | Name of the appointments organizer     |
-| OrganizerEmail | E-Mail-Adresse des Terminorganisators |
+| organizerEmail | E-mail of the appointments organizer   |
-| DateTimeStart | Startdatum und -uhrzeit des Termins |
+| dateTimeStart  | Start date and time of the appointment |
-| DateTimeEnd | Enddatum und -uhrzeit des Termins |
+| dateTimeEnd    | End date and time of the appointment   |
-| Location | Ort des Termins |
+| location       | Location of the appointment            |
-| Description | Beschreibung des Termins |
+| description    | Description of the appointment         |
@@ Line 442: / Line 454: @@
-==== Inhaltsverzeichnis ====
+==== TOC ====
-Ein Inhaltsverzeichnis (TOC) wird durch das OTML-Tag „<pm:toc />“ dargestellt.
+A TOC (table of contents) is represented by the OTML tag ''<pm:toc />''.
-Das TOC-Element dient der automatischen Generierung eines Inhaltsverzeichnisses basierend auf den Werten und der Reihenfolge der verwendeten „pmtoctitle“-Attribute.
+The TOC element is used to automatically generate a table of contents based on the values and the order of used ''pmtoctitle'' attributes.
-Das TOC-Element benötigt genau ein „<pm:tocitem />“-Element, das den Wert des verarbeiteten „pmtoctitle“-Attributs repräsentiert. Der
+The TOC elements requires exactly one ''<pm:tocitem />'' element, which represents the the value of the processed ''pmtoctitle'' attribute. The
-gesamte Inhalt des TOC-Elements wird für jedes „pmtoctitle“-Attribut mit einem Wert wiederholt eingefügt.
+complete content of the TOC element is repeatedly inserted for each ''pmtoctitle'' attribute with a value.
-=== Beispiel ===
-== Vorlage ==
+=== Example ===
+== Template ==
 <code html>
@@ Line 483: / Line 496: @@
-==== Externe Datenquellen ====
+==== External data sources ====
-Externe Datenquellen ermöglichen die Einbindung von RSS-Feed-Inhalten in E-Mails.
+External data sources make it possible to embed content from RSS feeds into an e-mail.
-Die Einrichtung externer Datenquellen erfolgt individuell durch die promio.net GmbH. Bei Interesse an der Nutzung kontaktieren Sie bitte unser Support-Team per Ticket.
+The setup of external data sources is individually realized by promio.net GmbH. If you are interested in the usage, please contact our support team via ticket.
 === Source ===
-Das Quellelement wird durch das OTML-Tag „<pm:source />“ repräsentiert.
-Es dient als Wrapper für die verschiedenen Quellelemente und kann ein oder mehrere „<pm:sourceitem />“-Elemente enthalten.
+The source element is represented by the OTML tag ''<pm:source />''.
-^ Attribut ^ Erforderlich ^ Typ ^ Beschreibung ^
+It serves as wrapper for the different source items and may contain one or more ''<pm:sourceitem />'' elements.
-| pmedit | Nein | Boolean | Wenn „true“, dürfen Benutzer Datenquellen ändern. |
-=== Quellelement ===
+^ Attribute ^ Required ^ Type    ^ Description                                       ^
+| pmedit    | No       | boolean | If true, users are allowed to change datasources. |
-Ein Quellelement wird durch das OTML-Tag „<pm:sourceitem />“ repräsentiert.
-Es dient als Verbindung zwischen der E-Mail und der eingerichteten Datenquelle.
-^ Attribut ^ Erforderlich ^ Typ ^ Beschreibung ^
+=== Source item ===
-| Name | Ja | Zeichenfolge | Eindeutiger Name der Datenquelle. |
-| Aktualisierungsmodus | Ja | Zeichenfolge | Mögliche Werte: Erstellung / Zustellung |
-== Werte für Aktualisierungsmodus ==
+A source item is represented by the OTML tag ''<pm:sourceitem />''.
-^ Wert ^ Beschreibung ^
+It serves as the connection between the e-mail and the setup data source.
-| Erstellung | Datenquelle beim Erstellen der E-Mail aktualisieren. |
-| Zustellung | Datenquelle vor dem Senden der Kampagne aktualisieren. |
+^ Attribute   ^ Required ^ Type    ^ Description                      ^
+| name        | Yes      | string  | Unique name of the data source.  |
+| refreshmode | Yes      | string  | Possible values: build / delivery |
-=== Datenabschnitt ===
+== Values for refreshmode ==
-Ein Datenabschnitt wird durch das OTML-Tag „<pm:datasection />“ repräsentiert.
+^ Value   ^ Description                                      ^
+| build   | Refresh data source on build of the e-mail.    |
+| delivery | Refresh data source before sending the campaign. |
-Datenabschnitte dienen dazu, die Vorlage mithilfe von Datenelementen mit Inhalten aus der Datenquelle zu füllen. **Jeder Datenabschnitt muss mindestens ein „<pm:data />“-Element enthalten.**
-^ Attribut ^ Erforderlich ^ Typ ^ Beschreibung ^
+=== Data section ===
-| Quelle | Ja | Zeichenfolge | Name der Datenquelle. |
-| Elemente | Nein | JSON | Ein JSON-Objekt. Verwenden Sie einen Eintrag pro Datenelement im aktuellen Datenabschnitt, um festzulegen, wie das nächste Datenelement ausgewählt wird.<br>Wenn keine Option ausgewählt ist, wird standardmäßig „nächstes“ verwendet. | |
-Mit dem Attribut „Elemente“ können Sie die Inhaltsauswahl für jedes Datenelement festlegen.
+A data section is represented by the OTML tag ''<pm:datasection />''.
-^ Wert ^ Beschreibung ^
+Data sections are used to fill the template with content from the data source with the help of data items. **Each data section must contain
-| (Element-ID) | Wählt ein Datenelement anhand seiner eindeutigen ID aus. |
+at least one ''<pm:data />'' element.**
-| Nächstes | Wählt das nächste Datenelement in der Liste aus. Dies ist die am häufigsten verwendete Option. |
-| Rand | Wählt ein zufällig ausgewähltes Datenelement aus.                                         |
-== Beispiel ==
-Wenn Sie den Inhalt des ersten Datenelements auf die eindeutige ID „12345“ und den Inhalt des zweiten Datenelements auf zufällige Daten setzen möchten, verwenden Sie diese Zeichenfolge:
+^ Attribute ^ Required ^ Type   ^ Description                                                                                                                                                                     ^
+| source    | Yes      | string | The name of the datasource.                                                                                                                                                     |
+| items     | No       | json   | A json object. Use one entry per data item inside the current data section, to define, how the next data item will be chosen.<br>If no option is chosen, it defaults to "next". |             |
+With the ''items'' attribute, it is possible to define the selection of content for each data item.
+^ Value     ^ Description                                                          ^
+| (itemId)  | Choose a data item on the base of its unique id.                     |
+| next      | Choose the next data item in the list. This is the most used option. |
+| rand      | Choose a random data item.                                           |
+== Example ==
+If you want to set the content of the first data item to the unique id ''12345'' and random data for the second one, use this string:
 <code json>
@@ Line 546: / Line 566: @@
-=== Datenelement ===
+=== Data item ===
-Ein Datenelement wird durch das OTML-Tag „<pm:data />“ repräsentiert.
+A data item is represented by the OTML tag ''<pm:data />''.
-Datenelemente befinden sich in einem Datenabschnitt. Jedes repräsentiert einen Datensatz der Datenquelle.
+Data items are placed inside a data section. Each one represents one record from the data source.
-Innerhalb eines Datenelements kann der Platzhalter „[pm:item:field_name]“ verwendet werden, um auf ein Feld des Datensatzes der Datenquelle zuzugreifen. Mit der Funktion „cut“ lässt sich der Inhalt eines Platzhalters auf eine bestimmte Anzahl von Zeichen kürzen.
+Inside a data item, it's possible to use the placeholder ''[pm:item:field_name]'' to get access to a field of the data source record. With the
+''cut'' function, it is also possible, to shorten the content of a placeholder to a specified amount of characters.
-Beispiel: „[cut([pm:item:title], 20)]“ kürzt den Titel auf maximal 20 Zeichen.
+E.g.: ''[cut([pm:item:title], 20)]'' shortens the title to a maximum of 20 characters.
-Auf jedes Datenelement kann nur einmal zugegriffen werden. Wenn Sie dasselbe Element mehrmals aufrufen möchten, müssen Sie mehrere Datenquellen mit demselben Inhalt verwenden. Kontaktieren Sie in diesem Fall bitte unser Support-Team per Ticket.
+It's only possible to access each data item one time. If you want to access the same item multiple times, it is necessary to use multiple
+data sources with the same content. In this case, please contact our support team via ticket.
-=== Beispiel ===
+=== Example ===
-== Beispieldatenquelle „Top 10 Produkte“ ==
+== Sample data source "Top 10 Products" ==
-^ ID ^ Titel ^ Preis ^ Bild ^ Link                            ^
+^ id ^ title      ^ price    ^ image          ^ link                              ^
 |123 | Smartphone | 350.00 € | smartphone.jpg | www.sample.com/shop?productid=123 |
 |124 | Watch      | 150.00 € | watch.jpg      | www.sample.com/shop?productid=124 |
@@ Line 569: / Line 591: @@
-== Vorlagencode ==
+== Template code ==
 <code html>
@@ Line 637: / Line 660: @@
-== Gerenderter E-Mail-Code ==
+== Rendered e-mail code ==
 <code html>
@@ Line 690: / Line 713: @@
-=== Wenn-Bedingungen innerhalb von Datenelementen ===
-Es ist möglich, Wenn-Bedingungen innerhalb von Datenelementen zu verwenden.
+=== If-conditions within data items ===
+It is possible to use If-conditions within data items.
 <code html>
@@ Line 730: / Line 754: @@
-==== Externer Inhalt ====
-„pm:include-url-content“ ist ein ganz besonderer Tag. Verwenden Sie ihn, um den Quellcode einer Website in Ihre E-Mail einzubinden.
-Sie können diesen Tag auch im Betreff einer E-Mail verwenden.
-^ Attribut ^ Typ ^ Erforderlich ^ Beschreibung ^
+==== External content ====
-| URL | Zeichenfolge | Ja | Die URL des einzubindenden Inhalts. |
-| Titel | Boolesch | Nein | Wenn „true“, wird der Inhalt des Titel-Tags der URL zurückgegeben. |
+''pm:include-url-content'' is a very special tag. Use it to include the source code of a website into your e-mail.
+It is also possible to use this tag in the subject of an e-mail.
+^ Attribute ^ Type ^ Required ^ Description ^
+| url | string | Yes | The URL of the content you want to include. |
+| title | boolean | No | If true, the content of the URL's title tag is returned. |
-=== Beispiel ===
+=== Example ===
-Als Inhalt einer E-Mail:
+As content of an e-mail:
 <code html>
 <pm:include-url-content url="https://www.promio.net/my-template.html">
@@ Line 749: / Line 776: @@
 </code>
-Als Betreff:
+As subject:
 <code html>
 <pm:include-url-content url="https://www.promio.net/my-template.html" title="true">
@@ Line 758: / Line 785: @@
 ===== CSS =====
-==== Automatische Transformation von CSS zu Inline-CSS ====
+==== Automatic transformation from CSS to inline CSS ====
-CSS aus einem <style>-Block kann automatisch in Inline-CSS umgewandelt werden.
+CSS from a <style> block can automatically be transformed to Inline CSS.
-Weitere Informationen hierzu finden Sie in den Optionen **cssinline** und **cssinlinetype** in [[en:otml#config_tags]]
+For more details on the matter refer to the **cssinline** and **cssinlinetype** options in [[en:otml#config_tags]]
-==== Benutzerbearbeitbares CSS ====
+==== User editable CSS ====
-Um Benutzern die Möglichkeit zu geben, das CSS zu bearbeiten, gibt es einige Voraussetzungen:
+To give users the freedom to edit the CSS, there are some prerequisites:
-* Der Style-Tag muss die ID „pn-js-css-editor“ verwenden. Nur ein Style-Tag mit dieser ID ist zulässig.
+  * The style tag must use the id ''pn-js-css-editor''. Only one style tag with this id is allowed.
-* Jeder Selektor muss einen Kommentarblock mit den Deskriptoren „@nav“, „@navItem“ und „@info“ verwenden.
+  * Each selector must use a comment block with the descriptors ''@nav'', ''@navItem'' and ''@info''.
-* „@nav“ repräsentiert die Kategorie im CSS-Editor und gruppiert die verschiedenen „@navItem“-Elemente.
+    * ''@nav'' represents the category inside the CSS editor and groups the different ''@navItem'' elements.
-* „@navItem“ repräsentiert das Element innerhalb der Kategorie. Dieser Name muss für alle CSS-Selektoren innerhalb derselben Kategorie „@nav“ eindeutig sein.
+    * ''@navItem'' represents the element inside the category. This name must be unique for all CSS selectors within the same ''@nav'' category.
-* „@info“ dient als Beschreibung für das Element „@navItem“.
+    * ''@info'' serves as decription for the ''@navItem''element.
 <code html>
@@ Line 807: / Line 834: @@
-===== Dynamische Inhalte =====
+===== Dynamic content =====
-==== Platzhalter ====
+==== Placeholders ====
-Mithilfe von Platzhaltern können Sie auf die Felder Ihrer Benutzerdaten zugreifen oder dynamische Inhalte einbinden.
+With the help of placeholders, it's possible to access the fields of your user data or include dynamic content.
-Sie können auf jedes Benutzerdatenfeld zugreifen, indem Sie vor dem Feldnamen ein „$“-Zeichen setzen. Greifen Sie beispielsweise mit „$name“ auf das Feld „Name“ zu.
+You can access each user data field, if you place a ''$'' character in front of the field name. E.g.: access the field ''name'' with ''$name''.
-Eine Liste aller universell verfügbaren Platzhalter erhalten Sie über die Platzhalter-Schaltfläche in der Symbolleiste eines mehrzeiligen Editors.
+A list of all universal available placeholders is available with click on the placeholder button inside the toolbar of a multiline editor.
-Sollten Sie benutzerdefinierte Platzhalter benötigen, kontaktieren Sie bitte unser Support-Team per Ticket.
+If custom placeholders are requried, please contact our support team via ticket.
-=== Beipsiel ===
+=== Example ===
-„$salutation_en_formal“ wird bei männlichen Empfängern durch „Sehr geehrter Herr Mustermann“ bzw. bei weiblichen Empfängern durch „Sehr geehrte Frau Mustermann“ ersetzt.
+''$salutation_en_formal'' will be replaced with "Dear Mr Doe," if the recipient is male or "Dear Ms Doe," if the recipient is female.
-Wenn kein Geschlecht angegeben ist, wird die Anrede auf „Sehr geehrte Damen und Herren“ zurückgesetzt.
+If no gender is given, it will fall back to "Dear Sir or Madam,"
-==== Bedingungen ====
-Inhalte können auch mit Bedingungen personalisiert werden.
+==== Conditions ====
-=== Beispiel ===
+It is also possible to personalize content with conditions.
-== Personalisierte Anrede mit Fallback ==
+=== Example ===
+== Personalized salutation with fallback ==
 <code html>
@@ Line 851: / Line 880: @@
-==== Funktionen ====
+==== Functions ====
 === pn_substr ===
-Mit der Funktion „pn_substr“ lässt sich der Wert von Platzhaltern auf eine bestimmte Anzahl von Zeichen kürzen.
+With the function ''pn_substr'' is possible to shorten the value of placholders to a specified amount of characters.
-Beispiel: „pn_substr(name, 10)“ kürzt den Namen auf 10 Zeichen.
+E.g.: ''pn_substr(name, 10)'' shortens the name to 10 characters.
-==== Konfigurations-Tags ====
+==== Config Tags ====
-Konfigurations-Tags ermöglichen die Steuerung des Verhaltens des E-Mail-Editors.
+Config tags make it possible to control the behaviour of the e-mail editor.
-^ Attribut ^ Typ ^ Standard ^ Beschreibung ^
+^ Attribute     ^ Type                    ^ Default ^ Description                          ^
-| cssinline | Boolean | true | Inline-CSS aus dem \<style\>-Block. |
+| cssinline     | boolean                 | true    | Inline CSS from the \<style\> block. |
-| cssinlinetype | String | Standard | Legt den Typ des CSS-Inliners fest. |
+| cssinlinetype | string                  | default  | Set the type of the CSS inliner.     |
-| storage | String (Frame / Shadow) | Frame | Mögliche Werte: Frame / Shadow |
+| storage       | string (frame / shadow) | frame   | Possible values: frame / shadow      |
-| ignoreerror | Boolean | false | Fehler beim Speichern ignorieren. |
+| ignoreerror   | boolean                 | false   | Ignore errors on save.               |
-=== Beispiel ===
+=== Example ===
 <code html>
@@ Line 883: / Line 912: @@
-=== Werte für cssinlinetype ===
+=== Values for cssinlinetype ===
+^ Value  ^ Description                 ^
+| default | Use the legacy CSS inliner. |
+| ng     | Use the new, improved CSS inliner.    |
-^ Wert ^ Beschreibung ^
-| Standard | Verwendet den alten CSS-Inliner. |
-| ng | Verwendet den neuen, verbesserten CSS-Inliner. |
-Der **Standard**-CSS-Inliner kann CSS nur für einzelne, nicht durch Kommas getrennte Selektoren transformieren.
+The **default** CSS Inliner can only transform CSS for single, non-comma-separated selectors.
-Der **ng**-CSS-Inliner („nächste Generation“) unterliegt diesen Einschränkungen nicht und kann CSS-Blöcke mit durch Kommas getrennten Selektoren inline einfügen.
+The **ng** ("next generation") CSS Inliner does not underlie those restrictions and can inline CSS blocks with comma-separated selectors.
-== Beispiele für den Standard-CSS-Inliner ==
+== Examples for the default CSS Inliner ==
 <code html>
@@ Line 957: / Line 987: @@
 </code>
-=== Werte für die Speicherung ===
+=== Values for storage ===
-^ Wert ^ Beschreibung ^
+^ Value ^ Description ^
-|frame | Speichert den Inhalt des Vorschau-Iframes.
+|frame  | Save the contents from the preview iframe. This will save changes made via the browsers development tools but is also susceptible to foreign code e.g. made by browser plugins, which could destroy the presentability of the e-mail. |
- Dadurch werden Änderungen der Browser-Entwicklungstools gespeichert, es besteht jedoch auch die Gefahr von Fremdcode, z. B. von Browser-Plugins, der die Darstellung der E-Mail beeinträchtigen kann. |
+|shadow | Save the contents from a shadow copy of the e-mail. This assures that the e-mails source code could not be changed by browser plugins. |
-|shadow | Speichert den Inhalt einer Schattenkopie der E-Mail. Dadurch wird sichergestellt, dass der Quellcode der E-Mail nicht durch Browser-Plugins verändert werden kann. |
-{{tag> OTML Templates Vorlage }}
+{{tag> OTML Templates }}

User Tools

Site Tools

Differences

Page Tools