Пример. Образец конфигурации панели инструментов
Создание сервиса данных
1. В Composer создайте вещь или шаблон вещи, а затем откройте вкладку Сервисы.
2. Нажмите кнопку Добавить, чтобы создать новый сервис для панели инструментов.
3. В разделе Информация о сервисе введите наименование сервиса, а затем щелкните Сохранить и продолжить.
4. В редакторе кода определите новую таблицу данных, используя структуру данных ToolbarAction.
Кроме того, можно использовать доступные фрагменты кода:
a. На левой панели разверните Фрагменты. В разделе Фрагменты кода разверните Infotable.
b. Выберите фрагмент кода Create Infotable from datashape для создания таблицы данных. Откроется диалоговое окно.
c. В диалоговом окне выберите структуру данных ToolbarAction, а затем щелкните Вставить фрагмент кода. Фрагмент кода добавляется в редактор кода.
5. Определите действия панели инструментов, добавляя строки со значениями для каждого поля таблицы данных и используя для этого структуру данных. Для определения строки используется следующий синтаксис:
<infotable_name>.AddRow(<Row_Object>);
6. По завершении определения сервиса нажмите кнопку Готово.
7. Щелкните Сохранить, чтобы сохранить изменения в сущности.
 |
Щелкните Выполнить, чтобы предварительно просмотреть возвращаемые выходные данные из сервиса данных.
|
Создание таблицы данных действий
В следующем сервисе данных показан пример создания панели инструментов с помощью структуры данных ToolbarAction.
В первом разделе создайте таблицу данных с помощью метода CreateInfoTableFromDataShape():
var toolbarData = Resources["InfoTableFunctions"].CreateInfoTableFromDataShape(toolbarData);
Затем определите действия панели инструментов, используя опции, доступные для типа действия в структуре данных ToolbarAction. Значения полей данных можно передавать как объекты JSON с помощью метода AddRows() таблицы данных. Сохраните данные таблицы данных в переменной с именем result. Следующий сервис определяет таблицу данных, которая содержит несколько действий для виджета "Панель инструментов".
var toolbarData = {
infoTableName: "InfoTable",
dataShapeName : "ToolbarAction"
};
var toolbarData = Resources["InfoTableFunctions"].CreateInfoTableFromDataShape(toolbarData);
// Link Action
toolbarData.AddRow({
actionId: "L1",
actionType: "link",
actionLabel: "Link",
actionTooltip: "A link to an external resource.",
actionDisabled: false,
actionVisible: true,
linkDestination: 'https://www.ptc.com/',
linkType: "Primary",
actionMaxWidth: 100
});
// Toggle Button Action
toolbarData.AddRow({
actionId: "T1",
actionType: "toggle",
actionLabel: "Hide Header",
actionTooltip: "Hides the grid header row.",
actionDisabled: false,
actionVisible: true,
toggleChipIcon: true,
toggleState: false,
toggleLabelPosition: 'left',
actionMaxWidth: 160
});
// Dropdown Action
toolbarData.AddRow({
actionId: "DD2",
actionType: "dropdown",
actionLabel: "Row Height:",
actionTooltip: "Controls the height of the body rows.",
actionDisabled: false,
actionVisible: true,
dropdownLabelPosition: "left",
dropdownData: [{label:" Compact 32px", value: "32"}, {label:"Default 48px", value: "48"}, {label:"Tall 64px", value: "64"}],
dropdownSelectedText: "48",
actionMaxWidth: 220,
alignRight: true
});
// Button Action
toolbarData.AddRow({
actionId: "B1",
actionType: "button",
actionLabel: "Edit",
actionTooltip: "The tooltip for the Edit button.",
buttonIcon: "ResetIcon",
actionDisabled: true,
actionVisible: true,
buttonType: "transparent",
actionMaxWidth: 140,
alignRight: true,
});
// Button Action
toolbarData.AddRow({
actionId: "B2",
actionType: "button",
actionLabel: "Reset",
actionTooltip: "The tooltip for the Reset button.",
actionDisabled: false,
actionVisible: true,
buttonType: "transparent",
buttonIcon: "EditIcon",
actionMaxWidth: 140,
alignRight: true
});
result=toolbarData;
infoTableName: "InfoTable",
dataShapeName : "ToolbarAction"
};
var toolbarData = Resources["InfoTableFunctions"].CreateInfoTableFromDataShape(toolbarData);
// Link Action
toolbarData.AddRow({
actionId: "L1",
actionType: "link",
actionLabel: "Link",
actionTooltip: "A link to an external resource.",
actionDisabled: false,
actionVisible: true,
linkDestination: 'https://www.ptc.com/',
linkType: "Primary",
actionMaxWidth: 100
});
// Toggle Button Action
toolbarData.AddRow({
actionId: "T1",
actionType: "toggle",
actionLabel: "Hide Header",
actionTooltip: "Hides the grid header row.",
actionDisabled: false,
actionVisible: true,
toggleChipIcon: true,
toggleState: false,
toggleLabelPosition: 'left',
actionMaxWidth: 160
});
// Dropdown Action
toolbarData.AddRow({
actionId: "DD2",
actionType: "dropdown",
actionLabel: "Row Height:",
actionTooltip: "Controls the height of the body rows.",
actionDisabled: false,
actionVisible: true,
dropdownLabelPosition: "left",
dropdownData: [{label:" Compact 32px", value: "32"}, {label:"Default 48px", value: "48"}, {label:"Tall 64px", value: "64"}],
dropdownSelectedText: "48",
actionMaxWidth: 220,
alignRight: true
});
// Button Action
toolbarData.AddRow({
actionId: "B1",
actionType: "button",
actionLabel: "Edit",
actionTooltip: "The tooltip for the Edit button.",
buttonIcon: "ResetIcon",
actionDisabled: true,
actionVisible: true,
buttonType: "transparent",
actionMaxWidth: 140,
alignRight: true,
});
// Button Action
toolbarData.AddRow({
actionId: "B2",
actionType: "button",
actionLabel: "Reset",
actionTooltip: "The tooltip for the Reset button.",
actionDisabled: false,
actionVisible: true,
buttonType: "transparent",
buttonIcon: "EditIcon",
actionMaxWidth: 140,
alignRight: true
});
result=toolbarData;
На следующем рисунке показана выходная таблица данных после выполнения сервиса данных.
Таблица данных содержит пять строк, которые используются для определения и конфигурирования пяти действий. На следующем рисунке показаны действия виджета "Панель инструментов" во время выполнения.
Действия отображаются в различных областях на панели инструментов в зависимости от их порядка в таблице данных и значения опции alignRight. Можно создавать панели инструментов с различными конфигурациями для обеспечения компактных элементов управления для виджетов, сервисов или функций в мэшапе. Например, можно создать привязки между виджетом "Панель инструментов" и виджетом "Сетка" для конфигурирования и фильтрации сетки во время выполнения.