Mashup Builder > Widget > Widget standard > Widget Raccolta
Widget Raccolta
Il widget Raccolta è un widget avanzato che consente di contenere una serie di mashup ripetuti all'interno di una raccolta. Utilizza un servizio infotable per definire dinamicamente il contenuto visivo. È simile al widget Ripetitore, ma contiene più proprietà che offrono un maggior numero di opzioni e prestazioni migliori. Si consiglia di utilizzare il widget Raccolta anziché il widget Ripetitore.
Funzionalità principali
Oltre 60 proprietà che consentono un controllo dettagliato su spaziatura, riempimento, intestazioni, piè di pagina, sezioni, animazioni e altro
Include la possibilità di aggiungere dati dinamici a ogni cella
Esegue prestazioni migliori rispetto al widget Ripetitore. Per migliorare l'utilizzo della memoria, il widget Raccolta memorizza nella cache una quantità significativa di informazioni per la visualizzazione. La consultazione e lo scorrimento in fase di esecuzione sono più rapidi e più agevoli rispetto al widget Ripetitore.
Nel widget Raccolta è possibile utilizzare due viste diverse.
Layout di flusso: reattivo, wrapping orizzontale. Questo layout è molto simile al widget Ripetitore.
Layout tabella: impilamento verticale, consente un mashup per riga.
Panoramica sull'utilizzo
MashupPropertyBinding è una proprietà importante nel widget Raccolta. Deve essere fornita una stringa JSON che associ i nomi dei campi infotable ai parametri del mashup in modo che i dati passino attraverso di essi. Ad esempio:
{
"events": "eventsName",
"min_temp": "minTemp",
"max_temp": "maxTemp",
"precipitation": "precipitation",
"image": "image",
"wind": "wind",
"sourceType": "sourceType",
"date": "date",
"week": "week",
"id": "rowId"
}
La proprietà MashupGlobalPropertyBinding opzionale consente di aggiungere proprietà personalizzate definite dall'utente per il passaggio in dati variabili che devono apparire uguali in ogni cella della raccolta, ad esempio il nome di un prodotto. Prenderne in considerazione l'utilizzo per tutti i dati che altrimenti dovrebbero essere parte del mashup incorporato o passati in modo ridondante attraverso il servizio a ogni riga tramite MashupPropertyBinding.
MashupGlobalPropertyBinding utilizza lo stesso formato JSON, ma ciascuna voce deve contenere un nome di proprietà univoco (definito dall'utente) come chiave e un tipo di base ThingWorx come valore (ad esempio STRING, NUMBER, BOOLEAN). Ogni voce fornisce una proprietà personalizzata associabile al widget Raccolta quando si esce dal campo MashupGlobalPropertyBinding.
Compilazione del widget con i dati
È possibile configurare il widget Raccolta in modo che venga compilato con mashup in fase di esecuzione in uno dei modi descritti di seguito.
Definire un mashup impostando la proprietà su un nome di mashup.
Creare un'associazione alla proprietà del nome Mashup.
Utilizzare un servizio per fornire un nome di mashup per ogni cella.
Definire un mashup da visualizzare quando una cella viene selezionata o è vuota.
La proprietà ItemLoadBehavior consente di specificare la modalità di caricamento dei dati. Per default, la proprietà è impostata su Carica/Scarica, che comporta il caricamento dei dati solo per gli elementi visibili all'interno della raccolta. L'utilizzo di questa opzione per i mashup che usano l'evento OnLoad può comportare un numero elevato di chiamate al server in un determinato momento. Ciò può causare problemi di prestazioni, che è possibile migliorare caricando tutti i dati quando il widget viene inizialmente caricato in fase di esecuzione. Per caricare i dati per tutti gli elementi, impostare la proprietà sull'opzione Carica tutti.
* 
Evitare di eseguire servizi all'interno di ogni cella di mashup di una raccolta. L'esecuzione ripetuta di più servizi per ciascuna cella di una raccolta prevede un numero significativo di richieste di rete. Quando viene inizializzato il mashup padre, tutti i servizi all'interno del mashup di una raccolta vengono eseguiti ripetutamente, il che può causare problemi di prestazioni significativi durante il caricamento di ogni cella. Per evitare problemi di prestazioni, eseguire i servizi dati nel mashup padre, quindi passare i dati ai mashup incorporati utilizzando i parametri di mashup e la proprietà MashupPropertyBinding. Per ulteriori informazioni sull'utilizzo dei parametri, vedere Configurazione dei parametri del mashup.
Limiti noti del browser
Il widget Raccolta viene eseguito e caricato più velocemente su Chrome e Firefox. Funziona bene sull'edge. I tempi di caricamento sono più lunghi e le prestazioni più lente su Internet Explorer 11.
Proprietà
Per informazioni sulle proprietà comuni del widget, vedere Widget. Le proprietà specifiche del widget Raccolta sono descritte nella tabella riportata di seguito.
Nome proprietà
Descrizione
Tipo di base
Valore di default
Associabile? (Y/N)
Localizzabile? (Y/N)
Data
Rappresenta l'origine dati del widget.
* 
L'infotable deve contenere un ID univoco.
INFOTABLE
n/d
Y
N
ItemLoadBehavior
Specifica il modo in cui i dati vengono caricati per gli elementi all'interno del widget Raccolta. È possibile selezionare una delle opzioni seguenti:
Carica/scarica - Carica i dati man mano che si scorre o si ridimensiona la pagina del browser in una raccolta. I dati per gli elementi che non sono visibili vengono scaricati.
* 
Il caricamento dei dati mediante l'evento OnLoad di un mashup può causare problemi di prestazioni quando questa opzione è selezionata.
Carica tutto - Carica i dati per tutti gli elementi all'interno del widget.
STRING
Carica/Scarica
N
N
View
Tipi di layout. Le opzioni sono Flow e Table. Il flusso reattivo e la tabella simile a una griglia consentono un mashup per riga.
STRING
Flusso
Y
N
Mashup
Il mashup da utilizzare per gli elementi di dati.
MASHUPNAME
n/d
Y
N
MashupHeight
L'altezza della cella di default.
INTEGER
120
N
N
MashupWidth
La larghezza della cella di default.
INTEGER
400
N
N
UIDField
Rappresenta l'identificatore univoco di un elemento della raccolta. Per ottenere risultati migliori con l'ordinamento, deve essere il tipo di base NUMBER. Questo può essere qualsiasi tipo di campo che identifica un elemento in modo univoco. Quando si utilizza un servizio esistente, se per un campo è selezionato l'aspetto Chiave principale, deve essere utilizzato per UIDField. Se una chiave principale non è definita, considerare l'utilizzo di un servizio per combinare una infotable esistente in una nuova che includa un campo con un tipo di base GUID o NUMBER impostato come chiave principale. Ciò può anche richiedere l'aggiunta di una data shape che includa il campo GUID.
INFOTABLE
n/d
N
N
SortField
Se impostato o associato, identifica il campo infotable (specificato nella proprietà Data) in base al quale vengono ordinati i contenuti della sezione. L'ordinamento viene eseguito sul lato client e non influisce sull'infotable di origine o su altri widget associati all'insieme di dati. Questa opzione non è richiesta, ma non vi è alcuna garanzia che un servizio restituisca sempre le righe in un determinato ordine. Prendere in considerazione l'impostazione nello stesso campo di UIDField.
INFOTABLE
n/d
Y
N
SortAscending
Utilizzato con SortField. Se attivato, l'ordinamento viene eseguito in ordine crescente, altrimenti in ordine decrescente.
BOOLEAN
n/d
Y
N
SectionField
Facoltativo. Rappresenta l'identificatore di sezione in base al quale raggruppare gli elementi. Se impostato, gli elementi vengono raggruppati in sezioni. È disponibile il supporto per una sola sezione. Una sezione raggruppa le righe con un valore comune presente in SectionField. Ad esempio, può essere utilizzato per raggruppare le righe che contengono un campo numero di settimana in sezioni settimanali. L'intestazione e il piè di pagina possono essere quindi utilizzati per mostrare dove inizia e finisce ogni settimana.
INFOTABLE
n/d
N
N
SectionInsetLeft
Se si utilizzano le sezioni, questo è un modo per far rientrare o separare visivamente i contenuti delle sezioni a sinistra.
INTEGER
0
N
N
SectionInsetTop
Se si utilizzano le sezioni, questo è un modo per far rientrare o separare visivamente i contenuti delle sezioni in alto.
INTEGER
0
N
N
SectionInsetRight
Se si utilizzano le sezioni, questo è un modo per far rientrare o separare visivamente i contenuti delle sezioni a destra.
INTEGER
0
N
N
SectionInsetBottom
Se si utilizzano le sezioni, questo è un modo per far rientrare o separare visivamente i contenuti delle sezioni in basso.
INTEGER
0
N
N
LeftAlignFinalRow
Se attivato, la riga finale in ogni sezione viene allineata a sinistra anziché al centro.
BOOLEAN
n/d
N
N
FlowLayoutGravity
Controlla il flusso delle celle nella relativa riga.
Le opzioni includono: Bordo, Spaziatura, Al centro o Espansione.
Bordo - Le celle si allineano al lato più vicino che le contiene, altrimenti mantengono una spaziatura uniforme tra loro.
Spaziatura - Le celle mantengono una spaziatura uniforme tra di loro e i lati del widget che le contiene.
Al centro - Le celle sono centrate all'interno della larghezza disponibile e visualizzano il numero di celle di ogni riga che si adatta.
Espansione - Le celle si espandono per riempire la larghezza disponibile, anche oltre l'impostazione della proprietà MashupWidth.
STRING
n/d
N
N
FlowLayoutAlignment
Deve essere usato con il layout di flusso. Controlla come le celle vengono allineate verticalmente nella relativa riga.
Questa proprietà è utile per controllare l'allineamento verticale quando le altezze delle celle variano. Ciò è prevedibile quando si ottiene l'altezza delle celle da un servizio tramite la proprietà CellHeightField o quando si utilizza la proprietà MashupNameField e si imposta la proprietà UseMashupDimensions su true.
In alto - Allinea le celle adiacenti alla parte superiore della riga.
Al centro - Allinea le celle adiacenti al centro della riga.
In basso - Allinea le celle adiacenti alla parte inferiore della riga.
Espansione - Le celle adiacenti regolano l'altezza in modo che corrisponda alla cella più alta.
STRING
Al centro
N
N
FlowLayoutContentGravity
Deve essere usato con il layout di flusso. Controlla come il contenuto viene allineato verticalmente all'interno della vista della raccolta quando la relativa dimensione è inferiore a quella della vista della raccolta.
Le opzioni disponibili sono In alto, Al centro e In basso.
In alto - Le celle riempiono lo spazio a partire dall'alto.
Al centro - Le celle riempiono lo spazio a partire dal centro in verticale.
In basso - Le celle riempiono lo spazio a partire dal basso.
STRING
n/d
N
N
RowSpacing
Controlla la spaziatura tra intestazioni, righe e piè di pagina.
INTEGER
44
N
N
MinimumSpacing
Controlla la quantità minima di spaziatura orizzontale tra le celle.
TopPadding
Controlla il riempimento del margine superiore e del primo elemento.
INTEGER
22
N
N
BottomPadding
Controlla il riempimento del margine inferiore e dell'ultimo elemento.
INTEGER
22
N
N
MashupNameField
Fornisce un nome di mashup da utilizzare per gli elementi di dati. Se impostata, questa proprietà sostituisce le selezioni in Mashup e SelectedFieldMashup.
PinHeadersToTop
Se attivata, l'intestazione della sezione attualmente visibile è bloccata sul bordo superiore del widget mentre si scorre il relativo contenuto.
BOOLEAN
n/d
N
N
PinFootersToBottom
Se attivata, il piè di pagina della sezione attualmente visibile è bloccato sul bordo inferiore del widget mentre si scorre il relativo contenuto.
BOOLEAN
n/d
N
N
MashupPropertyBinding
Stringa JSON che associa i nomi dei campi infotable ai parametri del mashup. Ogni nome chiave deve essere un campo infotable utilizzato per fornire dati a ciascun mashup incorporato. Ogni valore deve essere il nome di un parametro di mashup corrispondente associato a un widget nel mashup incorporato nel widget Raccolta.
* 
Utilizzare un editor di testo per copiare e incollare la stringa JSON per evitare di aggiungere una formattazione non necessaria.
STRING
n/d
N
N
MashupGlobalPropertyBinding
Facoltativo. Stringa JSON utilizzata per creare una proprietà personalizzabile associabile. Questa proprietà è utile per l'associazione dinamica di dati che devono essere uguali in tutti i mashup incorporati, come il nome di un prodotto, l'indicatore di stato globale e così via. Ogni nome di chiave può essere un qualsiasi nome di proprietà consentito che si desidera aggiungere al widget. Ogni valore deve essere un tipo di dati che viene assegnato alla proprietà al momento dell'aggiunta, ovvero "STRING", "NUMBER", "BOOLEAN". La proprietà viene aggiunta al widget non appena si esce dalla proprietà MashupGlobalPropertyBinding ed è convalidata. Scorrere verso il basso nella finestra delle proprietà o digitare il relativo nome nel filtro delle proprietà. Questo può essere utilizzato per associare i dati alla proprietà personalizzata in modo da passarli in un parametro di mashup del mashup incorporato nel widget.
STRING
n/d
N
N
CellWidthField
Campo per definire la larghezza di default delle celle da un servizio. I valori sostituiscono CellWidth.
CellHeightField
Campo per definire l'altezza di default delle celle da un servizio. I valori sostituiscono CellHeight.
CellMashupSelectedField
Facoltativo. Se specificato, rappresenta il parametro di mashup che riceverà lo stato selezionato dell'oggetto a cui è associato. Ciò consente di identificare un campo infotable utilizzato per fornire lo stato di selezione di ciascuna cella nel widget.
STRING
n/d
N
N
UseMashupDimensions
Facoltativo. Deve essere usato con la proprietà MashupNameField e i mashup di celle statiche. Adatta la dimensione della cella al mashup che contiene.
AllowSelection
Se attivato, le celle possono essere selezionate, altrimenti le celle non saranno selezionabili da questo widget Raccolta.
BOOLEAN
n/d
N
N
MultiSelect
Attiva la selezione multipla. Le selezioni multiple nel widget Raccolta non richiedono CTRL + click o SHIFT + click. Fare clic per selezionare tutte le celle necessarie e fare clic sulle celle per deselezionarle. La selezione dell'intervallo tramite mouse non è supportata.
BOOLEAN
n/d
N
N
HasSelectedCells
Viene impostato su true ogni volta che in questo widget Raccolta è presente almeno una cella selezionata.
BOOLEAN
false
Y
N
SelectedCellsCount
Contiene il numero di celle selezionate nella vista della raccolta.
INTEGER
0
Y
N
ScrollsToSelectedCell
Consente di modificare la selezione per far scorrere la raccolta fino alla prima cella selezionata.
BOOLEAN
n/d
N
N
AutoSelectFirstCell
Quando i dati vengono aggiornati e non viene selezionata un'altra cella, il widget Raccolta seleziona automaticamente la prima cella disponibile.
BOOLEAN
n/d
N
N
SelectedItems
Fornisce un'associazione per impostare le celle attualmente selezionate da un servizio. La selezione più recente in una sezione multipla viene aggiornata nella raccolta.
INFOTABLE
n/d
Y
N
SelectedMashupName
Facoltativo. Sostituisce CellSelectedStyle se è impostato. Definisce un mashup che sostituirà quello definito nelle proprietà Mashup o MashupFieldName quando una cella viene selezionata in fase di esecuzione. Nella maggior parte dei casi, SelectedMashup deve avere le stesse dimensioni del mashup di default. Può anche avere alcuni, tutti o più parametri di mashup come mashup di default. Un caso di utilizzo per questa capacità può essere quello di fornire una vista più dettagliata dei dati quando la cella è selezionata o di rivelare ulteriori opzioni di selezione o di filtraggio sui dati presentati.
MASHUPNAME
n/d
N
N
HandleSelectionUpdates
Se attivato, la raccolta riceve e trasmette gli aggiornamenti di selezione al relativo servizio dati. In questo modo si alterna il solito modo in cui i widget di dati che condividono un servizio comune in un mashup aggiornano le rispettive selezioni. Ad esempio, quando si fa clic su una riga della griglia e viene evidenziato un punto del grafico associato allo stesso servizio.
BOOLEAN
n/d
N
N
CellStyle
Controlla lo sfondo delle celle. Viene utilizzata solo la proprietà del colore di sfondo dello stile.
STILE
n/d
N
N
CellAlternateStyle
Controlla lo sfondo alternativo delle celle. Viene utilizzata solo la proprietà del colore di sfondo dello stile.
Tutte le celle utilizzeranno il colore di sfondo CellStyle se non viene impostato un colore di sfondo CellAlternateStyle.
STILE
n/d
N
N
CellSelectedStyle
Controlla il colore di sfondo delle celle selezionate. Viene utilizzata solo la proprietà del colore di sfondo dello stile.
STILE
n/d
N
N
CellHoverStyle
Controlla il colore di sfondo delle celle al passaggio del mouse. Viene utilizzata solo la proprietà del colore di sfondo dello stile.
STILE
n/d
N
N
CellActiveStyle
Controlla il colore di sfondo delle celle quando vengono selezionate. Viene utilizzata solo la proprietà del colore di sfondo dello stile.
STILE
n/d
N
N
RippleEffectStyle
Questo deve essere usato con la proprietà UseRippleEffect. Viene utilizzata solo la proprietà del colore di sfondo di questo stile, che viene applicata all'effetto di animazione a ondulazione.
STILE
n/d
N
N
UseRippleEffect
Se attivato, viene utilizzato un effetto di animazione a ondulazione quando si fa clic sulle celle. Se si utilizza questa opzione, le celle verranno impostate su una proprietà di overflow nascosta. L'effetto ondulazione è visibile solo in parti della cella che non contengono un mashup con un colore di sfondo (deve essere impostato su trasparente).
BOOLEAN
n/d
N
N
CellBorderRadius
Raggio di bordo facoltativo da applicare alle celle. Quando questo valore è impostato su una stringa non vuota, ad esempio 12px, le celle avranno la proprietà di overflow impostata su nascosta.
STRING
n/d
N
N
CellBoxShadow
Se impostato su una stringa non vuota, viene utilizzato come ombra della casella per le celle. Le dimensioni dell'impostazione dell'ombra seguono la specifica e la sintassi dell'ombra della casella CSS.
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
Le dimensioni dell'ombra devono essere considerate in relazione alle proprietà di spaziatura per evitare ombre sovrapposte alle celle adiacenti.
* 
Le impostazioni CSS inset, initial e inherit non sono consigliate.
STRING
n/d
N
N
CellPointer
Facoltativo. Imposta in modo esplicito l'aspetto del puntatore del mouse quando si passa con il mouse sulle celle, anziché fare affidamento sul comportamento del cursore del browser di default.
STRING
Automatico
N
N
CellMenuStates
Facoltativo. Fornisce un menu accessibile facendo clic con il pulsante destro del mouse sulle celle. Le opzioni di menu sono definite dalla definizione di stato selezionata in questa proprietà. È possibile utilizzare questa funzione per fornire la navigazione ad altri mashup.
STATEDEFINITION
DefaultMenuStates
N
N
CellMenuStatesIconSize
Questo deve essere usato con la proprietà CellMenuStates. Le icone dei menu vengono impostate su questa dimensione. Il valore massimo è 64.
INTEGER
n/d
N
N
CellMenuStatesIconGravity
Deve essere usato con la proprietà CellMenuStates. Controlla il modo in cui l'icona è ancorata al testo nella voce di menu. Le opzioni sono A sinistra, Sopra, A destra e Sotto
STRING
n/d
N
N
CellMenuStatesOrientation
Deve essere usato con la proprietà CellMenuStates. Controlla la disposizione delle voci di menu. Le opzioni sono Orizzontale o Verticale.
STRING
n/d
N
N
ShowHeaders
Se attivato e si utilizzano le sezioni, ogni sezione avrà un'intestazione.
BOOLEAN
n/d
N
N
HeaderMashupName
Mashup da utilizzare per le intestazioni, deve essere utilizzato con le proprietà SectionFielde ShowHeaders. Il mashup di intestazione deve essere reattivo per evitare problemi con l'inserimento nei layout senza mostrare barre di scorrimento.
MASHUPNAME
n/d
N
N
HeaderSectionParam
Un parametro di mashup, che deve essere impostato nel mashup di intestazione per ricevere il valore dal campo di sezione del widget Raccolta definito nella proprietà SectionField.
STRING
n/d
N
N
HeaderHeight
Altezza del mashup di intestazione.
INTEGER
44
N
N
ShowFooters
Se attivato e si utilizzano le sezioni, ogni sezione avrà un piè di pagina.
BOOLEAN
n/d
N
N
FooterMashupName
Il mashup da utilizzare per i piè di pagina. Questo deve essere usato con le proprietà SectionField e ShowFooters. Il mashup dei piè di pagina deve essere reattivo per evitare problemi con l'inserimento nei layout senza mostrare barre di scorrimento.
MASHUPNAME
n/d
N
N
FooterSectionParam
Il parametro di mashup che riceve l'identificatore di sezione.
STRING
n/d
N
N
FooterHeight
Altezza del mashup dei piè di pagina. Questo deve essere usato con le proprietà SectionField e ShowFooters.
INTEGER
44
N
N
EmptyMashupName
Se specificato, questo mashup viene visualizzato quando l'insieme di dati è vuoto. Ciò può accadere quando si utilizza un widget Filtro data con il servizio utilizzato per compilare il widget Raccolta. Questo può essere usato per visualizzare un mashup che contiene un messaggio "Nessun risultato".
MASHUPNAME
n/d
N
N
PlaysIntroAnimation
Attiva un'animazione di transizione di scorrimento delle celle dopo il caricamento dei dati.
BOOLEAN
n/d
N
N
Deselect
La raccolta deseleziona tutte le righe dal relativo insieme di dati quando richiamate.
n/d
Y
N
SelectAll
La raccolta seleziona tutte le righe nel relativo insieme di dati quando richiamate.
n/d
Y
N
Eventi
CellMenuStates - La proprietà CellMenuStates aggiunge un evento per ogni stato nel tipo di base StateDefinition aggiunto al widget Raccolta. Il nome di ciascun evento corrisponderà al nome di ogni stato.
CellWasClicked - Si attiva ogni volta che si clicca o si tocca una cella.
CellWasRightClicked - Si attiva ogni volta che si fa clic con il pulsante destro del mouse.
CellWasDoubleClicked - Si attiva ogni volta che si fa doppio clic o si tocca due volte su una cella.
CellWasLongClicked - Si attiva ogni volta che si clicca a lungo su una cella o si tocca a lungo.
MashupPropertyBinding - La chiave in ogni voce della proprietà MashupPropertyBinding genera una proprietà di associazione di origine per il widget Raccolta. Queste possono essere utilizzate per associare i dati a livello di cella dal widget Raccolta ad altri widget in un mashup quando si fa clic su una cella.
È stato utile?