Esempio di dashboard Fleet Management
Esempio di dashboard Fleet Management
Questo esempio mostra un dashboard con due viste:
- un Root state con una panoramica dei dispositivi in forma di tabella
- un Details state con una vista di dettaglio per il dispositivo selezionato
Questa struttura è adatta a flotte, gruppi di dispositivi o elenchi di impianti, in cui dapprima si visualizzano più dispositivi insieme e successivamente si consultano nel dettaglio i singoli dispositivi.
L'esempio può essere esteso allo stesso modo a un numero qualsiasi di dispositivi/alias/state/azioni.
Passaggio 1: creare il dashboard
Per prima cosa si crea un nuovo dashboard, qui con il nome Fleet Management Dashboard.
Passaggio 2: creare l'alias per la flotta
Come primo passo si crea un alias per tutti i dispositivi della flotta. Nell'esempio questo alias si chiama Fleet.
Proprietà importanti:
- Nome alias: Fleet
- Resolve as multiple entities è attivato
- Tipo di gruppo: Entity list
- dispositivi selezionati: DemoDevice_1 e DemoDevice_2
Questo alias serve successivamente come origine dati per la tabella di panoramica.
Passaggio 3: creare l'alias per la vista di dettaglio
Successivamente si crea un secondo alias con il nome Details.
Proprietà importanti:
- Nome alias: Details
- Tipo di gruppo: Entity from dashboard state
- Dispositivo di fallback nell'esempio: DemoDevice_1
Questo alias risolve sempre il dispositivo che è stato attualmente passato tramite lo state del dashboard. In questo modo lo stesso Details state può essere riutilizzato in seguito per dispositivi diversi.
Passaggio 4: creare il Details state
Affinché il dashboard possa passare dalla panoramica alla vista di dettaglio, si crea un secondo state. Nell'esempio si chiama DetailsState.
Dopodiché esistono due state:
- il Root state come vista iniziale
- il DetailsState come destinazione della navigazione di dettaglio
Tramite la selezione dello state in alto a sinistra (accanto alla selezione della finestra temporale) è possibile passare al Details state appena creato. Subito dopo la creazione il Details state è ancora vuoto.
Passaggio 5: aggiungere la tabella nel Root state
Nel Root state si inserisce ora un widget tabella, nell'esempio una Entities Table.
Come origine dati si utilizza l'alias Fleet.
In questo modo la tabella mostra tutti i dispositivi contenuti nell'alias Fleet.
Passaggio 6: configurare l'azione di riga per la navigazione
Affinché un clic su una riga della tabella porti alla vista di dettaglio, nel widget tabella si crea un'azione in Actions.
L'azione viene configurata come segue:
- Action source: On row click
- Type: Navigate to the new dashboard state
- Target dashboard state: detailsstate
- Set entity from widget resta attivato
L'ultimo punto è determinante: in questo modo il dispositivo selezionato nella riga della tabella viene passato allo state di destinazione. L'alias Details può quindi risolvere automaticamente questo dispositivo.
Passaggio 7: aggiungere un chart nel Details state
Ora si passa al DetailsState e vi si crea un widget chart.
Come origine dati questa volta non si utilizza l'alias Fleet, ma l'alias Details.
Nell'esempio viene visualizzato il canale Temperature.
Opzionale: etichetta dinamica per la legenda
Per rendere il chart più leggibile è possibile adattare il Data key.
Come etichetta nell'esempio viene impostato:
${entityName} Temperature
In questo modo nella legenda compare successivamente non solo il nome del canale, ma anche il nome del dispositivo attualmente selezionato.
Passaggio 8: creare il pulsante Home per tornare indietro
Inoltre, nel Details state si inserisce un widget pulsante che riporta alla panoramica.
L'azione viene impostata come segue:
- Action source: widget-action.body-click
- Type: Navigate to the previous dashboard state
In questo modo, al clic sul pulsante, il dashboard torna allo state aperto in precedenza.
Risultato
Dopo il salvataggio il Root state mostra la panoramica dei dispositivi:
Un clic su DemoDevice_1 apre il Details state con l'andamento della temperatura di questo dispositivo:
Un clic su DemoDevice_2 porta allo stesso Details state, questa volta però con i dati del secondo dispositivo:
Ciò dimostra che:
- la stessa pagina di dettaglio viene riutilizzata per più dispositivi
- il dispositivo selezionato viene recepito correttamente dalla tabella
- la navigazione di ritorno tramite il pulsante Home funziona
Tornare alla panoramica degli esempi: