Share via

Bruge brugerdefinerede attributter til at aktivere designerfunktioner i mails, sider og formularer

  • Artikel

Indholdsdesignerne indeholder både en grafisk editor og en editor til HTML-kode. Den HTML-kode, der oprettes, er kompatibel med alle HTML-gengivere, men de understøtter også et par brugerdefinerede attributter, der understøtter træk og slip-designelementer, og generelle typografiindstillinger, der er angivet af den grafiske editor. Standardskabelonerne for meddelelser og sider, der leveres sammen med Dynamics 365 Customer Insights - Journeys, gør brug af disse brugerdefinerede attributter for at gøre det nemmere for dig at tilpasse dem på en bestemt måde. Du kan også gøre brug af disse brugerdefinerede attributter, når du designer dine egne skabeloner.

Tip

Microsoft yder ikke support til brugerdefineret HTML i mails.

Oversigt over koder og attributter

Nedenstående tabel indeholder en oversigt over de brugerdefinerede attributter og metakoder, der er beskrevet i dette emne.

Brugerdefineret attribut Beskrivelse
<meta type="xrm/designer/setting" name="type" value="marketing-designer-content-editor-document"> Når denne kode findes i dokumentets <head>, indeholder fanen Designer træk og slip-funktioner. Hvis denne kode ikke findes, indeholder fanen Designer den forenklede helsideseditor. Flere oplysninger: Vise værktøjskassen og aktivere træk og slip-redigering
<meta type="xrm/designer/setting" name="additional-fonts" datatype="font" value="<font-list>"> Når dette mærke findes i afsnittet <head> af dokumentet, tilføjes skrifttyperne, der er angivet i <skrifttypelisten> (semikolonsepareret), til skrifttypemenuen i formateringsværktøjslinjen til tekstelementer. Flere oplysninger: Føje nye skrifttyper til værktøjslinjen for tekstelementer
<div data-container="true"> … </div> Markerer starten og slutningen på en objektbeholder, hvortil brugerne kan trække og slippe designelementer. Flere oplysninger: Oprette en objektbeholder, hvortil brugerne kan tilføje designelementer
<div data-editorblocktype="<element-type>"> … </div> Markerer starten og slutningen på et designelement. Værdien for attributten identificerer, hvilken type element der er tale om (tekst, billede, knap osv.). Visse designelementer understøtter ekstra attributter her. Flere oplysninger: Identificere designelementer og Låse elementer i designervisning
<meta type="xrm/designer/setting" name="<name>" value="<initial-value>" datatype="<data-type>" label="<label>"> Denne kode definerer en typografiindstilling for hele dokumentet, som brugerne kan redigere ved hjælp af fanen Designer>Typografier. Flere oplysninger: Tilføje indstillinger til fanen Typografier
/* @<tag-name> */ … /* @<tag-name> */ Brug CSS kommentarer som disse til at omslutte en CSS-værdi, der skal styres af en typografiindstilling, hvor <tag-name> er værdien af attributten name for den metakode, der oprettede indstillingen. Flere oplysninger: Tilføje CSS-kommentarer for at implementere typografiindstillinger i overskriften
property-reference= "<attr>:@< tag-name >;<attr>:@< tag-name >; …" Placer denne attribut i en hvilken som helst HTML-kode for at placere en attribut med en værdi, der styres af en typografiindstilling, hvor <attr> er navnet på attributten, der skal oprettes, og <tag-name> er værdien af attributten name for den metakode, der oprettede indstillingen. Flere oplysninger: Tilføje attributter med referenceegenskaber for at implementere typografiindstillinger i brødteksten

De resterende afsnit i dette emne indeholder flere oplysninger om, hvordan du kan bruge hver af de funktioner, der er sammenfattet i tabellen.

Vise værktøjskassen og aktivere træk og slip-redigering

Du kan indsætte HTML, der er udviklet i et tredjepartsværktøj, direkte under fanen HTML i designeren for at begynde at oprette et design meget hurtigt. Men når du gør det, vises fanen Designer som en enkelt RTF-editor, der indeholder en værktøjslinje til tekstformatering og viser alle billeder, links og typografier, der findes i din HTML-kode, men ellers ikke indeholder fanerne Værktøjskasse, Egenskaber eller Typografier, eller nogen træk og slip-funktionalitet (denne forenklede Designervisning kaldes også helsideseditoren). Men du kan aktivere træk og slip-funktionalitet for et eventuelt indsat design ved at tilføje følgende metakode til afsnittet <head> i dokumentet:

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

Følgende billede viser det samme design i tilstanden Helsidesredigering (venstre) og tilstanden Træk og slip (højre). Den eneste forskel er, at designet til højre indeholder metakoden, så træk og slip er aktiveret, og sidepanelet vises.

Helsideseditor versus træk og slip-editor.

Bemærk

Når du bruger helsideseditoren, kan du stadig vælge, redigere og formatere tekst ved hjælp af værktøjslinjen Tekstformatering (vist), og du kan også dobbeltklikke på billeder, links og andre elementer for at angive deres egenskaber ved hjælp af en pop op-dialogboks. Værktøjslinjen indeholder også knappen Assisteret redigeringBrugertilpasningsknappen. til tilføjelse af dynamisk indhold, f.eks. feltværdier, der er trukket fra den enkelte modtagers kontaktpersonpost.

Oprette en objektbeholder, hvortil brugerne kan tilføje designelementer

Under fanen Designer kan brugerne kun redigere indhold, der er indeholdt i et designelement, og de kan kun trække nye designelementer til de dele af dokumentet, der er angivet som dataobjektbeholdere. Du kan derfor ikke oprette skabeloner, hvor visse områder (uden for dataobjektbeholdere) er låst til redigering under fanen Design, mens andre områder (inde i ulåste dataobjektbeholdere) accepterer redigeringer og indhold, der trækkes.

Brug <div>-koder, der indeholder attributten data-container="true", til at oprette dataobjektbeholdere, f.eks.:

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

Alle tekst- eller HTML-koder, der er indlejret i et data-container div-kodepar og ikke er en del af et designelement, opretter et ikke-flytbart, ikke-redigerbart område mellem to flytbare områder. Eksempel: 

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

Bemærk

Når helsideseditoren er aktiveret, deaktiveres alle træk og slip-funktioner, og du kan redigere alt indholdet under fanen Designer, herunder indhold uden for data-container div-koder (som ikke har nogen effekt i helsideseditoren).

Låse en objektbeholder i designervisning

Du kan låse en objektbeholder for at gøre alt indholdet skrivebeskyttet under fanen Designer. Hvis en låst objektbeholder indeholder designelementer, vil alt indhold og alle indstillinger for de pågældende elementer forblive låste, og fanen Egenskaber vises aldrig for dem, selvom du vælger dem.

Du kan bruge funktionen til låsning af objektbeholder for at låse en objektbeholder, når du er færdig med at tilføje og konfigurere designkomponenter til den.

Hvis du vil låse en objektbeholder, skal du føje attributten data-locked="hard" til objektbeholderens kode på denne måde:

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

Bemærk

Du kan også låse indhold på niveau for designelementer. Hvis indhold er låst på niveauet for objektbeholder, tilsidesætter denne indstilling den låste/ulåste status for alle designelementer i den pågældende objektbeholder. Flere oplysninger: Låse elementer i Designervisning

Hvis du vil gennemtvinge yderligere låsning af objektbeholder, kan du begrænse adgangen til fanen HTML, hvilket forhindrer udvalgte brugere i at få adgang til koden (hvor de ellers vil kunne tilsidesætte denne indstilling). Flere oplysninger: Styre adgangen til designerfunktioner

Identificere designelementer

Hver gang du tilføjer et designelement ved hjælp af fanen Designer, indsætter editoren et par <div>-koder for at markere start og slutning på elementet, og der oprettes den nødvendige HTML-kode for at få vist elementet, som angivet i dens indstillinger under fanen Egenskaber.

Designelementer er markeret med <div>-koder, der indeholder en attribut fra formularen data-editorblocktype="<element-type>", hvor værdien af denne attribut identificerer den type element, der er tale om. For eksempel opretter følgende <div>-kode et tekstelement:

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

I nedenstående tabel vises de tilgængelige værdier for attributten data-editorblocktype.

Designelementnavn Elementtype data-editorblocktype-attributværdi
Tekstelement Fælles designelement Text
Billedelement Fælles designelement Image
Skillelinjeelement Fælles designelement Skillelinje
Knapelement Fælles designelement Knap
Element til indholdsblok Fælles designelement Indhold
(Denne type designelement indeholder også en data-block-datatype="<block-type>"-attribut, der identificerer typen af indholdsblok, hvor <block-type> enten har værdien text eller image).
Marketingsideelement Mail Marketingside
Hændelseselement Mail Arrangement
Undersøgelseselement Mail Undersøgelse
Formularelement Formular FormBlock
Feltelement Formularindhold Field-<field-name>, for eksempel: Field-email
Abonnementslisteelement Formularindhold SubscriptionListBlock
Element for videresendelse til en ven Formularindhold ForwardToFriendBlock
Send ikke mail-element og Husk-mig-element Formularindhold Feltafkrydsningsfelt
(Disse elementer opretter hver især afkrydsningsfelter og er ellers differentieret af deres interne indstillinger).
Knappen Send-element Formularindhold SubmitButtonBlock
Knappen Nulstil-element Formularindhold ResetButtonBlock
Captcha-element Formularindhold CaptchaBlock

Du kan finde flere oplysninger om hver af disse designelementer i Reference til designelementer.

Vigtigt

Når du arbejder under fanen HTML, skal du undgå at redigere nogen del af indholdet mellem <div>-koderne i dine designelementer, fordi resultatet af at gøre dette kan være uforudsigeligt, og det er alligevel sandsynligt, at dine ændringer bliver overskrevet af designeren. Brug i stedet fanen Designer til at administrere indholdet af og egenskaberne for dine designelementer.

Låse elementer i designervisning

Du kan låse indholdet af og egenskaberne for et designelement ved at tilføje følgende attribut i den første <div>-kode:

data-protected="true"

Eksempel:

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

Når et designelement er markeret som beskyttet, kan brugere, der arbejder under fanen Designer for en side eller mail, ikke redigere elementets egenskaber eller indhold. Denne attribut er altid inkluderet for indholdsblokkens element, men du kan føje det til alle typer designelementer for at beskytte det. Ethvert designelement, som indeholder denne attribut, vises som nedtonet under fanen HTML for at angive, at det er beskyttet, men du kan stadig redigere det, hvis du vil. Angiv denne attribut til "false" (eller fjern den) for at fjerne beskyttelsen af designelementet.

Bemærk

Du kan også låse indhold på niveauet for objektbeholder for at tilsidesætte den låste/ulåste status for alle designelementer i den pågældende objektbeholder. Flere oplysninger: Låse en objektbeholder i designervisning

Hvis du vil gennemtvinge yderligere låsning af indhold, kan du begrænse adgangen til fanen HTML, hvilket forhindrer udvalgte brugere i at få adgang til koden (hvor de ellers vil kunne tilsidesætte denne indstilling). Flere oplysninger: Styre adgangen til designerfunktioner

Importere eksternt oprettet HTML til designeren

Du kan bruge alle de værktøjer, du vil, til at oprette det oprindelige HTML-layout og -indhold til en marketingmail, -side eller -formular. Når din HTML-kode er klar, skal du blot indsætte den i den relevante designer og derefter tilføje de Dynamics 365 Customer Insights - Journeys-funktioner, du har brug for, som beskrevet i følgende underafsnit.

Importér din HTML-kode

Hvis du vil bruge HTML, der er oprettet eksternt, i designeren, skal du starte med at gøre følgende:

  1. Opret en ny marketingmail, -side eller -formular i Dynamics 365 Customer Insights - Journeys.
  2. Gå til Design>HTML-fanen i designeren.
  3. Ryd alt indhold fra fanen HTML, og indsæt den HTML-kode, du har oprettet eksternt.
  4. Gå til fanen Design>Designer i designeren, og gennemgå designet.
  5. Hvis du arbejder med en marketingmail, skal du bruge assisteret redigering til at placere alt påkrævet indhold og links (herunder et link til et abonnementscenter og din fysiske afsenderadresse).

Tip

Da du netop har indsat ekstern HTML-kode, indeholder dit design sandsynligvis ikke nogen kode, der er specifik for Dynamics 365 Customer Insights - Journeys, så designeren viser helsideseditoren, som indeholder funktioner til grundlæggende tekstformatering, billedformatering og (for mails) assistere redigering til tilføjelse af dynamisk indhold. Du kan finde flere oplysninger om, hvordan du arbejder med helsideseditoren, i Vise værktøjskassen og aktivere træk og slip-redigering. Hvis helsideseditoren indeholder alle de funktioner, du har brug for, kan du bruge den til at finjustere dit design og derefter gå live med det som sædvanligt. Hvis du foretrækker at bruge træk og slip-editoren til at finjustere designet, skal du se næste afsnit for at få oplysninger om, hvordan du aktiverer den.

Aktivér træk og slip-editoren efter import

Hvis du vil aktivere den komplette træk og slip-editor og/eller tilføje avancerede designelementer, mens du arbejder i Designer-visningen, kan du nemt gøre det ved yderligere at redigere din importerede HTML-kode på følgende måde:

  1. Gå tilbage Design>HTML-fanen i designeren.

  2. Aktivér træk-og-slip-editoren ved at tilføje det nødvendige metatag til -sektionen i dit dokument som beskrevet i Vise værktøjskassen og aktivere træk-og-slip-redigering.

  3. Gør følgende efter behov, mens du arbejder på fanen Design>HTML:

    • I hver del af dit design, hvor du gerne vil kunne trække et eller flere designelementer, skal du tilføje kode for at oprette en dataobjektbeholder som beskrevet i Oprette en objektbeholder, hvor brugerne kan tilføje designelementer.
    • Hvis du foretrækker at placere designelementer direkte i din kode uden at bruge træk og slip, kan du indtaste den nødvendige kode direkte på Design>HTML-fanen. Elementer, som du tilføjer på denne måde, understøtter ikke træk og slip, men de angiver indstillinger i panelet Egenskaber under fanen Design>Designer. Du kan kun placere tekst-, billed-, skillelinje- og knapelementer ved hjælp af denne teknik (oprette containere og bruge træk og slip til andre typer designelementer). Se tabellen efter denne procedure for de HTML-strukturer, der kræves for at oprette hvert af disse elementer. Kopier/indsæt denne kode direkte fra tabellen efter behov.

  4. Du kan nu gå til fanen Design>Designer og trække designelementer til hver af de containere, du har konfigureret, og derefter bruge panelet Egenskaber til at konfigurere hvert enkelt designelement, du har trukket ind eller indsat direkte i din kode.

Designelementtype Indsæt denne kode Noter                                                     
Text <div data-editorblocktype="Text"><p> Enter your text here</p></div> Du kan indtaste HTML-indhold mellem <p>-koder direkte her eller gå til Designer for at bruge RTF-editoren til at gøre det.
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> Den letteste måde at ændre billedkilden og/eller billedlinket på er ved at gå til Designer og bruge panelet Egenskaber. Men du kan også redigere følgende attributter direkte i HTML:
  • Indstil billedets link og/eller titel ved at redigere href- og/eller titelattributterne for <a>-elementet.
  • Hvis du vil fjerne hyperlinket fra billedet, skal du rydde indholdet af href- og title-attributterne i <a>-elementet (men beholde attributterne og anførselstegnene, f.eks. href="").
  • Indstil billedkilden ved at redigere src-attributten for <img>-elementet.
Undlad at redigere nogen af de andre koder.
Divider <div data-editorblocktype="Divider"><div align="center" class="dividerWrapper"><table aria-role="presentation" style="padding: 0px; margin: 0px; width: 100%"><tbody><tr style="padding: 0px;"> <td style="margin:0px; padding-left: 0px; padding-right: 0px; padding-top: 5px; padding-bottom: 5px; vertical-align:top;"> <p style="margin: 0px; padding: 0px; border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: rgb(0, 0, 0); line-height: 0px; width: 100%;"><span>&nbsp;</span></p></td></tr></tbody></table></div></div> Undlad at redigere noget af denne kode direkte i HTML-editoren. I stedet skal du gå til Designer og bruge panelet Egenskaber.
Button <div data-editorblocktype="Button"><!--[if mso]><div align="center"><v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" Undlad at redigere noget af denne kode direkte i HTML-editoren. I stedet skal du gå til Designer og bruge panelet Egenskaber.

Du kan finde flere oplysninger om, hvordan designelementer vises i kode, i Identificere designelementer.

Føje nye skrifttyper til værktøjslinjen for tekstelementer

Tekstelementer har en pop op-formateringsværktøjslinje i designeren, som indeholder en menu, hvor du kan anvende en skrifttype på den markerede tekst.

Skrifttypevælgeren for tekstelementer.

Du kan tilføje nye skrifttyper til denne skrifttypevælger ved at tilføje en <meta>-kode, der bruger følgende formular til afsnittet <head> i dokumentet:

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

Hvor <font-list> er en semikolonsepareret liste over skrifttyper.

Tilføje indstillinger til fanen Typografier

En praktisk funktion i de indbyggede skabeloner er, at de giver adgang til globale typografiindstillinger under fanen Typografier, så brugerne hurtigt kan justere skrifttypefamilien, farvepaletten og andre globale indstillinger, der er aktiveret til skabelonen. De enkelte skabeloner indeholder kun de typografiindstillinger, der giver mening for det pågældende specifikke design, og på samme måde kan du designe skabeloner, der kun indeholder de rigtige typografiindstillinger for dig og dine brugere.

Designeren > fanen Typografier.

Hvis du vil føje en indstilling til fanen Typografier, skal du benytte følgende fremgangsmåde:

  • Tilføj en <meta>-kode til dokumentets <head> for at oprette indstillingen.
  • Konfigurer typografier og/eller HTML-mærker, der anvende de indstillinger, der er oprettet af metakoden.

I de følgende underafsnit forklares, hvordan du gør hver af disse ting.

Tilføj en metakode for at oprette indstillingen

Den påkrævede <meta>-kode har følgende format:

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

Hvor:

  • <name> identificerer metakoden, som du også skal referere til i de typografier og HTML-koder, hvor indstillingen anvendes.
  • <initial-value> er en relevant standardværdi for typografien.
  • <data-type> identificerer den type værdi, brugere skal angive. Denne indstilling har indvirkning på typen af kontrolelement, der præsenteres under fanen Typografier. Du skal bruge én af de værdier, der er angivet i følgende tabel.
  • <label> angiver den tekst, der skal vises under fanen Typografier for indstillingen.
Datatypeværdi Beskrivelse
color Angiver en farve ved hjælp af hash-kodeværdier som #000 eller #1a32bf. Opretter et farvevælgerkontrolelement under fanen Typografier.
font Angiver et navn til skrifttypefamilien. Du kan også oprette stakke af skrifttyper ved hjælp af en kommasepareret liste over skrifttyper i den foretrukne rækkefølge. Opretter et simpelt inputfelt under fanen Typografier.
number Angiver en numerisk værdi uden enhed (brug tekst til at tillade, at enheder som px eller em angives sammen med værdien). Der oprettes et inputfelt med op/ned-knapper, der også kan bruges til at forøge/formindske den aktuelle værdi under fanen Typografier.
picture Angiver en billedkilde (som en URL-adresse). Opretter et simpelt inputfelt under fanen Typografier.
text Angiver en værdi, der kan omfatte både tekst og tal. Brug også denne datatype til numeriske værdier, der kan omfatte en enhed (f.eks. px eller em). Opretter et simpelt inputfelt under fanen Typografier.

Bemærk

Det navn, der vises under fanen Typografier vises muligvis i kantede parenteser, f.eks. "[Min typografi]". De kantede parenteser indikerer, at den viste tekst ikke har nogen tilgængelig oversættelse. Hvis du vælger en værdi, der understøttes af en af de indbyggede skabeloner (f.eks. "Color 1"), kan det ske, at en oversættelse er tilgængelig, så de kantede parenteser ikke vises.

Bemærk

En typografiindstilling, der er oprettet ved hjælp af en <meta>-kode, som beskrevet her, vises kun under fanen Typografier, når der også refereres til denne indstilling i mindst én faktisk typografi eller HTML-kode, som beskrevet i næste afsnit.

Tilføje CSS-kommentarer for at implementere typografiindstillinger i overskriften

Indstillinger, der oprettes under fanen Typografier, kan anvendes på CSS-typografier, der er oprettet i HTML-dokumentets <head>, ved at omslutte en CSS-værdi med to CSS-kommentarer, som indeholder værdien af attributten name for den tilsvarende xrm/designer/setting-metakode. Parret med CSS-kommentar skal have følgende format:

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

Hvor:

  • <tag-name> er navneattributten for metakoden xrm/designer/setting, der opretter den relevante indstilling under fanen Typografier.
  • <value> er en værdi, der skal erstattes, når en bruger redigerer den indstilling under fanen Typografier.

Vigtigt

Du kan kun bruge disse par af CSS kommentarer i typografier og klasser, der er defineret i <style>-koder i sektionen <head>. Der må endvidere kun findes ét sæt <style>-koder, hvor alle CSS-typografier skal være konfigureret.

Her er et eksempel, hvor du kan se en xrm/designer/setting-metakode, der opretter et farvevælgerkontrolelement med navnet "Farve 1" under fanen Typografier. En CSS-typografi anvender derefter denne indstilling til at fastlægge tekstfarven for <h1>-elementer.

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

Tilføje attributter med referenceegenskaber for at implementere typografiindstillinger i brødteksten

Indstillinger oprettet under fanen Typografier kan anvendes som attributværdier til enhver HTML-kode i dokumentets <body> ved at tilføje en attribut med følgende format til hvert relevant mærke:

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

Hvor:

  • <attr> er navnet på attributten, der skal oprettes.
  • <tag-name> er værdien af attributten name for den metakode, der oprettede indstillingen.
  • Hvis der er behov for flere attributter, skal de adskilles med et semikolon inden for en enkelt egenskabsreferenceattribut.

Her er et eksempel, hvor du kan se xrm/designer/setting-metakoder, der opretter to indstillinger til styring af et overordnet billede (banner) i dokumentet med kontrolelementer, der kaldes "Overordnet billede" og "Højde på overordnet billede", under fanen Typografier. Egenskaben property-reference bruges derefter i en <img>-kode til at implementere disse indstillinger.

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

Så i dette eksempel fortolkes <img>-koden til noget som dette:

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