Définition des éléments de la barre de menus à l'aide d'une table d'informations
Outre les entités de menu, vous pouvez utiliser la forme de données MenuEntry pour créer une table d'informations définissant vos éléments de menu. Chaque ligne de la table d'informations correspond à un élément de la barre de menus. Vous pouvez lier les tables d'informations à votre barre de menus dans le Mashup Builder à l'aide des propriétés de widget PrimaryNavData et SecondaryNavData. Pour afficher les éléments des groupes de navigation principale et secondaire, créez deux services qui renvoient une table d'informations formatée : l'un pour les éléments principaux et l'autre pour les éléments secondaires. Vous pouvez utiliser les champs parentMenuId et MenuId pour définir la hiérarchie des éléments lorsque le menu contient plusieurs niveaux de navigation. Les menus sans valeur parentMenuId s'affichent sous la forme d'éléments de niveau supérieur dans la barre de menus.
1. Dans Composer, ouvrez un objet, un modèle d'objet ou tout autre type d'entité, puis ouvrez l'onglet Services.
2. Cliquez sur Ajouter pour créer un nouveau service pour la barre de menus.
3. Sous Infos service, entrez le nom du service, puis cliquez sur Enregistrer et continuer.
4. Dans l'éditeur de code, définissez une nouvelle table d'informations à l'aide de la forme de données MenuEntry.
Si vous le souhaitez, utilisez les extraits de code disponibles :
a. Dans le volet de gauche, développez Extraits, puis sous Extraits de code, développez Infotable.
b. Sélectionnez l'extrait de code Create Infotable from datashape pour créer une table d'informations. Une boîte de dialogue s'ouvre.
c. Dans la boîte de dialogue, sélectionnez la forme de données MenuEntry, puis cliquez sur Insérer un extrait de code. L'extrait de code est ajouté dans l'éditeur de code.
5. Définissez les éléments de menu en ajoutant des lignes avec des valeurs pour chaque champ de la table d'informations à l'aide de la forme de données. La syntaxe pour définir une ligne est la suivante :
<infotable_name>.AddRow(<Row_Object>);
6. Une fois votre service défini, cliquez sur Terminé, puis sur Enregistrer pour enregistrer les modifications apportées à l'entité.
 |
Cliquez sur Exécuter pour afficher un aperçu de la table d'informations de sortie renvoyée par le service de données.
|
Pour plus d'informations sur la forme de données MenuEntry, consultez la rubrique Utilisation de la forme de données MenuEntry.
Exemple de service de données
L'exemple de service de données suivant illustre la façon de créer des éléments de menu fixes et dynamiques.
Dans la première section, créez une table d'informations à l'aide de la méthode CreateInfoTableFromDataShape() :
let result = Resources["InfoTableFunctions"].CreateInfoTableFromDataShape({
infoTableName: "InfoTable",
dataShapeName: "MenuEntry"
});
La table d'informations est stockée dans une variable nommée result. Ensuite, définissez les éléments de menu de niveau supérieur à l'aide de la forme de données MenuEntry. Vous pouvez transmettre les valeurs de champ de données sous la forme d'objets JSON à l'aide de la méthode de table d'informations AddRows(). La section suivante définit plusieurs éléments de menu statiques.
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'
});
Vous pouvez également générer dynamiquement des options de menu au moyen de données. L'extrait de code suivant permet de générer des éléments de menu pour les objets définis à l'aide d'un modèle d'objet commun. Les éléments renvoient vers l'application composite d'accueil associée à chaque objet et s'affichent sous un menu nommé Devices.
Utilisez la méthode GetImplementingThings() pour récupérer la liste des objets définis par le modèle d'objet DevicesTemplate. Vous pouvez stocker le résultat de la table d'informations dans une variable.
let thingsList = ThingTemplates["DevicesTemplate"].GetImplementingThings();
 |
La table d'informations renvoyée est implémentée à l'aide de la forme de données RootEntityList.
|
Pour générer des options de menu pour chaque objet, convertissez la table d'informations renvoyée en tableau, puis itérez sur chaque élément :
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
});
});
Vous pouvez transmettre une variable à chaque valeur de propriété d'objet contenue dans l'objet JSON. La sortie de la table d'informations après l'exécution du service de données est illustrée ci-dessous :
La table d'informations contient 14 éléments, dont un élément de menu de niveau supérieur avec cinq éléments générés de manière dynamique par itération sur les résultats de la méthode GetImplementingThings(). La capture d'écran ci-après vous montre les éléments de menu tels que disponibles sur le widget Barre de menus à l'exécution.
Les éléments sont regroupés et affichés sous Devices. Lorsque vous cliquez sur un lien, l'application composite d'accueil correspondante de l'objet actif s'ouvre.