Конфигурирование сетки с использованием данных JSON
В дополнение к свойствам виджета и свойствам конфигурации столбцов можно конфигурировать свойства виджета "Сетка" динамически с помощью данных JSON следующими способами:
• Создать пользовательский сервис данных, генерирующий данные конфигурации.
• Добавить данные конфигурации вручную в свойство Configuration виджета в Mashup Builder.
Использование сервиса данных JSON
Чтобы показать данные в сетке, использующей динамическую конфигурацию, необходимо создать данные конфигурации одним из следующих способов:
• Создайте новый сервис для вещи в Composer и напишите сервис данных JavaScript. Можно использовать доступные фрагменты кода и полезные сочетания клавиш.
• Напишите код сервиса JavaScript в любом текстовом редакторе, а затем скопируйте его и вставьте в редактор кода нового сервиса данных для вещи в Composer.
• Измените выходные данные образцов, доступных для виджета "Сетка (расширенный)" на формат JSON.
Чтобы использовать импортированные примеры сервисов конфигурации в ThingWorx Composer, выполните следующие шаги.
1. В Composer перейдите в раздел Моделирование/Вещи и откройте вещь GridAdvancedExampleServices.
2. Откройте вкладку Сервисы на левой панели; справа отобразятся доступные примеры сервисов.
3. Выберите один из сервисов конфигурации и щелкните Править, чтобы увидеть код сценария.
4. Отредактируйте сценарий, а затем сохраните его. Дополнительные сведения см. в разделе "Свойства конфигурации JSON".
Чтобы сконфигурировать сетку с помощью сервиса данных, выполните следующие действия.
1. В Composer создайте новую сущность вещи и сервис данных для хранения динамических данных конфигурации.
2. В сервисе создайте сервис конфигурации JavaScript и задайте выходные данные для JSON.
3. В Mashup Builder используйте панель Данные, чтобы добавить сервис конфигурации вещи, созданной на шаге 1.
4. На панели Данные разверните сервис данных, а затем в разделе Возвращаемые данные разверните Все данные и выполните привязку выходных данных JSON к свойству Configuration виджета "Сетка".
 |
При привязке сервиса конфигурации к сетке свойства виджета автоматически скрываются. Если сервис конфигурации не привязан, снова появляются другие свойства.
|
5. Сохраните и просмотрите завершенный мэшап.
Чтобы настроить сетку с помощью данных JSON вручную, выполните следующие действия.
1. В Mashup Builder выберите виджет "Сетка" на канве или с помощью панели инструментов Проводник.
2. На панели Свойства щелкните Добавить рядом со свойством Configuration виджета. Откроется диалоговое окно конфигурации.
3. Введите или вставьте объект JSON, который содержит требуемые данные конфигурации для сетки.
4. Нажмите кнопку Готово. Конфигурации применятся к сетке.
5. Щелкните Сохранить, чтобы сохранить мэшап.
Свойства конфигурации JSON
В следующих разделах описаны доступные свойства конфигурации JSON для сетки.
Свойства конфигурации столбца
Это свойство содержит определения для столбца в сетке, такие как заголовок столбца и порядок сортировки.
Большинство свойств определения столбца легко сопоставляются с соответствующими свойствами, доступными в Mashup Builder. Однако следующие свойства определения столбцов доступны только в Mashup Builder, когда источник данных для сетки связан с профилем данных. Аналогичным опциям в диалоговом окне настройки столбцов сетки соответствуют следующие свойства:
• hidden - определяет, является ли конкретный столбец сетки первоначально видимым или скрытым. Во время выполнения можно показывать или скрывать столбцы, используя меню отображения столбцов. Это свойство соответствует свойству Показать в диалоговом окне конфигурации виджета.
• inLayout- определяет, является ли конкретный столбец сетки видимым во время выполнения. Если задано значение false, конечный пользователь не увидит столбец и не сможет управлять его видимостью во время выполнения. Однако можно по-прежнему использовать данные столбца для форматирования состояния. Это свойство соответствует свойству Exclude в диалоговом окне конфигурации виджета.
|
|
Имена заголовков столбцов можно локализовать в сценарии JSON путем размещения лексемы локализации в двойных квадратных скобках, как показано ниже. Во время выполнения лексемы переводятся с использованием значений, сохраненных в таблице локализации.
|
"columns": {
"idFieldName": "id",
"header": {
"hide": false,
"singleLine": true,
"maxHeight": 20,
"selectionCheckboxAlignment": "bottom",
"sortSelectionColumn": true
},
"columnDefs": [
{
"targets": 0,
"fieldName": "max_temp",
"title": "Max Temp",
"width": "95px",
"autoWidth": false,
"inLayout": true,
"cellHorizontalAlignment": 'center',
"cellVerticalAlignment": 'center',
"headerHorizontalAlignment": 'center',
"headerVerticalAlignment": 'center'
"columnFormatter": {
“format": "0.00F",
"type": "number",
"stateDefinition": {
"name": "weather_eventsConf",
"fieldName": "events",
"type": "non-fixed",
"states": [
{
"name": "Rain",
"value": "Rain",
"comparator": "==",
"styleName": "tableHeaderStyle"
},
{
"name": "Fog",
"value": "Fog",
"comparator": "==",
"styleName": "FogStyle"
}
"idFieldName": "id",
"header": {
"hide": false,
"singleLine": true,
"maxHeight": 20,
"selectionCheckboxAlignment": "bottom",
"sortSelectionColumn": true
},
"columnDefs": [
{
"targets": 0,
"fieldName": "max_temp",
"title": "Max Temp",
"width": "95px",
"autoWidth": false,
"inLayout": true,
"cellHorizontalAlignment": 'center',
"cellVerticalAlignment": 'center',
"headerHorizontalAlignment": 'center',
"headerVerticalAlignment": 'center'
"columnFormatter": {
“format": "0.00F",
"type": "number",
"stateDefinition": {
"name": "weather_eventsConf",
"fieldName": "events",
"type": "non-fixed",
"states": [
{
"name": "Rain",
"value": "Rain",
"comparator": "==",
"styleName": "tableHeaderStyle"
},
{
"name": "Fog",
"value": "Fog",
"comparator": "==",
"styleName": "FogStyle"
}
В ThingWorx 9.3.6 или более поздней версии можно использовать свойство routeLinks для маршрутизации данных ссылки с помощью события LinkClicked.
"columnFormatter": {
"format":"_blank",
"type":"hyperlink",
"routeLinks": true,
"params": {
"textFormat":"Link",
"dependentField":"events"
}
}
"format":"_blank",
"type":"hyperlink",
"routeLinks": true,
"params": {
"textFormat":"Link",
"dependentField":"events"
}
}
В ThingWorx 9.4 или более поздней версии можно использовать свойство showRowNumbers в динамической конфигурации.
"columns":{},
"showRowNumbers": true,
"treeGridSettings":{}
Свойства конфигурации строк
Конфигурируются свойства строк, такие как выбор строки по умолчанию, высота строки и форматирование состояния на основе строки.
"rows": {
"selectedRowsChangedCallback": true,
"minHeight": 60,
"maxHeight": 100,
"singleLine": true,
"selection": "multi", // *{string} controls the row selection. Options: 'none', 'single', 'multi'
"defaultSelectedRows": "2,4",
"selectionCheckboxAlignment": 'bottom',
"rowFormatter": {
"stateDefinition": {
…
}
}
"selectedRowsChangedCallback": true,
"minHeight": 60,
"maxHeight": 100,
"singleLine": true,
"selection": "multi", // *{string} controls the row selection. Options: 'none', 'single', 'multi'
"defaultSelectedRows": "2,4",
"selectionCheckboxAlignment": 'bottom',
"rowFormatter": {
"stateDefinition": {
…
}
}
Свойства конфигурации сетки дерева
В ThingWorx 9.3.4 и более поздних версий доступны следующие конфигурации:
"treeSettings": {
"parentIdFieldName": "parentUid",
"hasChildrenFieldName": "hasChildren",
"maxRowCacheSize": 100000,
"alwaysExpanded": false,
"expandCollapseAll": false,
"expandCollapseIcon": "plus/minus",
"focusNavigationMode": "cell-only",
"selectFocusedItem": false,
"primaryColumnFixedSize": true,
"allowDisabledNodes": true,
"disabledStateField": "disabled",
"disableChildNodes": true,
"expandAllLoadedLevels": false,
"maxExpandedRows": 6,
"preserveRowExpansion": false,
"expandRowOnDoubleClick": false,
"includeRowExpansionParents": true,
"idPathSeparator": '--'
}
"parentIdFieldName": "parentUid",
"hasChildrenFieldName": "hasChildren",
"maxRowCacheSize": 100000,
"alwaysExpanded": false,
"expandCollapseAll": false,
"expandCollapseIcon": "plus/minus",
"focusNavigationMode": "cell-only",
"selectFocusedItem": false,
"primaryColumnFixedSize": true,
"allowDisabledNodes": true,
"disabledStateField": "disabled",
"disableChildNodes": true,
"expandAllLoadedLevels": false,
"maxExpandedRows": 6,
"preserveRowExpansion": false,
"expandRowOnDoubleClick": false,
"includeRowExpansionParents": true,
"idPathSeparator": '--'
}
Свойства конфигурации панели инструментов
"toolbar":{
"actionsData": ""
"actionsPosition": "after"
}
"actionsData": ""
"actionsPosition": "after"
}
Свойства конфигурации стиля
Необязательные свойства стилей, которые управляют отображением сетки, таким как цвет фона, стили границ, шрифты и стили, специфичные для состояния. Можно определить и использовать стили для применения к форматированию состояния.
"styles": {
"rowStyle1": {
"image": "",
"backgroundColor": "#90ee90",
"fontFamily": [
"helvetica",
"arial"
],
"lineThickness": "1",
"foregroundColor": "#ffffff",
"textDecoration": "",
"lineColor": "#ff0000",
"fontSize": "11px",
"lineStyle": "solid",
"fontStyle": "normal",
"fontWeight": "bold",
"secondaryBackgroundColor": ""
}
}
"rowStyle1": {
"image": "",
"backgroundColor": "#90ee90",
"fontFamily": [
"helvetica",
"arial"
],
"lineThickness": "1",
"foregroundColor": "#ffffff",
"textDecoration": "",
"lineColor": "#ff0000",
"fontSize": "11px",
"lineStyle": "solid",
"fontStyle": "normal",
"fontWeight": "bold",
"secondaryBackgroundColor": ""
}
}
|
|
Управление свойствами шрифтов доступно только при конфигурировании с сервисом. Выбор шрифта не является свойством, доступным в Mashup Builder.
|
Метка виджета
"label": {
"label": "Grid Widget",
"type": "body",
"alignment": "center"
}
"label": "Grid Widget",
"type": "body",
"alignment": "center"
}
Режим правки и кнопки
Можно сконфигурировать правку в сетке в опции editButtons.
"editButtons": {
"enabled": true,
"editButton": true,
"editLevel": "row", //* Controls the edit level. Options: "row", "cell", "grid"
"DeleteButton": true,
"rowAddButton": true
"editControlVisibility": "hover", // Controls the visibility of the edit controls on the grid. Options: 'hover', 'always', 'never'}
"editControlType": "link",
"editControlLabel": "Edit",
"editControlIcon": ""
}
"enabled": true,
"editButton": true,
"editLevel": "row", //* Controls the edit level. Options: "row", "cell", "grid"
"DeleteButton": true,
"rowAddButton": true
"editControlVisibility": "hover", // Controls the visibility of the edit controls on the grid. Options: 'hover', 'always', 'never'}
"editControlType": "link",
"editControlLabel": "Edit",
"editControlIcon": ""
}
Меню конфигурации столбцов
"columnsMenu": {
"options": "both", // Controls the options that are available within the menu. Options: "none", "reorder", "show", "both"
"visibleItems": 6,
"label": "Data View"
}
"options": "both", // Controls the options that are available within the menu. Options: "none", "reorder", "show", "both"
"visibleItems": 6,
"label": "Data View"
}
Проверка
"validation" : {
"showSuccess": true,
"successIcon": "/Thingworx/MediaEntities/SuccessIcon",
"showFailure": true,
"failureIcon": "/Thingworx/MediaEntities/FailureIcon",
"showCriteria": true,
"criteriaIcon: "/Thingworx/MediaEntities/CriteriaIcon"
}
"showSuccess": true,
"successIcon": "/Thingworx/MediaEntities/SuccessIcon",
"showFailure": true,
"failureIcon": "/Thingworx/MediaEntities/FailureIcon",
"showCriteria": true,
"criteriaIcon: "/Thingworx/MediaEntities/CriteriaIcon"
}
Общие опции
"filter": {
"show": true
},
"resetButton": {
"enabled": true
},
"resizeColumns": true,
"reorderColumns": true
"show": true
},
"resetButton": {
"enabled": true
},
"resizeColumns": true,
"reorderColumns": true