Configurazione della griglia mediante i dati JSON

Mashup Builder > Widget > Widget standard > Widget Griglia > Configurazione della griglia mediante i dati JSON

Oltre alle proprietà del widget e alle proprietà di configurazione delle colonne, è possibile configurare dinamicamente le proprietà del widget Griglia utilizzando i dati JSON nei modi descritti di seguito.

• Creare un servizio dati personalizzato che generi dati di configurazione.

• Aggiungere i dati di configurazione manualmente alla proprietà Configuration del widget in Mashup Builder.

Utilizzo di un servizio dati JSON

Per visualizzare i dati di una griglia che utilizza la configurazione dinamica, è necessario creare i dati di configurazione in uno dei modi descritti di seguito.

• Creare un nuovo servizio in un oggetto in Composer e scrivere un servizio dati JavaScript. È possibile utilizzare gli snippet di codice disponibili e altri collegamenti utili.

• Scrivere un servizio JavaScript in un editor di testo qualsiasi e copiarlo nell'editor di codice di un nuovo servizio dati per un oggetto in Composer.

• Modificare l'output degli esempi disponibili per il widget Griglia avanzata in un formato JSON.

Per utilizzare in ThingWorx Composer i servizi di configurazione di esempio importati, attenersi alla procedura descritta di seguito.

1. In Composer selezionare Modellazione/Oggetti e aprire l'oggetto GridAdvancedExampleServices.

2. Aprire la scheda Servizi nel pannello di sinistra. A destra vengono visualizzati i servizi di esempio disponibili.

3. Selezionare un servizio di configurazione, quindi fare clic su Modifica per visualizzare il codice di script.

4. Modificare lo script e salvarlo. Per ulteriori informazioni, fare riferimento alla sezione Proprietà di configurazione JSON.

Per configurare la griglia utilizzando un servizio dati, attenersi alla procedura descritta di seguito.

1. In Composer creare una nuova entità Oggetto e un servizio dati per memorizzare i dati di configurazione dinamica.

2. Nel servizio creare un servizio di configurazione JavaScript e impostare l'output su JSON.

3. In Mashup Builder utilizzare il pannello Dati per aggiungere il servizio di configurazione dell'oggetto creato al passo 1.

4. Nel pannello Dati espandere il servizio dati quindi, in Dati restituiti, espandere Tutti i dati e associare l'output JSON alla proprietà Configuration del widget Griglia.

Quando si associa il servizio di configurazione alla griglia, le proprietà del widget vengono nascoste automaticamente. Se il servizio di configurazione non è associato, vengono visualizzate nuovamente le altre proprietà.

5. Salvare e visualizzare il mashup completato.

Per configurare manualmente la griglia utilizzando i dati JSON, attenersi alla procedura descritta di seguito.

1. In Mashup Builder selezionare un widget Griglia nell'area di lavoro o utilizzando il pannello Navigatore.

2. Nel pannello Proprietà fare clic su Aggiungi accanto alla proprietà Configuration del widget. Viene visualizzata una finestra di dialogo di configurazione.

3. Digitare o incollare un oggetto JSON contenente i dati di configurazione necessari per la griglia.

4. Fare clic su Fine. Le configurazioni vengono applicate alla griglia.

5. Fare clic su Salva per salvare il mashup.

Proprietà di configurazione JSON

Nelle sezioni che seguono vengono descritte le proprietà di configurazione JSON disponibili per la griglia.

Proprietà di configurazione delle colonne

Questa proprietà contiene definizioni per una colonna della griglia, ad esempio l'intestazione di colonna e l'ordinamento.

La maggior parte delle proprietà delle definizioni di colonna è facilmente associabile alle proprietà corrispondenti disponibili in Mashup Builder. Tuttavia le proprietà delle definizioni di colonna riportate di seguito sono disponibili in Mashup Builder solo se l'origine dati per la griglia è associata a una data shape. Quindi le proprietà seguenti corrispondono a opzioni analoghe nella finestra di dialogo Configura colonne griglia:

• hidden - Definisce se una colonna specifica della griglia è inizialmente visibile o nascosta. In fase di esecuzione è possibile visualizzare o nascondere le colonne utilizzando il menu di visualizzazione delle colonne. Questa proprietà corrisponde alla proprietà Mostra nella finestra di dialogo di configurazione del widget.

• inLayout - Determina se una colonna di griglia specifica è visibile in fase di esecuzione. Se impostata su false, l'utente finale non vede la colonna e non ha alcun controllo sulla relativa visibilità in fase di esecuzione. Tuttavia, è comunque possibile utilizzare i dati della colonna per la formattazione dello stato. Questa proprietà corrisponde alla proprietà Exclude nella finestra di dialogo di configurazione del widget.

È possibile localizzare i titoli di intestazione di colonna nello script JSON inserendo un token di localizzazione tra parentesi quadre doppie. In fase di esecuzione il valore in formato token viene tradotto utilizzando i valori memorizzati nella tabella di localizzazione.

"columns": {
"idFieldName": "id",
"header": {
"hide": false,
"singleLine": true,
"maxHeight": 20,
"selectionCheckboxAlignment": "bottom",
"sortSelectionColumn": true
},
"columnDefs": [
{
"targets": 0,
"fieldName": "max_temp",
"title": "Max Temp",
"width": "95px",
"autoWidth": false,
"inLayout": true,
"cellHorizontalAlignment": 'center',
"cellVerticalAlignment": 'center',
"headerHorizontalAlignment": 'center',
"headerVerticalAlignment": 'center'
"columnFormatter": {
“format": "0.00F",
"type": "number",
"stateDefinition": {
"name": "weather_eventsConf",
"fieldName": "events",
"type": "non-fixed",
"states": [
{
"name": "Rain",
"value": "Rain",
"comparator": "==",
"styleName": "tableHeaderStyle"
},
{
"name": "Fog",
"value": "Fog",
"comparator": "==",
"styleName": "FogStyle"
}

In ThingWorx 9.3.6 o versioni successive è possibile utilizzare la proprietà routeLinks per instradare i dati dei link utilizzando un evento LinkClicked.

"columnFormatter": {
"format":"_blank",
"type":"hyperlink",
"routeLinks": true,
"params": {
"textFormat":"Link",
"dependentField":"events"
}
}

In ThingWorx 9.4 o versioni successive è possibile utilizzare la proprietà showRowNumbers all'interno della configurazione dinamica.

"columns":{},
"showRowNumbers": true,
"treeGridSettings":{}

Proprietà di configurazione delle righe

Configura le proprietà di riga, ad esempio la selezione di righe di default, l'altezza delle righe e il comportamento di formattazione dello stato basato su righe.

"rows": {
"selectedRowsChangedCallback": true,
"minHeight": 60,
"maxHeight": 100,
"singleLine": true,
"selection": "multi", // *{string} controls the row selection. Options: 'none', 'single', 'multi'
"defaultSelectedRows": "2,4",
"selectionCheckboxAlignment": 'bottom',
"rowFormatter": {
"stateDefinition": {
…
}
}

Proprietà di configurazione della griglia albero

Le configurazioni seguenti sono disponibili in ThingWorx 9.3.4 o versioni successive.

"treeSettings": {
"parentIdFieldName": "parentUid",
"hasChildrenFieldName": "hasChildren",
"maxRowCacheSize": 100000,
"alwaysExpanded": false,
"expandCollapseAll": false,
"expandCollapseIcon": "plus/minus",
"focusNavigationMode": "cell-only",
"selectFocusedItem": false,
"primaryColumnFixedSize": true,
"allowDisabledNodes": true,
"disabledStateField": "disabled",
"disableChildNodes": true,
"expandAllLoadedLevels": false,
"maxExpandedRows": 6,
"preserveRowExpansion": false,
"expandRowOnDoubleClick": false,
"includeRowExpansionParents": true,
"idPathSeparator": '--'
}

Proprietà di configurazione della barra degli strumenti

"toolbar":{
"actionsData": ""
"actionsPosition": "after"
}

Proprietà di configurazione dello stile

Proprietà di stile facoltative che controllano l'aspetto della griglia, ad esempio i colori di sfondo, gli stili dei bordi, i caratteri e gli stili specifici dello stato. È possibile definire e utilizzare gli stili da applicare per la formattazione dello stato.

"styles": {
"rowStyle1": {
"image": "",
"backgroundColor": "#90ee90",
"fontFamily": [
"helvetica",
"arial"
],
"lineThickness": "1",
"foregroundColor": "#ffffff",
"textDecoration": "",
"lineColor": "#ff0000",
"fontSize": "11px",
"lineStyle": "solid",
"fontStyle": "normal",
"fontWeight": "bold",
"secondaryBackgroundColor": ""
}
}

Il controllo delle proprietà dei caratteri è disponibile solo durante la configurazione con un servizio. La selezione del carattere non è una proprietà disponibile in Mashup Builder.

Etichetta del widget

"label": {
"label": "Grid Widget",
"type": "body",
"alignment": "center"
}

Modalità e pulsanti di modifica

È possibile configurare la modifica sulla griglia in editButtons.

"editButtons": {
"enabled": true,
"editButton": true,
"editLevel": "row", //* Controls the edit level. Options: "row", "cell", "grid"
"DeleteButton": true,
"rowAddButton": true
"editControlVisibility": "hover", // Controls the visibility of the edit controls on the grid. Options: 'hover', 'always', 'never'}
"editControlType": "link",
"editControlLabel": "Edit",
"editControlIcon": ""
}

Menu di configurazione delle colonne

"columnsMenu": {
"options": "both", // Controls the options that are available within the menu. Options: "none", "reorder", "show", "both"
"visibleItems": 6,
"label": "Data View"
}

Convalida

"validation" : {
"showSuccess": true,
"successIcon": "/Thingworx/MediaEntities/SuccessIcon",
"showFailure": true,
"failureIcon": "/Thingworx/MediaEntities/FailureIcon",
"showCriteria": true,
"criteriaIcon: "/Thingworx/MediaEntities/CriteriaIcon"
}

Opzioni generali

"filter": {
"show": true
},
"resetButton": {
"enabled": true
},
"resizeColumns": true,
"reorderColumns": true

È stato utile?