В Experience Builder вы можете использовать атрибуты данных, статистику и простые выражения для отображения базового динамического содержимого. Вы также можете применять статические стили и стили на основе состояния в настройках виджета.
Существует два типа расширенного форматирования: расширенное динамическое содержимое и динамический стиль.
- Расширенное динамическое содержимое включает в себя выполнение вычислений с данными и возврат динамических значений для отображения в виде содержимого виджета. Можно использовать выражения Arcade для создания расширенного динамического содержимого.
- Динамический стиль включает в себя обновление фонов, границ и других визуальных элементов виджетов на основе данных. Вы можете использовать как выражения Arcade, так и условные стили, функцию, не требующую написание кода, для создания динамического стиля.
Arcade
Arcade — это легкий и безопасный язык выражений, который можно использовать для управления данными и создания пользовательских ресурсов в приложениях Experience Builder. Arcade можно использовать для создания и динамического содержимого, и динамического стиля.
Профили форматирования
Профиль форматирования определяет среду и правила оценки и выполнения выражений.
В Experience Builder есть два типа профилей форматирования:
Профиль форматирования виджета настраивает содержимое и стиль отдельных виджетов. Он использует переменную профиля $dataSource для ссылки на данные на уровне источника данных.
Профиль форматирования виджета элемента списка настраивает содержимое и стиль отдельных элементов списка в виджете Список, а также виджеты Текст, Кнопка и Изображение внутри элемента списка. Он использует переменную профиля $feature для ссылки на данные на уровне объектов.
Примечание:
Experience Builder также включает профиль данных, который создает FeatureSet в качестве источника данных. Профиль данных можно использовать, чтобы добавить данные с Arcade.
Во любом случае в Experience Builder вы вводите скрипты в редакторе Arcade. Редактор предоставляет доступ к поддерживаемым переменным, функциям и предварительному просмотру данных в реальном времени, который помогает тестировать скрипты.
Редактор Arcade отображается в разных частях интерфейса конструктора в зависимости от того, используете ли вы Arcade для создания динамического содержимого, динамического стиля или добавления данных.
Расширенное динамическое содержимое с Arcade
Динамический содержимое — это ресурсы, которые изменяются в зависимости от данных или взаимодействия с пользователем. Arcade позволяет вам вычислять и возвращать динамические значения, чтобы отобразить их в качестве ресурса виджета. Вместо того чтобы привязывать ресурсы напрямую к полю или статистике, вы можете написать выражения, которые вычисляют значения на основе логики, условий и функций.
Возвращаемое значение должно быть одного из следующих типов полей:
- Текст
- Число
- Дата
- Только дата
- Только время
Experience Builder поддерживает использование динамического содержимого следующими способами:
- Создание содержания текста, включая текст кнопки
- Установка источников изображения
- Установка ссылок по URL-адресам, кроме ссылок в виджетах Текст
Примеры скриптов Arcade
Подразделы ниже содержат скрипты Arcade, которые можно использовать для создания динамического содержимого.
Отобразить сообщение на основе условия
return IIf($feature.status== "Delayed", "⚠️ Delayed", "✅ On Schedule");Показать количество дней с момента последнего обновления записи
var lastUpdated = $feature.EditDate;
return Floor(DateDiff(Now(), lastUpdated, "days")) + " days ago";Отобразить количество уникальных значений
var ds = $dataSources["dataSource_id"].layer;
var distincItem = Distinct(ds, 'CNTRY_NAME');
return Count(distincItem);Отобразить сообщение после применения фильтра
var ds = $dataSources["dataSource_1-18c66465e65-layer-2"].layer;
var queryStr = $dataSources["dataSource_1-18c66465e65-layer-2"].queryParams.where;
Console(queryStr);
if (!IsEmpty(queryStr)) {
var result = Filter(ds, queryStr);
return "Filtered view: " + Count(result) + " records are displayed.";
}
return "All records are displayed."Сократить длинные тексты в виджете Список
var desc = $feature.description;
return Left(desc, 10) + IIf(Count(desc) > 10, "...", "");Отобразить различные изображения в виджете Изображение в списке по категориям
if ($feature.category === "park") {
return "https://example.com/images/park.png";
} else if ($feature.category === "school") {
return "https://example.com/ images /school.png";
} else {
return "https://example.com/ images /default.png";
}Стиль динамического содержимого
Для текстовых ресурсов вы можете вернуть словарь, включающий как значение, так и стили его текста. Ниже показан скрипт для примера:
return {
value: "Advanced dynamic content",
text: {
size: 16,
bold: true
}
};Вы также можете вернуть значение в формате HTML для создания более расширенного стиля. Ниже показан скрипт для примера, использующий HTML:
return "<p style=\"font-family: Arial; font-size: 16px; color: #333; margin-bottom: 12px;\">" +
"Welcome to Experience Builder! Visit our " +
"<a href=\"https://experience.arcgis.com\" style=\"color: #007BFF; text-decoration: none;\">" +
"homepage</a> for more details.</p>" +
"<p style=\"font-size: 15px; font-family: Verdana; color: #444; margin-bottom: 8px;\">" +
"Key features:</p>" +
"<ul style=\"font-size: 14px; font-family: Verdana; color: #444; margin-top: 0;\">" +
"<li style=\"margin-bottom: 6px;\">Interact with 2D and 3D content in one app.</li>" +
"<li style=\"margin-bottom: 6px;\">Deploy responsive apps to any device.</li>" +
"<li style=\"margin-bottom: 6px;\">Create, deploy, and manage apps in a single place.</li>" +
"</ul>"В следующей таблице перечислены HTML-теги, которые Experience Builder поддерживает в скриптах Arcade:
| Тег | Атрибуты |
|---|---|
h1, h2, h3, h4, h5, h6 | style |
span | style |
p | style |
s | style |
strong | style |
em | style |
u | style |
ol, ul | style |
li | style |
br | |
a | style, href, target |
img | style, src, alt, height, width |
Динамический стиль с условиями или с Arcade
Динамические стили позволяют визуально адаптировать виджеты на основе данных. Это включает изменение визуальных характеристик, таких как размер текста, цвет фона и стиль границ, на основе значений полей, статистики или вычисленной логики.
Настройка Динамический стиль появляется на панели настроек виджета при подключении виджета к данным.
Следующие виджеты поддерживают динамический стиль:
- Виджет Текст — параметр Динамический стиль отображается в нижней части панели настроек.
- Виджет Кнопка — параметр Динамический стиль отображается в разделе Дополнительно. Каждое состояние (По умолчанию и При наведении) имеет собственную настройку.
- Виджет Список — настройка Динамический стиль отображается под каждым состоянием (По умолчанию, При наведении и Выбрано).
Примечание:
В виджете Список динамические стили применяются к отдельным элементам списка, а не ко всему виджету.
Включите Динамический стиль и нажмите на кнопку настроек 
, чтобы открыть панель Динамический стиль. На панели находятся две вкладки: Условие и Скрипт.
Условие
Условный стиль — это опция, не требующая написания кода, которая позволяет применять стили на основе простых правил. Она не требует написания скриптов. Это рекомендуемый метод для визуального выделения различий в данных, например для индикаторов состояния, категорий и диапазонов значений.
Вкладка Условие включает в себя следующие настройки:
- Выберите индикатор для условий - выберите метод создания условных выражений. С виджетами Текст и Кнопка вы можете использовать атрибуты данных, статистику или ранее настроенное динамическое содержимое. С виджетом Список можно использовать только атрибуты данных.
В следующей таблице перечислены типы полей атрибутов, которые можно использовать в качестве индикаторов, и их поддерживаемые операторы.
Тип поля индикатора Поддерживаемые операторы Строка
является, не является, содержит, является пустым, не является пустым
Число
является, не является, больше, меньше, между
- Условия стиля - после установки индикатора вы можете нажать Добавить условие стиля, чтобы создать условия. Каждое условие состоит из следующих компонентов:
- Оператор – выберите из списка операторов, поддерживаемых индикатором.
- Значение — целевое значение для сравнения с индикатором. Нажмите Выбрать тип источника, чтобы выбрать метод ввода, включая пользовательский ввод, поле, уникальный и статистику для числовых индикаторов.
- Стиль — визуальный стиль, такой как цвет текста, фон или граница, который применяется при выполнении условия.
Вы можете выбрать условие на панели настроек, чтобы предварительно просмотреть его эффект на канве, даже если текущие данные не соответствуют условию. Вы можете изменять порядок, дублировать и удалять условия. Если текущие данные соответствуют нескольким условиям, приоритет имеет то, которое вы поместили выше в списке условий. Если текущие данные не соответствуют ни одному условию, виджет использует свой статический стиль.
Скрипт
Вы можете использовать скрипты Arcade для создания сложной и гибкой логики стилей. На вкладке Скрипт вы можете нажать Редактор Arcade, чтобы открыть окно редактора.
Experience Builder сохраняет ваш скрипт локально, и он остается доступным при следующем открытии редактора. Для запуска скрипта щелкните Применить. После этого примененный скрипт появится в поле Используемый скрипт.
При использовании редактора Arcade вместо настройки правил условного стиля с помощью интерфейса без кода вы пишете скрипт, который возвращает словарь свойств стиля и соответствующих им значений. Это позволяет применять стили на основе пользовательской логики, расчетов и условий, чего нельзя добиться с помощью функции Условие стиля.
Experience Builder использует возвращаемые значения для отображения стиля виджета. Если вы вводите какие-либо ключи стиля, которых нет в словаре, виджет использует настройки стиля по умолчанию для этих свойств.
В таблицах ниже перечислены поддерживаемые свойства стиля для каждого виджета, включая ожидаемые типы значений и их смысл.
Примечание:
При установке цветов убедитесь, что значение соответствует форматам цветов CSS, таким как именованные цвета («red»), шестнадцатеричные коды («#ff0000») или rgba().
Стиль виджета Текста
Виджет Текст поддерживает следующие свойства стиля:
| Свойство | Тип | Описание |
|---|---|---|
text | Словарь | Используется для задания стиля текста |
text.size | Число | Размер шрифта в пикселях |
text.color | Строка | Цвет текста |
text.bold | Boolean | Указывает, использовать ли полужирный стиль |
text.italic | Boolean | Указывает, использовать ли курсивный стиль |
text.underline | Boolean | Указывает, использовать ли подчеркнутый стиль |
text.strike | Boolean | Указывает, использовать ли перечеркнутый стиль |
background | Словарь | Используется для задания фона |
background.color | Строка | Цвет фона |
background.fillType | Строка | 'fit', 'fill', 'center', 'tile' или 'stretch' |
background.image | Строка | URL-адрес изображения |
Ниже приведен пример скрипта, который стилизует название города в виджете Текст с помощью различных размеров текста и цветов фона в зависимости от численности населения выбранного города:
// Get the list of selected features from the data source
var sf = $dataSources["dataSource_id"].selectedFeatures;
// Get the population of the first selected feature
var pop = First(sf).Population;
// Initialize style variables
var bgColor = "";
var txtStyles = null;
// Apply style based on population threshold
if (pop > 500000) {
bgColor = "rgba(238, 246, 255, 1)";
txtStyles = {
size: 34,
bold: true
};
} else {
bgColor = "rgba(255, 216, 219, 1)";
txtStyles = {
size: 25,
italic: true
};
}
return {
background: {
color: bgColor
},
text: txtStyles
};Стиль виджета Кнопка
Виджет Кнопка поддерживает следующие свойства стиля:
| Свойство | Тип | Описание |
|---|---|---|
text | Словарь | Используется для задания стиля текста |
text.size | Число | Размер шрифта в пикселях |
text.color | Строка | Цвет текста |
text.bold | Boolean | Указывает, использовать ли жирный стиль |
text.italic | Boolean | Указывает, использовать ли курсивный стиль |
text.underline | Boolean | Указывает, использовать ли подчеркнутый стиль |
text.strike | Boolean | Указывает, использовать ли перечеркнутый стиль |
icon | Словарь | Используется для задания стиля значка |
icon.name | Строка | Имя значка |
icon.position | Строка | 'LEFT' или 'RIGHT' |
icon.size | Число | Размер значка в пикселях |
icon.color | Строка | Вы можете установить цвет значка, если значок в формате SVG |
background | Словарь | Используется для задания фона |
background.color | Строка | Цвет фона |
background.fillType | Строка | 'fit', 'fill', 'center', 'tile' или 'stretch' |
background.image | Строка | URL-адрес изображения |
border | Словарь | Используется для задания стиля рамки |
border.border | Словарь | Установить одинаковый стиль для всей рамки |
border.border.type | Строка | 'solid', 'dashed', 'dotted' или 'double' |
border.border.color | Строка | Цвет границы |
border.border.width | Число | Ширина границы |
border.borderLeft | Словарь | Установить стиль левой границы. Формат словаря такой же, как у border.border. |
border.borderRight | Словарь | Установить стиль правой границы. Формат словаря такой же, как у border.border. |
border.borderTop | Словарь | Установить стиль верхней границы. Формат словаря такой же, как у border.border. |
border.borderBottom | Словарь | Установить стиль нижней границы. Формат словаря такой же, как у border.border. |
borderRadius | Словарь | Используется для задания радиуса рамки |
borderRadius.unit | Строка | 'px', 'rem', 'em', 'vw' или '%' |
borderRadius.number | Number[] | [top-left-radius, top-right-radius, bottom-right-radius, bottom-left-radius] |
Подсказка:
Для значков кнопок вы можете выбрать один из доступных наборов значков или загрузить свой собственный. Если вы загрузите значок, то сможете ссылаться на него по имени в скрипте Arcade.
Ниже приведен пример скрипта, который изменяет значок виджета Кнопка в зависимости от статуса доставки заказа:
var status = $feature.deliveryStatus;
var isDelivered = status == "Delivered";
return {
icon: {
name: IIf(isDelivered, "check", "glasses")
}
};Стиль виджета Список
Виджет Список поддерживает следующие свойства стиля для каждого элемента списка:
| Свойство | Тип | Описание |
|---|---|---|
background | Словарь | Используется для задания фона |
background.color | Строка | Цвет фона |
background.fillType | Строка | 'fit', 'fill', 'center', 'tile' или 'stretch' |
background.image | Строка | URL-адрес изображения |
border | Словарь | Используется для задания стиля рамки |
border.border | Словарь | Установить одинаковый стиль для всей рамки |
border.border.type | Строка | 'solid', 'dashed', 'dotted' или 'double' |
border.border.color | Строка | Цвет границы |
border.border.width | Число | Ширина границы |
border.borderLeft | Словарь | Установить стиль левой границы. Формат словаря такой же, как у border.border. |
border.borderRight | Словарь | Установить стиль правой границы. Формат словаря такой же, как у border.border. |
border.borderTop | Словарь | Установить стиль верхней границы. Формат словаря такой же, как у border.border. |
border.borderBottom | Словарь | Установить стиль нижней границы. Формат словаря такой же, как у border.border. |
borderRadius | Словарь | Используется для задания радиуса рамки |
borderRadius.unit | Строка | 'px', 'rem', 'em', 'vw' или '%' |
borderRadius.number | Number[] | [top-left-radius, top-right-radius, bottom-right-radius, bottom-left-radius] |
Ниже приведен пример скрипта, который задает другой цвет фона для элементов списка, имеющих высокий уровень приоритета:
var isHigh = $feature.priority == "High";
return {
background: {
color: IIf(isHigh, "rgba(217, 249, 242, 1)", "rgba(255, 238, 194, 1)")
}
};Рекомендации и примечания по использованию Arcade
Ниже приведен список рекомендаций и примечаний по использованию скриптов Arcade для создания динамического содержимого и динамического стиля:
- Скрипты Arcade в Experience Builder поддерживают только типы слоев FeatureLayer, OrientedImageryLayer, SubtypeGroupLayer и SubtypeSublayer.
- Фильтры и пространственные фильтры, примененные к источникам данных или видам данных, не могут автоматически добавляться к источникам данных профиля. Используйте функцию getFilteredFeatureSet, чтобы синхронизировать фильтр вручную.
- Для профиля форматирования виджета скрипт Arcade использует текущие данные для тестирования скрипта при его запуске или применении. Например, если вы используете selectedFeatures и выборки нет, скрипт выведет сообщение Некорректный скрипт Arcade, если только вы не обработали случай отсутствия выборки.
- Для профиля форматирования элемента виджета Список при запуске или применении скрипта Arcade для его проверки используется первый элемент списка.
- Каждая страница приложения поддерживает максимум 10 выражений Arcade с использованием профиля форматирования виджета, включая как динамическое содержимое, так и динамический стиль, задаваемый скриптом Arcade.
- Если вы используете значение агрегирования в нескольких местах, используйте опцию Arcade в окне Добавить данные, чтобы добавить его один раз и использовать в другом месте.
- Поля, используемые в профиле форматирования виджета, не добавляются автоматически в список используемых полей. Если на эти поля больше ничего не ссылается, скрипт Arcade может работать некорректно и привести к некорректному выводу.