Добавление пользовательских действий на панель инструментов сетки
В ThingWorx 9.4 или более поздней версии можно определить пользовательские действия для отображения на панели инструментов сетки.
Общие сведения
• Кнопка
• Выпадающий список
• Ссылка
• Кнопка переключения
Конфигурирование пользовательских действий для панели инструментов виджета "Сетка"
1. В Composer создайте сервис данных, который возвращает таблицу данных с необходимыми данными для определений действий. Дополнительные сведения о поддерживаемых форматах данных см. в разделе Пример. Образец конфигурации панели инструментов.
2. В Mashup Builder добавьте сервис в мэшап, используя панель Данные.
3. Привяжите таблицу данных сервиса к свойству ToolbarActions виджета "Сетка". Дополнительные свойства для пользовательских действий перечислены на панели Свойства.
4. На панели Свойства сконфигурируйте действия для панели инструментов. Чтобы создать внутренние привязки виджета, используйте диалоговое окно конфигурации привязок.
5. Щелкните Сохранить, а затем щелкните Просмотр мэшапа.
Свойства пользовательских действий
В следующей таблице перечислены свойства для каждого типа пользовательского действия, которое можно добавить в виджет "Сетка".
|
Тип действия
|
Имя свойства/события
|
Описание
|
Пример
|
|---|---|---|---|
|
Кнопка
|
<actionId>_Clicked
|
Событие, которое инициируется при нажатии кнопки.
|
Button1_Clicked
|
|
<actionId>_Disabled
|
Отключает кнопку на панели инструментов.
|
Button1_Disabled
|
|
|
<actionId>_Visible
|
Управляет видимостью кнопки на панели инструментов.
|
Button1_Visible
|
|
|
Выпадающий список
|
<actionId>_Disabled
|
Отключает выпадающий список на панели инструментов.
|
Dropdown1_Disabled
|
|
<actionId>_SelectedText
|
Это связываемое свойство позволяет задать и загрузить значение выбранного текста в действии выпадающего списка.
|
Dropdown1_SelectedText
|
|
|
<actionId>_SelectedTextChanged
|
Событие, которое инициируется при изменении выбранного элемента в выпадающем списке.
|
Dropdown1_SelectedTextChanged
|
|
|
<actionId>_Visible
|
Управляет видимостью выпадающего списка на панели инструментов.
|
Dropdown1_Visible
|
|
|
Ссылка
|
<actionId>_Disabled
|
Отключает ссылку на панели инструментов.
|
Link1_Disabled
|
|
<actionId>_Visible
|
Управляет видимостью действия ссылки на панели инструментов.
|
Link1_Visible
|
|
|
Кнопка переключения
|
<actionId>_Disabled
|
Отключает кнопку переключения на панели инструментов.
|
Toggle1_Disabled
|
|
<actionId>_State
|
Это связываемое свойство позволяет задать и загрузить состояние действия кнопки переключения.
|
Toggle1_State
|
|
|
<actionId>_StateChanged
|
Событие, которое инициируется при изменении состояния кнопки переключения.
|
Toggle1_StateChanged
|
|
|
<actionId>_Visible
|
Управляет видимостью действия кнопки переключения на панели инструментов.
|
Toggle1_Visible
|
Пример. Создание сервиса для настройки пользовательских действий на панели инструментов сетки
В следующем примере показан сервис, который создает следующие пользовательские действия на панели инструментов сетки:
• Выпадающий список, управляющий высотой строк.
• Кнопка переключения, управляющая видимостью номеров строк.
• Кнопка экспорта для экспорта выбранных строк в сетке.
В Composer создайте сервис данных, который возвращает таблицу данных с необходимыми данными для пользовательских действий. Дополнительные сведения о поддерживаемых форматах данных см. в разделе Определение действий панели инструментов с использованием таблицы данных.
var result = Resources["InfoTableFunctions"].CreateInfoTableFromDataShape({
infoTableName : "InfoTable",
dataShapeName : "ToolbarAction"
});
// Dropdown start
result.AddRow({
actionId: "DD1",
actionType: "dropdown",
actionLabel: "Row Height",
actionTooltip: "Change row height",
actionDisabled: false,
actionVisible: true,
dropdownData: [{label:"36 px", value: "36"}, {label:"48 px", value: "48"}, {label:"64 px", value: "64"}],
actionMaxWidth: 200,
dropdownHintText: "Select..."
});
// Dropdown end
// Toggle start
result.AddRow({
actionId: "T1",
actionType: "toggle",
actionLabel: "Show Row Numbers",
actionTooltip: "Adds a column that shows row numbers.",
actionDisabled: false,
actionVisible: true,
toggleChipIcon: true,
toggleState: false,
toggleLabelPosition: 'right',
actionMaxWidth: 200
});
// Toggle end
// Button start
result.AddRow({
actionId: "B1",
actionType: "button",
actionLabel: "Export",
actionTooltip: "Export the selected rows data.",
actionDisabled: false,
actionVisible: true,
buttonType: "primary",
actionMaxWidth: 100
});
// Button end
infoTableName : "InfoTable",
dataShapeName : "ToolbarAction"
});
// Dropdown start
result.AddRow({
actionId: "DD1",
actionType: "dropdown",
actionLabel: "Row Height",
actionTooltip: "Change row height",
actionDisabled: false,
actionVisible: true,
dropdownData: [{label:"36 px", value: "36"}, {label:"48 px", value: "48"}, {label:"64 px", value: "64"}],
actionMaxWidth: 200,
dropdownHintText: "Select..."
});
// Dropdown end
// Toggle start
result.AddRow({
actionId: "T1",
actionType: "toggle",
actionLabel: "Show Row Numbers",
actionTooltip: "Adds a column that shows row numbers.",
actionDisabled: false,
actionVisible: true,
toggleChipIcon: true,
toggleState: false,
toggleLabelPosition: 'right',
actionMaxWidth: 200
});
// Toggle end
// Button start
result.AddRow({
actionId: "B1",
actionType: "button",
actionLabel: "Export",
actionTooltip: "Export the selected rows data.",
actionDisabled: false,
actionVisible: true,
buttonType: "primary",
actionMaxWidth: 100
});
// Button end
В Mashup Builder создайте следующие привязки:
• Чтобы управлять высотой строк сетки, привяжите свойство SelectedText выпадающего списка к функции "Выражение", которая преобразует строковый базовый тип в числовой. Затем можно привязать выходные данные функции к свойству MinRowHeight сетки.
• Чтобы управлять видимостью номеров строк, привяжите свойство T1_State кнопки переключения к свойству ShowRowNumbers сетки.
• Чтобы показывать кнопку экспорта при выборе строк, привяжите свойство сетки RowsSelected к свойству B1_Visible кнопки.
Дополнительные сведения о доступных опциях конфигурации для пользовательских действий см. в разделе Пример. Образец конфигурации панели инструментов.