Поделиться через

Использование настраиваемых атрибутов для включения функций конструктора в сообщениях электронной почты, на страницах и в формах

  • Статья

Конструкторы содержимого предоставляют как графический редактор, так и редактор кода HTML. Формируемый ими HTML-код совместим с любым механизмом обработки HTML, но они также поддерживают несколько настраиваемых атрибутов, поддерживающих перетаскиваемые элементы дизайна и общие параметры стиля, предоставляемые графическим редактором. В поставляемых с Dynamics 365 Customer Insights - Journeys шаблонах сообщений по умолчанию и шаблонах страниц эти настраиваемые атрибуты используются для упрощения настройки шаблонов особыми способами. Можно также использовать эти настраиваемые атрибуты при разработке собственных шаблонов.

Совет

Корпорация Майкрософт не предоставляет поддержку для пользовательских HTML в сообщениях электронной почты.

Сводка тегов и атрибутов

В следующей таблице приведена краткая справочная информация по настраиваемым атрибутам и тегам meta, описываемым в этом разделе.

Настраиваемый атрибут Описание
<meta type="xrm/designer/setting" name="type" value="marketing-designer-content-editor-document"> Когда этот тег находится в разделе <head> вашего документа, на вкладке Конструктор будут работать функции перетаскивания. Если этот тег отсутствует, то вкладка Конструктор содержит упрощенный полностраничный редактор. Подробнее: Отображение панели инструментов и включение редактирования перетаскиванием
<meta type="xrm/designer/setting" name="additional-fonts" datatype="font" value="<font-list>"> Если этот тег присутствует в разделе <head> документа, то указанные в <font-list> (разделенные точкой с запятой) шрифты будут добавлены в меню шрифта на панели инструментов текстовых элементов. Подробнее: Добавление новых шрифтов на панель инструментов текстовых элементов
<div data-container="true"> … </div> Обозначает начало и конец контейнера, в который пользователи могут перетаскивать элементы дизайна. Подробнее: Создание контейнера, в который пользователи могут добавлять элементы дизайна
<div data-editorblocktype="<element-type>"> … </div> Обозначает начало и конец элемента дизайна. Значение атрибута указывает тип этого элемента (текст, изображение, кнопка и т. п.). Некоторые элементы дизайна поддерживают дополнительные атрибуты. Подробнее: Определение элементов дизайна и Блокирование элементов дизайна в представлении "Конструктор"
<meta type="xrm/designer/setting" name="<name>" value="<initial-value>" datatype="<data-type>" label="<label>"> Этот тег определяет параметр стилей для всего документа, который пользователи могут изменять с помощью вкладки Конструктор>Стили. Подробнее: Добавление параметров на вкладку "Стили"
/* @<tag-name> */ … /* @<tag-name> */ Используйте подобные комментарии CSS вокруг значения CSS, которое должно контролироваться параметром стиля, где <tag-name> — это значение атрибута name для тега meta, задающего этот параметр. Подробнее: Добавление комментариев CSS для реализации параметров стиля в разделе head
property-reference= "<attr>:@< tag-name >;<attr>:@< tag-name >; …" Размещайте этот атрибут в любом теге HTML для размещения атрибута со значением, управляемым параметром стиля, где <attr> — это имя создаваемого атрибута, а <tag-name> — значение атрибута name для тега meta, который задал данный параметр. Подробнее: Добавление атрибутов ссылки на свойство для реализации параметров стилей в разделе body

В остальных пунктах этого раздела содержатся дополнительные сведения о порядке использования каждой из функций, указанных в таблице.

Отображение панели инструментов и включение редактирования перетаскиванием

HTML-код, разработанный в любом средстве сторонних разработчиков, можно вставить непосредственно на вкладку HTML конструктора, чтобы очень быстро начать разработку дизайна. Однако если это сделать, вкладка Конструктор будет отображаться как один редактор RTF, который содержит панель инструментов форматирования текста и показывает все изображения, ссылки и стили, включенный в ваш HTML-код, но не содержит вкладок Панель инструментов, Свойства или Стили и не поддерживает функциональные возможности перетаскивания (это упрощенное представление Конструктор иногда называется полностраничным редактором). Однако функциональные возможности перетаскивания для любого вставленного дизайна можно включить, добавив следующий тег meta в раздел <head> вашего документа:

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

На следующем рисунке один и тот же дизайн показан в режиме полностраничного редактирования (слева) и в режиме перетаскивания (справа). Единственное отличие заключается в том, что дизайн справа содержит этот тег meta, поэтому включено перетаскивание и отображается боковая панель.

Полностраничный редактор и редактор с перетаскиванием.

Заметка

При использовании полностраничного редактора можно по-прежнему выбирать, редактировать и форматировать текст с помощью панели инструментов текстового форматирования (показана на рисунке), а также дважды щелкать мышью изображения, ссылки и другие элементы для задания их свойств с помощью всплывающих диалоговых окон. Панель инструментов также включает кнопку Вставка динамических блоков Кнопка «Персонализация». для добавления динамического содержимого, например значений полей, полученных из записи контакта каждого получателя.

Создание контейнера, в который пользователи могут добавлять элементы дизайна

На вкладке Конструктор пользователи могут изменять только содержимое, находящееся в элементе дизайна, и могут перетаскивать новые элементы дизайна содержимого только в те части документа, которые настроены как контейнеры данных. Поэтому можно создавать шаблоны, в которых некоторые области (вне контейнеров) будут недоступны для изменения на вкладке Конструктор, в то время как другие (включая незаблокированные контейнеры) допускают изменение и могут принимать перетаскиваемое на них содержимое.

Для создания контейнеров данных используйте теги <div>, содержащие атрибут data-container="true", например:

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

Любой текст или HTML-теги, находящиеся внутри пары тегов div data-container и не являющиеся частью элемента дизайна, создают не допускающую перетаскивания и редактирования область между двумя областями, допускающими перетаскивание. Например: 

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

Заметка

Когда включен полностраничный редактор, все функции перетаскивания отключены, и все содержимое можно редактировать на вкладке Конструктор, включая содержимое за пределами тегов div data-container (которые никак не действуют в полностраничном редакторе).

Блокировка контейнера в представлении "Конструктор"

Вы можете заблокировать контейнер, чтобы его содержимое было доступно только для чтения на вкладке Конструктор. Если заблокированный контейнер содержит элементы дизайна, то все содержимое и параметры этих элементов будут заблокированы, а вкладка Свойства для них не будет отображаться, даже если контейнер выбран.

С помощью этой функции можно заблокировать контейнер после завершения его разработки и настройки.

Чтобы заблокировать контейнер, добавьте к тегу контейнера атрибут data-locked="hard", как показано ниже:

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

Заметка

Вы также можете заблокировать содержимое на уровне элементов дизайна. Если содержимое заблокировано на уровне контейнера, то эти параметры переопределяют состояние блокировки всех остальных элементов дизайна внутри контейнера. Подробнее: Блокировка в представлении "Конструктор"

Для дополнительной защиты контейнера можно ограничить доступ к вкладке HTML, чтобы определенные пользователи не могли работать с кодом (и изменить параметры блокировки). Подробнее: Управление доступом к функциям конструктора

Определение элементов дизайна

При каждом добавлении элемента дизайна с помощью вкладки Конструктор редактор вставляет пару тегов <div>, чтобы отметить начало и конец элемента, и создает весь HTML-код, необходимый для отображения элемента в соответствии с его параметрами, указанными на вкладке Свойства.

Элементы дизайна отмечаются тегами <div>, содержащими атрибут вида data-editorblocktype="<element-type>", где значение этого атрибута указывает тип соответствующего элемента. Например, следующий тег <div> создает текстовый элемент:

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

В следующей таблице перечислены доступные значения для атрибута data-editorblocktype.

Имя элемента дизайна Тип элемента Значение атрибута data-editorblocktype
Текстовый элемент Общий элемент дизайна Text
Элемент изображения Общий элемент дизайна Image
Элемент-разделитель Общий элемент дизайна Divider
Элемент кнопки Общий элемент дизайна Button
Элемент блока содержимого Общий элемент дизайна Content
(Элемент дизайна этого типа также содержат атрибут data-block-datatype="<block-type>", который определяет тип блока, а параметр <block-type> имеет значение text или image.)
Элемент маркетинговой страницы Сообщение электронной почты Marketing Page
Элемент события Сообщение электронной почты Event
Элемент опроса Сообщение электронной почты Survey
Элемент формы Форма FormBlock
Элемент поля Содержимое формы Field-<field-name>, например: Field-email
Элемент списка подписок Содержимое формы SubscriptionListBlock
Элемент пересылки другу Содержимое формы ForwardToFriendBlock
Элемент "Не отправлять по электронной почте" и "Запомнить меня" Содержимое формы Field-checkbox
(Каждый из этих элементов создает флажки, а различаются они своими внутренними параметрами.)
Элемент кнопки отправки Содержимое формы SubmitButtonBlock
Элемент кнопки сброса Содержимое формы ResetButtonBlock
Элемент Captcha Содержимое формы CaptchaBlock

Дополнительные сведения о каждом из этих элементов дизайна см. в разделе Справочник по элементам дизайна.

Внимание

При работе на вкладке HTML следует избегать изменения какого-либо содержимого между тегами <div> ваших элементов дизайна, так как результат такого изменения может быть непредсказуемым, и весьма вероятно, что ваши изменения будут перезаписаны конструктором. Вместо этого для работы с содержимым и свойствами элемента дизайна используйте вкладку Конструктор.

Блокировка элементов в представлении "Конструктор"

Вы можете заблокировать содержимое и свойства любого элемента дизайна, добавив в его открывающий тег <div> следующий атрибут:

data-protected="true"

Например:

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

Если элемент дизайна помечен как защищенный, пользователи, работающие над страницей или сообщением электронной почты на вкладке Конструктор, не смогут изменять его свойства и содержимое. Этот атрибут всегда включается в элемент блока содержимого, но его можно добавить в элемент дизайна любого типа, чтобы защитить его. Любой элемент дизайна, содержащий этот атрибут, отображается на вкладке HTML в затененном виде, чтобы было видно, что он защищен, но при необходимости вы можете редактировать такие элементы. Чтобы снять защиту с элемента дизайна, установите для этого атрибута значение "false" или просто удалите этот элемент.

Заметка

Вы также можете заблокировать содержимое на уровне контейнера, что переопределит состояние блокировки всех остальных элементов дизайна внутри контейнера. Подробнее: Блокировка контейнера в представлении "Конструктор"

Для дополнительной защиты содержимого можно ограничить доступ к вкладке HTML, чтобы определенные пользователи не могли работать с кодом (и изменить параметры блокировки). Подробнее: Управление доступом к функциям конструктора

Импорт созданного извне кода HTML в конструктор

Вы можете использовать любой инструмент для создания изначального HTML-кода макета и контента для маркетинговой электронной почты, страницы или формы. Когда ваш HTML-код будет готов, просто вставьте его в соответствующий конструктор, а затем добавьте все нужные функции Dynamics 365 Customer Insights - Journeys, как описано в следующих подразделах.

Импорт HTML-кода

Чтобы добавить в конструктор собственный HTML-код, сначала сделайте следующее:

  1. Создайте новое маркетинговое сообщение электронной почты, страницу или форму в Dynamics 365 Customer Insights - Journeys.
  2. Выберите вкладку конструктора Дизайн>HTML.
  3. Удалите все содержимое с кладки HTML и вставьте собственный HTML-код.
  4. Откройте вкладку Дизайн>Конструктор и проверьте ваш дизайн.
  5. Если вы работаете с маркетинговым сообщением электронной почты, не забудьте использовать вставку динамических блоков, чтобы вставить все необходимое содержимое и ссылки (включая ссылку на центр подписок и ваш физический адрес отправителя).

Совет

Поскольку вы только что вставили внешний HTML-код, ваш дизайн, вероятно, не содержит код, который связан с Dynamics 365 Customer Insights - Journeys, поэтому на вкладке Конструктор отображается полностраничный редактор с функциями для базового форматирования текста, изображений и добавления динамических блоков (для писем). Для получения дополнительной информации о том, как работать в полностраничном редакторе, см. раздел Отображение панели инструментов и включение редактирования перетаскиванием. Если полностраничный редактор содержит все необходимые функции, использует его чтобы доработать свой дизайн и ввести объект в действие. Если вы предпочитаете использовать редактор с перетаскиванием, см. следующий раздел для получения информации о том, как включить его.

Включение редактора с перетаскиванием после импорта

Если вы хотите включить полнофункциональный редактор с перетаскиванием или добавить более сложные элементы во время работы в Конструкторе, вы можете легко сделать следующим образом:

  1. Вернитесь на вкладку конструктора Дизайн>HTML.

  2. Включите редактор с перетаскиванием, добавив необходимый метатег в раздел вашего документа, как описано в разделе Отображение панели инструментов и включение редактирования с помощью перетаскивания.

  3. Во время работы на вкладке Дизайн>HTML вы можете сделать следующее:

    • В каждой части вашего дизайна, куда вы хотите перетащить один или несколько элементов дизайна, добавьте код для создания контейнера данных, как описано в разделе Создание контейнера, в который пользователи могут добавлять элементы дизайна.
    • Если вы предпочитаете добавить элементы дизайна непосредственно в код без использования перетаскивания, вы можете ввести необходимый код непосредственно на вкладке Дизайн>HTML. элементы, которые вы добавляете таким образом, не будут поддерживать перетаскивание, но для них на панели Свойства вкладки Дизайн>Дизайнер будут доступны настройки. С помощью этой методики можно размещать только элементы текста, изображения, разделители и кнопки (для других типов элементов дизайна создавайте контейнеры и используйте перетаскивание). В таблице ниже приведены HTML-структуры для создания каждого из этих элементов; вы можете скопировать код прямо из таблицы.

  4. Теперь вы можете прейти на вкладку Дизайн>Конструктор и перетащить элементы дизайна в каждый из подготовленных контейнеров, а затем использовать панель Свойства для настройки каждого элемента дизайна, который вы перетащили или вставили прямо в код.

Тип элемента дизайна Вставьте этот код Примечания                                                     
Text <div data-editorblocktype="Text"><p> Enter your text here</p></div> Вы можете ввести содержимое HTML между тегам <p> непосредственно здесь или перейти в Конструктор, чтобы воспользоваться полнофункциональный текстовый редактор.
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> Самый простой способ изменить источник изображения и/или ссылку изображения — перейти в Конструктор и использовать панель Свойства. Но вы также можете редактировать следующие атрибуты непосредственно в HTML-коде.
  • Задайте ссылку изображения и/или заголовок, редактируя атрибуты href и title элемента <a>.
  • Чтобы удалить ссылку с изображения, удалите содержимое атрибутов href и title элемента <a> (но сохраняйте атрибуты и кавычки, например href="").
  • Задайте источник изображения, отредактировав атрибут src элемента <img>.
Не редактируйте никакой другой код.
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> Не редактируйте этот код непосредственно в редакторе HTML. Вместо этого откройте Конструктор и используйте панель Свойства.
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" Не редактируйте этот код непосредственно в редакторе HTML. Вместо этого откройте Конструктор и используйте панель Свойства.

Дополнительные сведения о том, как каждый из элементов дизайна отображается в коде, см. в разделе Определение элементов дизайна.

Добавление новых шрифтов на панель инструментов текстовых элементов

У текстовых элементов в конструкторе имеется всплывающая панель инструментов форматирования, содержащая меню для настройки шрифта выбранного текста.

Селектор шрифта для текстовых элементов.

Чтобы добавить шрифты в это меню, добавьте в раздел <head> документа тег <meta> следующей формы.

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

Здесь <font-list> — список разделенных точкой с запятой названий шрифтов.

Добавление параметров на вкладку "Стили"

Одна из удобных функций готовых шаблонов заключается в том, что они содержат глобальные параметры стиля на вкладке Стили, позволяющие пользователям быстро настраивать семейство шрифтов, цветовую палитру и другие глобальные параметры, предусмотренные для шаблона. Каждый шаблон содержит только те параметры стиля, которые имеют смысл для этого конкретного дизайна; вы также можете разрабатывать шаблоны, предоставляющие только требуемые параметры стиля для вас и ваших пользователей.

Вкладка

Чтобы добавить параметр на вкладку Стили, необходимо выполнить следующие действия:

  • Добавьте тег <meta> в раздел <head> вашего документа, чтобы создать параметр.
  • Настройте стили и/или HTML-теги, которые применяют параметры, созданные с помощью тега meta.

В следующих подразделах рассматривается каждое из этих действий.

Добавление тега meta для создания параметра

Требуемый тег <meta> имеет следующий вид:

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

Где:

  • <Имя> идентифицирует тег meta, который также необходимо указывать в стилях и HTML-тегах, в которых будет применяться этот параметр.
  • <initial-value> представляет собой соответствующее значение по умолчанию для данного стиля.
  • <data-type> определяет тип значения, которое должны предоставить пользователи. Этот параметр влияет на тип элемента управления, который отображается на вкладке Стили. Необходимо использовать одно из значений, указанных в следующей таблице.
  • <label> задает текст, который будет отображаться на вкладке Стили для этого параметра.
Значение Datatype Описание
color Задает цвет с помощью значений хэш-тега, например #000 или #1a32bf. Создает элемент управления палитры на вкладке Стили.
font Задает имя семейства шрифтов. Можно также настроить стек шрифтов, используя разделяемый запятыми список имен шрифтов в порядке их предпочтения. Создает простое поле ввода на вкладке Стили.
number Задает числовое значение без единицы измерения (используйте тип text, чтобы разрешить указание значения с единицами измерения, такими как px или em). Создает поле ввода с кнопками со стрелками вверх и вниз, которые также можно использовать для увеличения или уменьшения текущего значения на вкладке Стили.
picture Задает источник изображения (в виде URL-адреса). Создает простое поле ввода на вкладке Стили.
text Задает значение, которое может включать как текст, так и цифры. Кроме того, этот тип данных используется для числовых значений, которые могут включать единицу измерения (например, px или em). Создает простое поле ввода на вкладке Стили.

Заметка

Подпись на вкладке Стили может отображаться в квадратных скобках, например "[Мой стиль]". Квадратные скобки указывают, что для отображаемого текста отсутствует перевод. Если выбрать значение, поддерживаемое любым из готовых шаблонов (например, "Цвет 1"), перевод будет доступен, поэтому квадратные скобки не отображаются.

Заметка

Параметр стиля, созданный с помощью тега <meta> в соответствии с приведенном здесь описанием, отображается на вкладке Стили только в том случае, если он используется хотя бы в одном фактическом стиле или HTML-теге, как описано в последующих разделах.

Добавление комментариев CSS для реализации параметров стиля в разделе head

Параметры, заданные на вкладке Стили, можно применить к стилям CSS, заданным в разделе <head> вашего HTML-документа, заключив значение CSS между двумя комментариями CSS, содержащими значение атрибута name для соответствующего тега meta xrm/designer/setting. Пара комментариев CSS имеет следующий вид:

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

Где:

  • <tag-name> — это атрибут name для тега meta xrm/designer/setting, который задает соответствующий параметра на вкладке Стили.
  • <value> — это значение, которое заменяется, когда пользователь изменяет соответствующий параметра на вкладке Стили.

Внимание

Такие пары комментариев CSS можно использовать только в стилях и классах, определенных с помощью тегов <style> в разделе <head>. Более того, может присутствовать только один набор тегов <style>, в котором настроены все стили CSS.

Ниже приведен пример с тегом meta xrm/designer/setting, который создает на вкладке Стили элемент управления палитрой с именем "Color 1". Затем стиль CSS применяет этот параметр для задания цвета текста элементов <h1>.

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

Добавление атрибутов ссылки на свойство для реализации параметров стилей в разделе body

Параметры, заданные на вкладке Стили, можно применить как значения атрибутов к любому HTML-тегу в разделе <body> вашего документа, добавив атрибут следующего вида к каждому соответствующему тегу:

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

Где:

  • <attr> — это имя создаваемого атрибута.
  • <tag-name> — это значение атрибута name для тега meta, который задает этот параметр.
  • Если требуется несколько атрибутов внутри одного атрибута property-reference, их необходимо разделять точкой с запятой.

Ниже приведен пример, в котором теги meta xrm/designer/setting, создающие два параметра для управления главным баннером в документе с элементами управления "Hero image" и "Hero image height" на вкладке Стили. Свойство property-reference затем используется в теге <img> для реализации этих параметров.

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

Таким образом, в этом примере тег <img> разрешается в что-то вроде указанного ниже:

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