Exemple de dashboard Fleet Management
Exemple de dashboard Fleet Management
Cet exemple présente un dashboard à deux vues :
- un Root-State avec une vue d'ensemble des appareils sous forme de tableau
- un Details-State avec une vue détaillée de l'appareil sélectionné
Cette structure convient aux flottes, aux groupes d'appareils ou aux listes d'installations pour lesquels plusieurs appareils doivent d'abord être affichés ensemble, puis consultés individuellement en détail.
L'exemple peut être étendu de la même manière à un nombre quelconque d'appareils, d'alias, de states et d'actions.
Étape 1 : créer le dashboard
Un nouveau dashboard est d'abord créé, ici sous le nom Fleet Management Dashboard.
Étape 2 : créer l'alias pour la flotte
Un alias pour tous les appareils de la flotte est créé en premier. Dans l'exemple, cet alias s'appelle Fleet.
Propriétés importantes :
- Nom de l'alias : Fleet
- Resolve as multiple entities est activé
- Type de groupe : Entity list
- Appareils sélectionnés : DemoDevice_1 et DemoDevice_2
Cet alias servira ensuite de source de données pour le tableau de synthèse.
Étape 3 : créer l'alias pour la vue détaillée
Un second alias, nommé Details, est ensuite créé.
Propriétés importantes :
- Nom de l'alias : Details
- Type de groupe : Entity from dashboard state
- Appareil de repli dans l'exemple : DemoDevice_1
Cet alias résout toujours l'appareil transmis actuellement via le state du dashboard. Le même Details-State peut ainsi être réutilisé ultérieurement pour différents appareils.
Étape 4 : créer le Details-State
Pour que le dashboard puisse passer de la vue d'ensemble à la vue détaillée, un second state est créé. Dans l'exemple, il s'appelle DetailsState.
Il existe ensuite deux states :
- le Root-State comme vue de départ
- le DetailsState comme cible de la navigation vers le détail
La sélection du state en haut à gauche (à côté de la sélection de la fenêtre temporelle) permet de basculer vers le Details-State qui vient d'être créé. Juste après sa création, le Details-State est encore vide.
Étape 5 : ajouter le tableau dans le Root-State
Un widget de tableau est maintenant ajouté dans le Root-State, dans l'exemple une Entities Table.
L'alias Fleet est utilisé comme source de données.
Le tableau affiche ainsi tous les appareils contenus dans l'alias Fleet.
Étape 6 : configurer l'action de ligne pour la navigation
Pour qu'un clic sur une ligne du tableau mène à la vue détaillée, une action est créée dans le widget de tableau sous Actions.
L'action est configurée comme suit :
- Action source : On row click
- Type : Navigate to the new dashboard state
- Target dashboard state : detailsstate
- Set entity from widget reste activé
Ce dernier point est déterminant : l'appareil sur lequel on a cliqué dans la ligne du tableau est ainsi transmis au state cible. L'alias Details peut ensuite résoudre automatiquement cet appareil.
Étape 7 : ajouter un chart dans le Details-State
On passe maintenant au DetailsState et on y crée un widget de chart.
Cette fois, la source de données n'est pas l'alias Fleet, mais l'alias Details.
Dans l'exemple, le canal Temperature est affiché.
Optionnel : libellé dynamique pour la légende
Pour obtenir un chart plus lisible, la Data-Key peut être adaptée.
Dans l'exemple, le libellé suivant est défini :
${entityName} Temperature
La légende affichera ainsi non seulement le nom du canal, mais aussi le nom de l'appareil actuellement sélectionné.
Étape 8 : créer le bouton Home pour le retour
Un widget bouton ramenant à la vue d'ensemble est en outre ajouté dans le Details-State.
L'action est définie comme suit :
- Action source : widget-action.body-click
- Type : Navigate to the previous dashboard state
Au clic sur le bouton, le dashboard revient ainsi au state ouvert précédemment.
Résultat
Après l'enregistrement, le Root-State affiche la vue d'ensemble des appareils :
Un clic sur DemoDevice_1 ouvre le Details-State avec l'évolution de la température de cet appareil :
Un clic sur DemoDevice_2 mène au même Details-State, mais cette fois avec les données du second appareil :
On constate ainsi que :
- la même page de détail est réutilisée pour plusieurs appareils
- l'appareil sélectionné est correctement repris depuis le tableau
- le retour via le bouton Home fonctionne
Retour à l'aperçu des exemples :