Определение действий панели инструментов с помощью таблицы данных
Используйте структуру данных ToolbarAction, чтобы создать таблицу данных, определяющую действия, которые должны отображаться на панели инструментов. Каждая строка в таблице данных представляет действие на панели инструментов. Можно создать таблицу данных для конфигурирования виджета следующими способами:
• Задать число и тип отображаемых действий.
• Управлять порядком и положением действий.
• Управлять видимостью каждого действия на основе условия или события.
• Задать максимальную ширину для каждого действия.
В следующей процедуре описаны шаги для добавления и конфигурирования виджета "Панель инструментов".
1. Задайте функциональные требования, а затем определите вид действий, которые должны отображаться на панели инструментов.
2. В Composer создайте сервис конфигурации панели инструментов, который форматируется с помощью структуры данных ToolbarAction.
3. В Mashup Builder добавьте виджет "Панель инструментов" в мэшап, а затем добавьте сущность с сервисом конфигурации панели инструментов.
4. Привяжите свойство Все данные сервиса панели инструментов к свойству ActionsData виджета.
 |
Связываемые свойства для каждого действия на панели инструментов отображаются на панели Свойства в следующем формате:
• <ActionID>_<имя свойства>
|
5. На панели Свойства сконфигурируйте виджет, а затем создайте привязки к другим виджетам или функциям.
Дополнительные сведения о свойствах виджета см. в разделе Виджет "Панель инструментов" (с поддержкой тем).
Общие определения полей
• actionID - идентификатор действия в таблице данных. Это значение используется для идентификации каждого действия при конфигурировании виджета на панели Свойства в Mashup Builder.
• actionMaxWidth - определение поля, указывающее пользовательскую максимальную ширину для действия. По умолчанию каждое действие на панели инструментов отображается с использованием максимальной ширины 100 пикселей.
• actionTooltip - определяет содержимое сообщения всплывающей подсказки. Можно также добавить во всплывающую подсказку значок, используя свойство actionTooltipIcon.
• actionVisible - управляет видимостью действия на панели инструментов.
• actionDisabled - отключает действие. Можно программно управлять этим значением, чтобы включать или отключать действие в соответствии с условием в мэшапе.
• actionLabel - метка, отображаемая для действия на панели инструментов. Для действий кнопок и кнопок переключения метка отображается в действии.
• alignRight - выравнивает действие по правой области.
В дополнение к общим свойствам структура данных содержит определения полей, которые позволяют конфигурировать кнопки, кнопки переключения, ссылки и действия выпадающего списка. В следующем разделе перечислены доступные свойства для каждого типа действий с примером.
Кнопка
buttonIcon - задает значок, отображаемый на кнопке, с помощью ссылки на имя медиаобъекта.
В ThingWorx 9.3 или более поздних версиях можно отобразить значки SVG из библиотеки значков SVG, используя следующий синтаксис cds:<icon_name>.
Дополнительные сведения о доступных значках см. в разделе Использование значков SVG.
buttonType - определяет визуальную стилизацию, используемую для кнопки. Опции: primary, secondary, tertiary, danger, transparent.
Кнопка переключения
toggleChipIcon - указывает, следует ли отображать значок, показывающий состояние кнопки переключения. Опции: true, false.
toggleLabelPosition - управляет положением метки относительно значка. Опции: left, right.
Ссылка
linkTargetWindow - указывает способ открытия связанного URL-адреса. Опции: new, same, popup.
linkType- тип ссылки.
Выпадающий список
• dropdownData - данные, используемые для определения элементов списка. Например:
[{label:"Item 1", value: "value1"}, {label:"Item 2", value: "value2"}, {label:"Item 3", value: "value3"}]
• dropdownSeelctedText - позволяет выбрать элемент в выпадающем списке по умолчанию, используя текст значения. Например, используйте следующее выражение для выбора Item 2 по умолчанию:
dropdownSeelctedText: "value2";
• dropdownLabelPosition - указывает положение метки раскрывающегося списка. Опции: top, left.
Добавление фильтра данных
Можно использовать свойства виджета, чтобы добавить и сконфигурировать фильтр на левой или правой стороне панели инструментов. Дополнительные сведения см. в разделе Виджет "Панель инструментов" (с поддержкой тем).
Упорядочивание действий на панели инструментов
Чтобы упорядочить действия на панели инструментов, используйте сервис данных виджета таблицы данных. Действия сортируются на основе их порядка в таблице данных. Кроме того, можно выровнять действия по правой стороне панели инструментов с помощью опции alignRight.
Структура данных ToolbarAction
В следующей таблице перечислены определения полей структуры данных ToolbarAction.
Определение поля | Описание | Базовый тип | ||
|---|---|---|---|---|
actionMaxWidth | Максимальная ширина действия на панели инструментов. | NUMBER | ||
toggleState | Состояние переключателя. | BOOLEAN | ||
toggleChipIcon | Показывает или скрывает значок скругленной кнопки, который используется для индикации выбора. | BOOLEAN | ||
actionTooltip | Всплывающая подсказка действия. | STRING | ||
Visible | Управляет видимостью действия. | BOOLEAN | ||
alignRight | Выравнивает действие по правой стороне панели инструментов. Чтобы выровнять действие по левой стороне, задайте для него значение false или пустое. | BOOLEAN | ||
actionLabel | Метка действия. | STRING | ||
actionTooltipIcon | Значок, отображаемый во всплывающей подсказке действия. | IMAGELINK | ||
actionType | Тип элемента, отображаемого для действия панели инструментов (кнопка, ссылка, выпадающий список или кнопка переключения). | STRING | ||
linkDestination | URL-адрес для ссылки. | STRING | ||
buttonIcon | Значок, отображаемый на кнопке. | IMAGELINK | ||
actionDisabled | Определяет, является ли действие интерактивным или выключенным. | BOOLEAN | ||
buttonType | Исполнение кнопки для отображения. Можно выбрать Primary (по умолчанию), Secondary, Tertiary, Danger или Transparent. | STRING | ||
dropdownData | Значение JSON, которое содержит данные для каждого элемента выпадающего списка. Каждый элемент представлен объектом JSON, содержащим метку, значение и состояние элемента (необязательно). | JSON | ||
actionId
| Уникальный идентификатор для каждой строки в таблице данных. Каждый идентификатор используется как префикс для свойств связываемых действий на панели Свойства в Mashup Builder. | STRING | ||
linkTargetWindow | Управляет открытием окна цели ссылки. Можно открывать ссылку в новом окне, текущем окне или во всплывающем диалоговом окне (New, Same или Popup). | STRING | ||
linkType | Тип ссылки. | STRING | ||
dropdownSeelctedText | Строковое значение элемента для выбора в выпадающем списке. | STRING | ||
toggleLabelPosition | Управляет положением метки кнопки переключения относительно значка состояния. Опции: left, right. | STRING |