Определение элементов строки меню с помощью таблицы данных
В дополнение к сущностям меню можно использовать структуру данных MenuEntry, чтобы создать таблицы данных, определяющие пункты меню. Каждая строка в таблице данных представляет элемент строки меню. В Mashup Builder можно привязать таблицы данных к строке меню с помощью свойств PrimaryNavData и SecondaryNavData виджета. Чтобы отобразить элементы для основной и дополнительной групп навигации, создайте два сервиса, возвращающих отформатированные таблицы данных: одну - для основного и одну - для дополнительных элементов. Для определения иерархии элементов можно использовать поля parentMenuId и MenuId, если меню содержит несколько уровней навигации. Меню без значения parentMenuId отображаются как элементы верхнего уровня в строке меню.
1. В Composer откройте вещь, шаблон вещи или любой другой тип сущности, а затем откройте вкладку Сервисы.
2. Нажмите кнопку Добавить, чтобы создать новый сервис для строки меню.
3. В разделе Информация о сервисе введите наименование сервиса, а затем щелкните Сохранить и продолжить.
4. В редакторе кода определите новую таблицу данных, используя структуру данных MenuEntry.
При необходимости используйте доступные фрагменты кода:
a. На левой панели разверните узел Фрагменты, а затем в разделе Фрагменты кода разверните Infotable.
b. Выберите фрагмент кода Create Infotable from datashape для создания таблицы данных. Откроется диалоговое окно.
c. В диалоговом окне выберите структуру данных MenuEntry, а затем щелкните Вставить фрагмент кода. Фрагмент кода добавляется в редактор кода.
5. Определите пункты меню, добавляя строки со значениями для каждого поля таблицы данных и используя для этого структуру данных. Для определения строки используется следующий синтаксис:
<infotable_name>.AddRow(<Row_Object>);
6. По завершении определения сервиса щелкните Готово, а затем Сохранить, чтобы сохранить изменения сущности.
 |
Щелкните Выполнить, чтобы предварительно просмотреть возвращаемые выходные таблицы данных из сервиса данных.
|
Дополнительные сведения о структуре данных MenuEntry см. в разделе Использование структуры данных MenuEntry.
Сервис выборки данных
Следующий сервис данных является примером создания фиксированных и динамических пунктов меню.
В первом разделе создайте таблицу данных с помощью метода CreateInfoTableFromDataShape():
let result = Resources["InfoTableFunctions"].CreateInfoTableFromDataShape({
infoTableName: "InfoTable",
dataShapeName: "MenuEntry"
});
infoTableName: "InfoTable",
dataShapeName: "MenuEntry"
});
Таблица данных сохраняется в переменной с именем result. Затем определите элементы меню верхнего уровня, используя структуру данных MenuEntry. Значения полей данных можно передавать как объекты JSON с помощью метода AddRows() таблицы данных. В следующем разделе определяется несколько статических элементов меню.
result.AddRow({
menuId: 'topMenu',
linkType: 'Menu',
});
result.AddRow({
linkDestination: 'OverviewMashup',
isDefault: true,
parentMenuId: 'topMenu',
imageURL: 'Dashboard',
linkTarget: 'Mashup', // (Popup, Mashup, New)
description: '',
menuId: 'idOverview',
linkType: 'Mashup',
title: 'Overview'
});
result.AddRow({
linkDestination: '',
isDefault: false,
parentMenuId: 'topMenu',
imageURL: 'TableView',
linkTarget: '', // (Popup, Mashup, New)
description: '',
menuId: 'idLogs',
linkType: 'Menu',
title: 'Logs'
});
result.AddRow({
linkDestination: 'AllSitesMashup',
isDefault: false,
parentMenuId: 'idLogs',
imageURL: 'SiteIcon',
linkTarget: 'Mashup', // (Popup, Mashup, New)
description: '',
menuId: 'idAllSites',
linkType: 'Mashup',
title: 'All Sites'
});
result.AddRow({
linkDestination: 'Site1Mashup',
isDefault: false,
parentMenuId: 'idLogs',
imageURL: 'SiteIcon',
linkTarget: 'Mashup', // (Popup, Mashup, New)
description: '',
menuId: 'idSite1',
linkType: 'Mashup',
title: 'Site 1'
});
result.AddRow({
linkDestination: 'Site2Mashup',
isDefault: false,
parentMenuId: 'idLogs',
imageURL: 'SiteIcon',
linkTarget: 'Mashup', // (Popup, Mashup, New)
description: '',
menuId: 'idSite2',
linkType: 'Mashup',
title: 'Site 2'
});
result.AddRow({
linkDestination: 'Site3Mashup',
isDefault: false,
parentMenuId: 'idLogs',
imageURL: 'SiteIcon',
linkTarget: 'Mashup', // (Popup, Mashup, New)
description: '',
menuId: 'idSite3',
linkType: 'Mashup',
title: 'Site 3'
});
result.AddRow({
linkDestination: '',
isDefault: false,
parentMenuId: 'topMenu',
imageURL: 'DevicesIcon',
linkTarget: '', // (Popup, Mashup, New)
description: '',
menuId: 'idDevices',
linkType: 'Menu',
title: 'Devices'
});
result.AddRow({
linkDestination: 'SearchMashup',
isDefault: false,
parentMenuId: 'topMenu',
imageURL: 'Search',
linkTarget: 'Mashup', // (Popup, Mashup, New)
description: '',
menuId: 'idSearch',
linkType: 'Mashup',
title: 'Search'
});
menuId: 'topMenu',
linkType: 'Menu',
});
result.AddRow({
linkDestination: 'OverviewMashup',
isDefault: true,
parentMenuId: 'topMenu',
imageURL: 'Dashboard',
linkTarget: 'Mashup', // (Popup, Mashup, New)
description: '',
menuId: 'idOverview',
linkType: 'Mashup',
title: 'Overview'
});
result.AddRow({
linkDestination: '',
isDefault: false,
parentMenuId: 'topMenu',
imageURL: 'TableView',
linkTarget: '', // (Popup, Mashup, New)
description: '',
menuId: 'idLogs',
linkType: 'Menu',
title: 'Logs'
});
result.AddRow({
linkDestination: 'AllSitesMashup',
isDefault: false,
parentMenuId: 'idLogs',
imageURL: 'SiteIcon',
linkTarget: 'Mashup', // (Popup, Mashup, New)
description: '',
menuId: 'idAllSites',
linkType: 'Mashup',
title: 'All Sites'
});
result.AddRow({
linkDestination: 'Site1Mashup',
isDefault: false,
parentMenuId: 'idLogs',
imageURL: 'SiteIcon',
linkTarget: 'Mashup', // (Popup, Mashup, New)
description: '',
menuId: 'idSite1',
linkType: 'Mashup',
title: 'Site 1'
});
result.AddRow({
linkDestination: 'Site2Mashup',
isDefault: false,
parentMenuId: 'idLogs',
imageURL: 'SiteIcon',
linkTarget: 'Mashup', // (Popup, Mashup, New)
description: '',
menuId: 'idSite2',
linkType: 'Mashup',
title: 'Site 2'
});
result.AddRow({
linkDestination: 'Site3Mashup',
isDefault: false,
parentMenuId: 'idLogs',
imageURL: 'SiteIcon',
linkTarget: 'Mashup', // (Popup, Mashup, New)
description: '',
menuId: 'idSite3',
linkType: 'Mashup',
title: 'Site 3'
});
result.AddRow({
linkDestination: '',
isDefault: false,
parentMenuId: 'topMenu',
imageURL: 'DevicesIcon',
linkTarget: '', // (Popup, Mashup, New)
description: '',
menuId: 'idDevices',
linkType: 'Menu',
title: 'Devices'
});
result.AddRow({
linkDestination: 'SearchMashup',
isDefault: false,
parentMenuId: 'topMenu',
imageURL: 'Search',
linkTarget: 'Mashup', // (Popup, Mashup, New)
description: '',
menuId: 'idSearch',
linkType: 'Mashup',
title: 'Search'
});
Можно также создавать элементы меню динамически с помощью данных. Следующий фрагмент кода позволяет создать элементы меню для вещей, которые определены с помощью общего шаблона вещи. Элементы связываются с главным мэшапом, связанным с каждой вещью, и отображаются в меню с именем Devices.
Используйте метод GetImplementingThings(), чтобы загрузить список вещей, определенный в шаблоне вещи DevicesTemplate. Результирующую таблицу данных можно сохранить в переменной.
let thingsList = ThingTemplates["DevicesTemplate"].GetImplementingThings();
 |
Возвращаемая таблица данных реализуется с помощью структуры данных RootEntityList.
|
Чтобы создать пункты меню для каждой вещи, преобразуйте возвращенную таблицу данных в массив, а затем выполните циклический перебор каждого элемента:
thingsList.rows.toArray().forEach(row => {
result.AddRow({
linkDestination: row.homeMashup,
isDefault: false,
parentMenuId: 'idDevices',
imageURL: 'DeviceIcon',
linkTarget: 'Mashup', // (Popup, Mashup, New)
description: '',
menuId: 'id' + row.name,
linkType: 'Mashup',
title: row.name
});
});
result.AddRow({
linkDestination: row.homeMashup,
isDefault: false,
parentMenuId: 'idDevices',
imageURL: 'DeviceIcon',
linkTarget: 'Mashup', // (Popup, Mashup, New)
description: '',
menuId: 'id' + row.name,
linkType: 'Mashup',
title: row.name
});
});
Можно передать переменной каждое значение свойства вещи в объекте JSON. На следующем рисунке показана выходная таблица данных после выполнения сервиса данных.
Таблица данных содержит 14 элементов, включая пункт меню верхнего уровня, и пять элементов, создаваемых динамически путем циклического прохода по результатам метода GetImplementingThings(). На следующем рисунке показаны элементы меню в виджете "Строка меню" во время выполнения.
Элементы группируются и отображаются в разделе Devices. При выборе ссылки открывается соответствующий главный мэшап текущей вещи.