Freigeben über

Verwenden von benutzerdefinierten Attributen zum Aktivieren von Designerfeatures in E-Mails, Seiten und Formularen

Die Inhaltsdesigner stellen sowohl einen grafischen Editor als auch einen HTML-Code-Editor bereit. Der von ihnen generierte HTML-Code ist mit jedem HTML-Renderer kompatibel, unterstützt aber auch einige benutzerdefinierte Attribute, die die Entwurfselemente für drag-and-drop und allgemeine Formatvorlagen unterstützen, die vom grafischen Editor bereitgestellt werden. Die Standardnachrichtenvorlagen und Seitenvorlagen, die mit Dynamics 365 Customer Insights bereitgestellt werden– Journeys nutzen diese benutzerdefinierten Attribute, um ihnen das Anpassen auf bestimmte Weise zu erleichtern. Sie können diese benutzerdefinierten Attribute auch beim Entwerfen eigener Vorlagen verwenden.

Tipp

Microsoft bietet keine Unterstützung für benutzerdefinierte HTML in E-Mails.

Tag- und Attributzusammenfassung

Die folgende Tabelle enthält eine Kurzübersicht zu den in diesem Thema beschriebenen benutzerdefinierten Attributen und Metatags.

Benutzerdefiniertes Attribut Description
<meta type="xrm/designer/setting" name="type" value="marketing-designer-content-editor-document"> Wenn dieses Tag im <head> Dokument vorhanden ist, stellt die Registerkarte "Designer " Drag-and-Drop-Features bereit. Wenn dieses Tag nicht vorhanden ist, stellt die Registerkarte "Designer " den vereinfachten Vollseiten-Editor bereit. Weitere Informationen: Anzeigen der Toolbox und Aktivieren der Drag-and-Drop-Bearbeitung
<meta type="xrm/designer/setting" name="additional-fonts" datatype="font" value="<font-list>"> Wenn dieses Tag im <head> Dokument vorhanden ist, werden die in der <Schriftartliste> aufgeführten Schriftarten (durch Semikolons getrennt) dem Schriftartenmenü in der Formatierungssymbolleiste für Textelemente hinzugefügt. Weitere Informationen: Hinzufügen neuer Schriftarten zur Textelementsymbolleiste
<div data-container="true"> … </div> Markiert den Anfang und das Ende eines Containers, in dem Benutzer Designelemente ziehen und ablegen können. Weitere Informationen: Erstellen eines Containers, in dem Benutzer Designelemente hinzufügen können
<div data-editorblocktype="<element-type>"> … </div> Markiert den Anfang und das Ende eines Designelements. Der Wert des Attributs gibt an, welcher Elementtyp es ist (Text, Bild, Schaltfläche usw.). Einige Designelemente unterstützen hier zusätzliche Attribute. Weitere Informationen: Identifizieren von Designelementen und Sperren von Elementen in der Designeransicht
<meta type="xrm/designer/setting" name="<name>" value="<initial-value>" datatype="<data-type>" label="<label>"> Dieses Tag definiert eine dokumentweite Formatvorlageneinstellung, die Benutzer mithilfe der Registerkarte "Designerformatvorlagen>" bearbeiten können. Weitere Informationen: Hinzufügen von Einstellungen zur Registerkarte "Formatvorlagen"
/* @<tag-name> */ … /* @<tag-name> */ Verwenden Sie CSS-Kommentare wie diese, um einen CSS-Wert einzuschließen, der durch eine Formatvorlageneinstellung gesteuert wird, wobei <Tagname> der Wert des Namensattributes für das Metatag ist, das die Einstellung festgelegt hat. Weitere Informationen: Hinzufügen von CSS-Kommentaren zum Implementieren von Formateinstellungen im Kopf
property-reference= "<attr>:@< tag-name >;<attr>:@< tag-name >; …" Platzieren Sie dieses Attribut in einem BELIEBIGEN HTML-Tag, um ein Attribut mit einem Wert zu platzieren, der durch eine Formatvorlageneinstellung gesteuert wird, wobei <attr> der Name des zu erstellenden Attributs und <tagname> der Wert des name Attributs für das Metatag ist, das die Einstellung festgelegt hat. Weitere Informationen: Hinzufügen von Eigenschaftsverweisattributen zum Implementieren von Formateinstellungen im Textkörper

Die verbleibenden Abschnitte dieses Themas enthalten weitere Informationen zur Verwendung der einzelnen in der Tabelle zusammengefassten Features.

Anzeigen der Toolbox und Aktivieren der Drag-and-Drop-Bearbeitung

Sie können HTML-Code, der in jedem Beliebigen Drittanbietertool entwickelt wurde, direkt in die HTML-Registerkarte des Designers einfügen, um mit dem Erstellen eines Designs sehr schnell zu beginnen. Wenn Sie dies tun, wird die Registerkarte "Designer " jedoch als ein einzelner Rich-Text-Editor angezeigt, der eine Textformatierungssymbolleiste bereitstellt und alle Bilder, Links und Formatvorlagen anzeigt, die in Ihrem HTML-Code enthalten sind, aber nicht andernfalls die Registerkarten "Toolbox", "Eigenschaften" oder " Formatvorlagen " oder eine beliebige Drag-and-Drop-Funktion bereitstellt (diese vereinfachte Designeransicht wird manchmal als Vollseiten-Editor bezeichnet). Sie können jedoch die Drag-and-Drop-Funktionalität für jedes eingefügte Design aktivieren, indem Sie dem Abschnitt Ihres Dokuments das <head> folgende Metatag hinzufügen:

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

Die folgende Abbildung zeigt dasselbe Design im Ganzseitenbearbeitungsmodus (links) und im Drag-and-Drop-Modus (rechts). Der einzige Unterschied besteht darin, dass das Design auf der rechten Seite das Metatag enthält, sodass "Drag-and-Drop" aktiviert ist und der Seitenbereich angezeigt wird.

Ganzseitiger Editor im Vergleich zum Drag-and-Drop-Editor.

Hinweis

Wenn Sie den Vollseiten-Editor verwenden, können Sie Text weiterhin mithilfe der Textformatierungssymbolleiste (angezeigt) auswählen, bearbeiten und formatieren und auch auf Bilder, Links und andere Elemente doppelklicken, um ihre Eigenschaften mithilfe eines Popupdialogfelds festzulegen. Die Symbolleiste enthält auch die Schaltfläche " Assist-Bearbeitung " Die Schaltfläche zum Hinzufügen dynamischer Inhalte, z. B. Feldwerte, die aus dem Kontaktdatensatz jedes Empfängers gezeichnet werden.

Erstellen eines Containers, in dem Benutzer Designelemente hinzufügen können

Auf der Registerkarte "Designer " können Benutzer nur Inhalte bearbeiten, die in einem Designelement enthalten sind, und können nur neue Entwurfselemente in die Teile des Dokuments ziehen, die als Datencontainer eingerichtet sind. Daher können Sie Vorlagen erstellen, in denen einige Bereiche (außerhalb von Containern) auf der Registerkarte "Entwurf " für die Bearbeitung gesperrt sind, während andere (in nicht gesperrten Containern) Bearbeitungen und gezogene Inhalte akzeptieren.

Verwenden Sie <div> Tags, die das Attribut data-container="true" enthalten, um Datencontainer zu erstellen, z. B.:

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

Alle Text- oder HTML-Tags, die in einem Div-Tag-Paar eines Datencontainers geschachtelt sind und nicht Teil eines Entwurfselements sind, erstellen einen nicht draggierbaren, nicht bearbeitbaren Bereich zwischen zwei ziehbaren Bereichen. Beispiel:

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

Hinweis

Wenn der Vollseiten-Editor aktiviert ist, sind alle Drag-and-Drop-Features deaktiviert, und Sie können alle Inhalte auf der Registerkarte "Designer " bearbeiten, einschließlich Inhalte außerhalb von data-container div-Tags (die im Vollseiten-Editor keine Auswirkung haben).

Sperren eines Containers in der Designeransicht

Sie können einen Container sperren, um den gesamten Inhalt auf der Registerkarte "Designer " schreibgeschützt zu machen. Wenn ein gesperrter Container Designelemente enthält, bleiben alle Inhalte und Einstellungen für diese Elemente gesperrt, und die Registerkarte "Eigenschaften " wird niemals angezeigt, auch wenn Sie sie auswählen.

Sie können das Feature zum Sperren von Containern verwenden, um einen Container zu sperren, nachdem Sie fertig sind, Entwurfskomponenten dafür hinzuzufügen und zu konfigurieren.

Um einen Container zu sperren, fügen Sie das data-locked="hard" Attribut wie folgt zum Containertag hinzu:

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

Hinweis

Sie können Inhalte auch auf der Entwurfselementebene sperren. Wenn Inhalte auf Containerebene gesperrt sind, wird durch diese Einstellung der Status "gesperrt/entsperrt" aller Designelemente innerhalb dieses Containers überruckt. Weitere Informationen: Sperren von Elementen in der Designeransicht

Um die Containersperre weiter zu erzwingen, können Sie den Zugriff auf die HTML-Registerkarte einschränken, wodurch ausgewählte Benutzer am Zugriff auf den Code gehindert werden (wo sie diese Einstellung andernfalls verhindern könnten). Weitere Informationen: Steuern des Zugriffs auf Designerfeatures

Identifizieren von Designelementen

Jedes Mal, wenn Sie ein Designelement mithilfe der Registerkarte "Designer " hinzufügen, fügt der Editor ein Paar <div> Tags ein, um den Anfang und das Ende des Elements zu markieren, und erstellt, welche HTML erforderlich ist, um das Element gemäß den zugehörigen Einstellungen auf der Registerkarte "Eigenschaften " anzuzeigen.

Designelemente werden mit <div> Tags markiert, die ein Attribut des Formulars data-editorblocktype="<element-type>"enthalten, wobei der Wert dieses Attributs den Typ des Elements identifiziert, das es ist. Mit dem folgenden <div> Tag wird beispielsweise ein Textelement erstellt:

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

In der folgenden Tabelle sind die verfügbaren Werte für das data-editorblocktype Attribut aufgeführt.

Designelementname Elementtyp data-editorblocktype Attributwert
Text-Element Allgemeines Designelement Text
Image-Element Allgemeines Designelement Bild
Divider-Element Allgemeines Designelement Teiler
Button-Element Allgemeines Designelement Schaltfläche
Inhaltsblockelement Allgemeines Designelement Content
(Dieser Typ des Designelements enthält auch ein data-block-datatype="<block-type>" Attribut, das den Typ des Inhaltsblocks angibt, in dem <der Blocktyp> einen Wert von entweder text oder image.)
Marketingseitenelement Email Marketingseite
Event-Element Email Event
Survey-Element Email Umfrage
Form-Element Form FormBlock
Feldelement Formularinhalt <Feldfeldname>, z. B.: Feld-E-Mail
Subscription-list-Element Formularinhalt SubscriptionListBlock
Forward-to-a-friend-Element Von Inhalt ForwardToFriendBlock
Do-not- email-Element und Remember-me-Element Formularinhalt Feld-Kontrollkästchen
(Diese Elemente erstellen jeweils Kontrollkästchen und unterscheiden sich andernfalls nach ihren internen Einstellungen.)
Submit-Button-Element Formularinhalt SubmitButtonBlock
Reset-Button-Element Formularinhalt ResetButtonBlock
Captcha-Element Formularinhalt CaptchaBlock

Weitere Informationen zu den einzelnen Designelementen finden Sie in der Referenz zu Designelementen.

Von Bedeutung

Wenn Sie an der HTML-Registerkarte arbeiten, sollten Sie vermeiden, den Inhalt zwischen den <div> Tags Ihrer Designelemente zu bearbeiten, da die Ergebnisse ders unvorhersehbar sein können, und Ihre Bearbeitungen werden wahrscheinlich trotzdem vom Designer überschrieben. Verwenden Sie stattdessen die Registerkarte "Designer ", um den Inhalt und die Eigenschaften des Entwurfselements zu verwalten.

Sperren von Elementen in der Designeransicht

Sie können den Inhalt und die Eigenschaften eines beliebigen Designelements sperren, indem Sie dem öffnenden <div> Tag das folgende Attribut hinzufügen:

data-protected="true"

Beispiel:

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

Wenn ein Designelement als geschützt gekennzeichnet ist, können Benutzer, die auf der Registerkarte "Designer " für eine Seite oder E-Mail arbeiten, die Eigenschaften oder Inhalte des Elements nicht bearbeiten. Dieses Attribut ist immer für das Inhaltsblockelement enthalten, Sie können es jedoch jedem Designelementtyp hinzufügen, um es zu schützen. Jedes Designelement, das dieses Attribut enthält, wird auf der HTML-Registerkarte als schattiert angezeigt, um anzugeben, dass es geschützt ist, Sie können es aber auch dort bearbeiten, wenn Sie darauf bestehen. Legen Sie dieses Attribut auf "false" fest (oder entfernen Sie es einfach), um den Schutz von einem Designelement zu entfernen.

Hinweis

Sie können Inhalte auch auf containerebene sperren, wodurch der Sperr-/Entsperrungsstatus aller Designelemente in diesem Container überschreiben wird. Weitere Informationen: Sperren eines Containers in der Designeransicht

Um die Inhaltssperre weiter zu erzwingen, können Sie den Zugriff auf die HTML-Registerkarte einschränken, wodurch ausgewählte Benutzer nicht auf den Code zugreifen können (wo sie diese Einstellung andernfalls verhindern könnten). Weitere Informationen: Steuern des Zugriffs auf Designerfeatures

Importieren von extern erstellten HTML-Code in den Designer

Sie können jedes beliebige Tool verwenden, um das anfängliche HTML-Layout und den Inhalt für eine Marketing-E-Mail, Seite oder ein Formular zu erstellen. Wenn Ihr HTML-Code fertig ist, fügen Sie ihn einfach in den relevanten Designer ein, und fügen Sie dann alle Dynamics 365 Customer Insights - Journeys-Features hinzu, die Sie benötigen, wie in den folgenden Unterabschnitten beschrieben.

Importieren des HTML-Codes

Gehen Sie wie folgt vor, um HTML-Code, der extern erstellt wurde, in den Designer zu integrieren:

  1. Erstellen Sie eine neue Marketing-E-Mail, Seite oder ein neues Formular in Dynamics 365 Customer Insights – Journeys.
  2. Wechseln Sie zur Registerkarte "HTML-Entwurf>" des Designers.
  3. Löschen Sie alle Inhalte auf der HTML-Registerkarte, und fügen Sie den html-Code ein, den Sie extern erstellt haben.
  4. Wechseln Sie zur Registerkarte ">" des Designers, und prüfen Sie Ihr Design.
  5. Wenn Sie mit einer Marketing-E-Mail arbeiten, achten Sie darauf, die Bearbeitung zu unterstützen , um alle erforderlichen Inhalte und Links (einschließlich eines Abonnementcenterlinks und Ihrer physischen Absenderadresse) zu platzieren.

Tipp

Da Sie gerade in externes HTML eingefügt haben, enthält Ihr Design wahrscheinlich keinen Code, der für Dynamics 365 Customer Insights spezifisch ist – Journeys, sodass der Designer den Vollseiten-Editor anzeigt, der Features für grundlegende Textformatierung, Bildformatierung und (für E-Mails) bietet, die Bearbeitung beim Hinzufügen dynamischer Inhalte unterstützen. Weitere Informationen zum Arbeiten mit dem Vollseiten-Editor finden Sie unter Anzeigen der Toolbox und Aktivieren der Drag-and-Drop-Bearbeitung. Wenn der Vollseiten-Editor alle benötigten Funktionen bereitstellt, verwenden Sie ihn, um Ihr Design zu optimieren und dann wie gewohnt live damit zu arbeiten. Wenn Sie den Drag-and-Drop-Editor verwenden möchten, um Ihr Design zu optimieren, finden Sie im nächsten Abschnitt Informationen zur Aktivierung.

Aktivieren des Drag and Drop-Editors nach dem Import

Wenn Sie den voll funktionsfähigen Drag-and-Drop-Editor aktivieren und/oder erweiterte Designelemente hinzufügen möchten, während Sie in der Designeransicht arbeiten, können Sie dies ganz einfach tun, indem Sie den importierten HTML-Code wie folgt weiter bearbeiten:

  1. Wechseln Sie zurück zur Registerkarte "HTML-Entwurf>" des Designers.

  2. Aktivieren Sie den Drag-and-Drop-Editor, indem Sie dem < das erforderliche Metatag hinzufügen . head> Abschnitt Ihres Dokuments, wie unter " Toolbox anzeigen" beschrieben, und aktivieren Sie die Drag-and-Drop-Bearbeitung.

  3. Gehen Sie bei der Arbeit auf der Registerkarte "HTML-Entwurf>" wie folgt vor:

    • Fügen Sie in jedem Teil Ihres Designs, in dem Sie ein oder mehrere Designelemente ziehen möchten, Code hinzu, um einen Datencontainer zu erstellen, wie in "Erstellen eines Containers" beschrieben, in dem Benutzer Designelemente hinzufügen können.
    • Wenn Sie Entwurfselemente lieber direkt in Ihrem Code positionieren möchten, ohne drag-and-drop zu verwenden, können Sie den erforderlichen Code direkt in die Registerkarte "Design-HTML>" eingeben. Elemente, die Sie auf diese Weise hinzufügen, unterstützen nicht drag-and-drop, sie stellen jedoch Einstellungen im Eigenschaftenbereich des Entwurfs-Designers> bereit. Registerkarte. Sie können Text-, Bild-, Trennzeichen- und Schaltflächenelemente nur mithilfe dieser Technik platzieren (Erstellen von Containern und Verwenden von Drag-and-Drop für andere Arten von Designelementen). In der Tabelle nach diesem Verfahren finden Sie die HTML-Strukturen, die zum Erstellen der einzelnen Elemente erforderlich sind. Kopieren/einfügen Sie diesen Code nach Bedarf direkt aus der Tabelle.

  4. Sie können nun zur Registerkarte "Entwurfs-Designer>" wechseln und Designelemente in jeden der von Ihnen eingerichteten Container ziehen und dann den Eigenschaftenbereich verwenden, um jedes Designelement zu konfigurieren, das Sie direkt in Ihren Code gezogen oder eingefügt haben.

Designelementtyp Diesen Code einfügen Hinweise                                                     
Text <div data-editorblocktype="Text"><p> Enter your text here</p></div> Sie können HTML-Inhalte direkt hier <p> eingeben oder zum Designer wechseln, um ihn mit dem Rich-Text-Editor zu erledigen.
Bild <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> Die einfachste Möglichkeit zum Ändern der Bildquelle und/oder des Bildlinks besteht darin, zum Designer zu wechseln und den Eigenschaftenbereich zu verwenden. Sie können aber auch die folgenden Attribute direkt im HTML-Code bearbeiten:
  • Legen Sie die Bildverknüpfung und/oder den Titel fest, indem Sie die href- und/oder Titelattribute des <a> Elements bearbeiten.
  • Um den Link aus dem Bild zu entfernen, löschen Sie den Inhalt der href Elemente und title Attribute <a> (behalten Sie jedoch die Attribute und die Anführungszeichen bei, z href="". B. ).
  • Legen Sie die Bildquelle fest, indem Sie das src-Attribut des <img> Elements bearbeiten.
Bearbeiten Sie keinen anderen Code.
Teiler <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> Bearbeiten Sie keinen dieser Code direkt im HTML-Editor. Wechseln Sie stattdessen zum Designer , und verwenden Sie den Eigenschaftenbereich .
Schaltfläche <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" Bearbeiten Sie keinen dieser Code direkt im HTML-Editor. Wechseln Sie stattdessen zum Designer , und verwenden Sie den Eigenschaftenbereich .

Weitere Informationen dazu, wie Designelemente im Code angezeigt werden, finden Sie unter Identifizieren von Designelementen.

Hinzufügen neuer Schriftarten zur Textelementsymbolleiste

Textelemente stellen eine Popupformatierungssymbolleiste im Designer bereit, die ein Menü zum Anwenden einer Schriftart auf markierten Text enthält.

Die Schriftartauswahl für Textelemente.

Um dieser Schriftartauswahl neue Schriftarten hinzuzufügen, fügen Sie dem Dokument ein <meta> Tag hinzu, das <head> das folgende Formular verwendet:

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

Dabei handelt es sich bei der Schriftartliste< um eine durch Semikolons getrennte Liste von Schriftartnamen.>

Hinzufügen von Einstellungen zur Registerkarte "Formatvorlagen"

Ein praktisches Feature der vordefinierten Vorlagen besteht darin, dass sie globale Formatvorlageneinstellungen auf der Registerkarte " Formatvorlagen " bereitstellen, sodass Benutzer die Schriftartfamilie, die Farbpalette und andere globale Einstellungen, die für die Vorlage aktiviert sind, schnell anpassen können. Jede Vorlage enthält nur die Stileinstellungen, die für dieses bestimmte Design sinnvoll sind, und Sie können auch Entwurfsvorlagen entwerfen, die nur die richtigen Stileinstellungen für Sie und Ihre Benutzer bereitstellen.

Der Designer > Registerkarte

Um der Registerkarte " Formatvorlagen " eine Einstellung hinzuzufügen, müssen Sie die folgenden Schritte ausführen:

  • Fügen Sie dem <meta> Dokument ein <head> Tag hinzu, um die Einstellung zu erstellen.
  • Richten Sie Formatvorlagen und/oder HTML-Tags ein, die die vom Metatag erstellten Einstellungen anwenden.

In den folgenden Unterabschnitten wird erläutert, wie Sie die einzelnen Schritte ausführen.

Hinzufügen eines Metatags zum Erstellen der Einstellung

Das erforderliche <meta> Tag hat die folgende Form:

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

Ort:

  • <name> identifies the meta tag, which you must also reference in the styles and HTML tags where the setting will be applied.
  • <Der Anfangswert> ist ein geeigneter Standardwert für die Formatvorlage.
  • <Der Datentyp> identifiziert den Typ des Werts, den Benutzer bereitstellen. Diese Einstellung wirkt sich auf den Steuerelementtyp aus, der auf der Registerkarte "Formatvorlagen " angezeigt wird. Sie müssen einen der in der folgenden Tabelle aufgeführten Werte verwenden.
  • <beschriftung> gibt den Text an, der auf der Registerkarte " Formatvorlagen " für die Einstellung angezeigt werden soll.
Datentypwert Description
color Legt eine Farbe mit Hashtagwerten wie #000 oder #1a32bf fest. Erstellt auf der Registerkarte "Formatvorlagen " ein Farbauswahl-Steuerelement.
Schriftart Legt einen Schriftartfamiliennamen fest. Sie können Auch Schriftstapel einrichten, indem Sie eine durch Trennzeichen getrennte Liste von Schriftartnamen in der Gewünschten Reihenfolge verwenden. Erstellt ein einfaches Eingabefeld auf der Registerkarte "Formatvorlagen ".
number Legt einen numerischen Wert ohne Einheit fest (verwenden Sie Text, um einheiten wie px oder em zusammen mit dem Wert anzugeben). Erstellt ein Eingabefeld mit Schaltflächen nach oben/unten, die auch verwendet werden können, um den aktuellen Wert auf der Registerkarte " Formatvorlagen " zu erhöhen/zu verringern.
Bild Legt eine Bildquelle (als URL) fest. Erstellt ein einfaches Eingabefeld auf der Registerkarte "Formatvorlagen ".
Text Legt einen Wert fest, der Sowohl Text als auch Zahlen enthalten kann. Verwenden Sie diesen Datentyp auch für numerische Werte, die eine Einheit (z. B. px oder em) enthalten können. Erstellt ein einfaches Eingabefeld auf der Registerkarte "Formatvorlagen ".

Hinweis

Die auf der Registerkarte " Formatvorlagen " angezeigte Beschriftung kann in eckigen Klammern angezeigt werden, z. B. "[Meine Formatvorlage]". Die eckigen Klammern geben an, dass der angezeigte Text keine Übersetzung verfügbar ist. Wenn Sie einen Wert auswählen, der von einer der vordefinierten Vorlagen (z. B. "Farbe 1") unterstützt wird, ist eine Übersetzung verfügbar, sodass die eckigen Klammern nicht angezeigt werden.

Hinweis

Eine Formatvorlageneinstellung, die mit einem <meta> Tag wie hier beschrieben erstellt wurde, wird nur auf der Registerkarte "Formatvorlagen " angezeigt, wenn diese Einstellung auch in mindestens einem tatsächlichen Format- oder HTML-Tag referenziert wird, wie in den nächsten Abschnitten beschrieben.

Hinzufügen von CSS-Kommentaren zum Implementieren von Formateinstellungen im Kopf

Auf der Registerkarte "Formatvorlagen " vorgenommene Einstellungen können auf CSS-Formatvorlagen angewendet werden, die <head> im HTML-Dokument erstellt wurden, indem sie einen CSS-Wert mit zwei CSS-Kommentaren umgibt, die den Wert des name Attributs für das entsprechende xrm/designer/setting Metatag enthalten. Das CSS-Kommentarpaar hat die folgende Form:

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

Ort:

  • <Tagname> ist das Namensattribute für das Metatag "xrm/designer/setting ", das die entsprechende Registerkarteneinstellung " Formatvorlagen " festlegt.
  • <wert> ist ein Wert, der ersetzt wird, wenn ein Benutzer die entsprechende Registerkarteneinstellung " Formatvorlagen " bearbeitet.

Von Bedeutung

Sie können diese CSS-Kommentare nur in Formatvorlagen und Klassen verwenden, die innerhalb <style> von <head> Tags im Abschnitt definiert sind. Darüber hinaus darf nur eine Gruppe von <style> Tags vorhanden sein, wobei dort alle CSS-Formatvorlagen eingerichtet sind.

Hier ist ein Beispiel, in dem Sie ein xrm/designer/setting Metatag sehen können, das ein Farbauswahl-Steuerelement namens "Farbe 1" auf der Registerkarte " Formatvorlagen " erstellt. Anschließend wendet eine CSS-Formatvorlage diese Einstellung an, um die Textfarbe für <h1> Elemente festzulegen.

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

Hinzufügen von Eigenschaftsverweisattributen zum Implementieren von Formateinstellungen im Textkörper

Auf der Registerkarte "Formatvorlagen " vorgenommene Einstellungen können als Attributwerte auf ein beliebiges HTML-Tag im <body> Dokument angewendet werden, indem sie jedem relevanten Tag ein Attribut des folgenden Formulars hinzufügen:

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

Ort:

  • <attr> ist der Name des zu erstellenden Attributs.
  • <Tagname> ist der Wert des name Attributs für das Metatag, das die Einstellung festgelegt hat.
  • Bei Bedarf müssen mehrere Attribute durch ein Semikolon innerhalb eines einzelnen Eigenschaftsverweis-Attributs getrennt werden.

Hier ist ein Beispiel, in dem Sie Metatags sehen xrm/designer/setting können, die zwei Einstellungen zum Steuern eines Herobilds (Banner) im Dokument mit Steuerelementen namens "Hero-Bild" und "Hero-Bildhöhe" auf der Registerkarte " Formatvorlagen " erstellen. Die property-reference Eigenschaft wird dann in einem <img> Tag verwendet, um diese Einstellungen zu implementieren.

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

In diesem Beispiel würde das <img> Tag also in etwa wie folgt aufgelöst:

<img src="picture.jpg" height="100px">
  • Last updated on