Widget Barra degli strumenti (con tema applicabile)
Introduzione
 |
• Il widget Barra degli strumenti è disponibile per ThingWorx 9.2.x e versioni successive.
• È disponibile come inclusione standard nella piattaforma e come componente Web che è possibile importare da un SDK.
|
Il widget Barra degli strumenti visualizza una barra degli strumenti dinamica nel mashup. Combina elementi comuni che è possibile configurare per visualizzare funzioni di uso frequente in un modulo compatto. Utilizzando le barre degli strumenti, è possibile creare filtri, attivare servizi e modificare la vista quando si utilizzano widget che gestiscono dati, ad esempio Griglia, Elenco e Grafico.
Guardare il video che segue, che illustra come configurare il widget e associare azioni a un widget Griglia. Per aprire il video in una nuova scheda, fare clic sul titolo nel riquadro di riproduzione.
Il widget Barra degli strumenti è costituito dai seguenti elementi:
• Filtro dati - Presenta una casella di filtro semplice o un widget Filtro dati basato su chip.
| | Il filtro semplice viene attivato per default quando si trascina il widget nel workspace. |
Filtro semplice | Filtro dati basato su chip |
 |  |
• Azioni - Contiene le azioni definite dall'utente
Azioni della barra degli strumenti
È possibile utilizzare il widget Barra degli strumenti per eseguire le azioni riportate di seguito su altri widget, ad esempio Griglia, Elenco e Grafico.
• Pulsante
• Elenco a discesa
• Link
• Pulsante interruttore
L'immagine seguente mostra alcune azioni di esempio.
Queste azioni, combinate con il filtro, svolgono con efficacia la funzione di barra degli strumenti per i dati nel mashup. A seconda delle esigenze, la barra degli strumenti può contenere molti pulsanti, elenchi a discesa, link o pulsanti interruttori. In caso di overflow nello spazio occupato dalle azioni, la dinamicità della barra degli strumenti consente di visualizzare le azioni definite dall'utente in un elenco a discesa. È presente un'icona di controllo overflow, che permette di visualizzare l'elenco a discesa delle azioni.
Nell'immagine che segue viene illustrato un esempio di widget Barra degli strumenti con il widget Filtro dati basato su chip e le azioni.
1. Filtro dati - Filtro dati basato su chip. È possibile impostare il filtro utilizzando la proprietà FilterType.
2. Chip - In questa regione vengono visualizzati i chip di filtro impostati dal widget Filtro dati basato su chip.
3. Azioni - In questa regione sono presenti pulsanti, elenchi a discesa, link e pulsanti interruttori.
4. Icona Controllo overflow
È possibile configurare il filtro dati utilizzando le proprietà descritte nella tabella delle proprietà seguente: Per informazioni sulla configurazione delle azioni, vedere Definizione delle azioni della barra degli strumenti mediante un'infotable.
Formato dati
• FilterData:
Quando si utilizza un widget Filtro dati basato su chip anziché una casella di filtro semplice nella barra degli strumenti, è necessario creare una Data shape con le Definizioni campi utilizzate come categorie di filtro per i dati nel mashup. È necessario mappare queste definizioni di campo. Ogni campo rappresenta una categoria visualizzata nell'elenco a discesa del filtro.
Nell'immagine seguente viene illustrato un esempio di definizioni di campo nella data shape.
Nell'immagine seguente è riportato un elenco a discesa delle categorie di filtro di esempio nel widget in base alle definizioni di campo:
• ActionsData:
Per creare le azioni nella barra degli strumenti, è necessario utilizzare la data shape ToolbarAction, disponibile come entità di sistema nella piattaforma. Utilizzare questa data shape predefinita quando si crea un servizio per formattare l'output dell'infotable e associare il servizio nel mashup per creare azioni nella barra degli strumenti. Per ulteriori informazioni, vedere Definizione delle azioni della barra degli strumenti mediante un'infotable.
Associazione di un'origine dati
• Per Filtro dati - Per associare il widget Barra degli strumenti a un'origine filtro dati, attenersi alla procedura descritta di seguito.
a. Nel pannello Dati aggiungere un servizio dati che restituisca un'infotable con il formato di dati corretto per il filtro dati.
b. Associare la proprietà All Data del servizio dati alla proprietà FilterData del widget.
c. Selezionare il widget Barra degli strumenti quindi, nel pannello Proprietà, utilizzare le proprietà per configurare il filtro dati.
d. Fare clic su Salva e quindi su Visualizza mashup.
• Per Azioni - Per associare il widget Barra degli strumenti all'origine dati delle azioni, attenersi alla procedura descritta di seguito.
a. Nel pannello Dati aggiungere un servizio dati che restituisca un'infotable con il formato di dati corretto per le azioni.
b. Associare la proprietà All Data del servizio dati alla proprietà ActionsData del widget.
c. Quando si associa l'origine dati, nel pannello Proprietà viene visualizzato un insieme di nuove proprietà ed eventi per ciascuna azione definita nel servizio.
d. Selezionare il widget Barra degli strumenti quindi, nel pannello Proprietà, utilizzare le proprietà indicate di seguito per configurare le azioni su altri widget quali griglie, elenchi e grafici nel mashup.
| | Il nome della proprietà viene visualizzato in base al valore di actionId nel servizio. |
Azione | Nome proprietà/evento | Descrizione | Esempio |
|---|---|---|---|
Pulsante | <actionId>_Clicked | Attiva un evento associabile quando si fa clic sul pulsante. | Button1_Clicked |
<actionId>_Disabled | Disattiva l'azione pulsante sulla barra degli strumenti. | Button1_Disabled | |
<actionId>_Visible | Controlla la visibilità dell'azione sulla barra degli strumenti. | Button1_Visible | |
Elenco a discesa | <actionId>_Disabled | Disattiva l'azione elenco a discesa sulla barra degli strumenti. | Dropdown1_Disabled |
<actionId>_SelectedText | Questa proprietà associabile consente di impostare e recuperare il valore del testo selezionato nell'azione elenco a discesa. | Dropdown1_SelectedText | |
<actionId>_SelectedTextChanged | Attiva un evento associabile quando si modifica il testo selezionato nell'elenco a discesa. | Dropdown1_SelectedTextChanged | |
<actionId>_Visible | Controlla la visibilità dell'azione elenco a discesa sulla barra degli strumenti. | Dropdown1_Visible | |
Link | <actionId>_Disabled | Disattiva l'azione link sulla barra degli strumenti. | Link1_Disabled |
<actionId>_Visible | Controlla la visibilità dell'azione link sulla barra degli strumenti. | Link1_Visible | |
Pulsante interruttore | <actionId>_Disabled | Disattiva l'azione pulsante interruttore sulla barra degli strumenti. | Toggle1_Disabled |
<actionId>_State | Questa proprietà associabile consente di impostare e recuperare lo stato dell'azione pulsante interruttore. | Toggle1_State | |
<actionId>_StateChanged | Attiva un evento associabile quando si modifica lo stato dell'azione pulsante interruttore. | Toggle1_StateChanged | |
<actionId>_Visible | Controlla la visibilità dell'azione pulsante interruttore sulla barra degli strumenti. | Toggle1_Visible |
f. Fare clic su Salva e quindi su Visualizza mashup.
Tabella delle proprietà
Le proprietà del widget Barra degli strumenti sono elencate di seguito.
Nome proprietà | Descrizione | Tipo di base | Valore di default | Associabile? (Y/N) | Localizzabile? (Y/N) | ||
|---|---|---|---|---|---|---|---|
ActionsData | Origine dati dell'infotable che viene formattata utilizzando la data shape ToolbarActionper visualizzare e configurare le azioni della barra degli strumenti. | INFOTABLE | n/d | Y | N | ||
CategoryLabel | Testo visualizzato sopra l'elenco a discesa delle categorie di filtro. | STRING | Filtra per | N | Y | ||
ConditionLabel | Testo visualizzato sopra l'elenco a discesa delle condizioni di filtro. | STRING | Condizione | N | Y | ||
CustomClass | Classe CSS definita dall'utente da applicare all'elemento div superiore del widget. È possibile inserire più classi, separate da uno spazio. | STRING | n/d | Y | N | ||
Disabled | Disattiva il widget nel mashup. Il widget viene visualizzato nel mashup, ma non è possibile farvi clic sopra o selezionarlo. | BOOLEAN | False | Y | N | ||
FilterChipPosition | Imposta la posizione del contenitore di chip del filtro dati. È possibile visualizzare i chip nella parte superiore o inferiore del widget. | STRING | In basso | N | N | ||
FilterData | Origine dell'infotable contenente i dati degli elementi da visualizzare nel menu a discesa del filtro chip. | INFOTABLE | n/d | Y | N | ||
FilterDateOrder | Imposta l'ordine del giorno, del mese e dell'anno per le date visualizzate nel filtro chip. Le opzioni sono Automatico, Giorno-mese-anno,Mese-giorno-anno e Anno-mese-giorno. | STRING | Automatico | N | N | ||
FilterDisclosureType | Imposta il tipo di elemento utilizzato per mostrare e nascondere i chip di filtro come Mostra link o Pulsante. | STRING | Mostra link | N | N | ||
FilterFormatToken | Formatta le date del filtro chip utilizzando lo schema “DD-MM-YY”. Il formato rileva la distinzione tra maiuscole e minuscole e ignora la proprietà FilterDateOrder. Questa sintassi segue il formato ISO. | STRING | n/d | N | Y | ||
FilterType | Imposta il tipo di filtro. È possibile visualizzare una casella di filtro semplice o utilizzare il widget Filtro dati basato su chip. Selezionare Nessuno per nascondere il filtro.
| STRING | Casella Filtro | N | N | ||
HideFilterSeparator | Nasconde la linea verticale utilizzata per separare il filtro dati sulla barra degli strumenti.
| BOOLEAN | False | N | N | ||
LatitudeLabel | Testo visualizzato sopra la casella di input per la latitudine quando si filtra in base alla posizione utilizzando il filtro chip. | STRING | Latitudine | N | Y | ||
LongitudeLabel | Testo visualizzato sopra la casella di input per la longitudine quando si filtra in base alla posizione utilizzando il filtro chip. | STRING | Longitudine | N | Y | ||
Query | Interrogazione JSON utilizzata per recuperare l'insieme di dati filtrato. | QUERY | n/d | Y | N | ||
QueryChanged | Attiva un evento quando cambia l'interrogazione del widget Filtro. | n/d | n/d | Y | N | ||
RangeEndValueLabel | Testo visualizzato sopra la seconda casella di input quando si filtra un intervallo di valori utilizzando il filtro chip. | STRING | Valore 2 | N | Y | ||
RangeStartValueLabel | Testo visualizzato sopra la prima casella di input quando si filtra un intervallo di valori utilizzando il filtro chip. | STRING | Valore 1 | N | Y | ||
ResetToDefaultValue | Ripristina i valori di default degli input di questo widget. | n/d | n/d | Y | N | ||
ShowCategoryListFilter | Aggiunge una casella di filtro all'elenco a discesa per le categorie di filtro. | BOOLEAN | False | Y | N | ||
ShowHideFilters | Nasconde i controlli di rivelazione ed espande il contenitore di chip del widget Filtro dati. | BOOLEAN | True | N | N | ||
SortFilter | Ordina alfabeticamente l'elenco di opzioni delle categorie di filtro di dati. | BOOLEAN | True | N | N | ||
SimpleFilterChanged | Attiva un evento quando si modifica la stringa nella casella di filtro. | n/d | n/d | Y | N | ||
SimpleFilterHintText | Imposta il testo del suggerimento per la casella di filtro. | STRING | Filtro | N | Y | ||
SimpleFilterLabel | Imposta l'etichetta della casella di filtro. | STRING | n/d | Y | Y | ||
SimpleFilterPosition | Imposta la posizione della casella di filtro sulla barra degli strumenti. È possibile posizionare la casella A sinistra, A destra o Al centro. Quando si imposta la posizione Al centro, nell'elenco viene visualizzata una proprietà SimpleFilterAlignment. | STRING | A sinistra | N | N | ||
SimpleFilterAlignment | Imposta l'allineamento della casella di filtro quando viene posizionata al centro sulla barra degli strumenti. È possibile allineare la casella A sinistra, A destra o Al centro. | STRING | A sinistra | Y | N | ||
SimpleFilterString | Consente di impostare o recuperare la stringa all'interno della casella di filtro semplice. | STRING | n/d | Y | N | ||
SimpleFilterWidth | Imposta la larghezza della casella di filtro. | NUMBER | 273 | Y | N | ||
TabSequence | Imposta il numero di sequenza del widget quando si preme il tasto TAB. | NUMBER | 0 | N | N | ||
UnitsLabel | Testo visualizzato sopra l'elenco a discesa per impostare le unità quando si filtra in base a posizione o data utilizzando il filtro chip. | STRING | Unità | N | Y | ||
ValueLabel | Testo visualizzato sopra la casella di input contenente il valore della condizione nel filtro chip. | STRING | Valore | N | Y |