Raster mithilfe von JSON-Daten konfigurieren
Zusätzlich zu den Widget-Eigenschaften und den Konfigurationseigenschaften für Spalten können Sie die Eigenschaften des Widgets "Raster" wie folgt dynamisch mithilfe von JSON-Daten konfigurieren:
• Erstellen Sie einen benutzerdefinierten Datendienst, der Konfigurationsdaten generiert.
• Fügen Sie Konfigurationsdaten manuell zur Widget-Eigenschaft Configuration in Mashup Builder hinzu.
JSON-Datendienst verwenden
Sie müssen Konfigurationsdaten mit einer der folgenden Methoden erstellen, um Daten in einem Raster, das dynamische Konfiguration verwendet, anzuzeigen:
• Erstellen Sie einen neuen Dienst für ein Ding in Composer, und schreiben Sie einen JavaScript-Datendienst. Sie können die verfügbaren Code-Ausschnitte und andere hilfreiche Verknüpfungen verwenden.
• Schreiben Sie einen JavaScript-Dienst in einem beliebigen Texteditor, und kopieren Sie ihn in den Code-Editor eines neuen Datendienstes für ein Ding in Composer.
• Ändern Sie die Ausgabe der Beispiele, die für das Raster (Erweitert) verfügbar sind, in ein JSON-Format.
Führen Sie die folgenden Schritte aus, um importierte Beispiel-Konfigurationsdienste in ThingWorx Composer zu verwenden:
1. Navigieren Sie in Composer zu Modellierung/Dinge, und öffnen Sie das GridAdvancedExampleServices-Ding.
2. Öffnen Sie im linken Fensterbereich die Registerkarte Dienste. Die verfügbaren Beispieldienste werden auf der rechten Seite angezeigt.
3. Wählen Sie einen der Konfigurationsdienste aus, und klicken Sie dann auf Bearbeiten, um den Skriptcode anzuzeigen.
4. Bearbeiten Sie das Skript, und speichern Sie es. Weitere Informationen finden Sie im Abschnitt "JSON-Konfigurationseigenschaften".
So konfigurieren Sie das Raster mithilfe eines Datendiensts:
1. Erstellen Sie in Composer eine neue Ding-Entität und einen Datendienst, um die dynamischen Konfigurationsdaten zu speichern.
2. Erstellen Sie im Dienst einen JavaScript-Konfigurationsdienst, und legen Sie die Ausgabe auf JSON fest.
3. Fügen Sie in Mashup Builder im Fensterbereich Daten den Konfigurationsdienst des in Schritt 1 erstellten Dings hinzu.
4. Erweitern Sie im Fensterbereich Daten den Datendienst und unter Zurückgegebene Daten Alle Daten, und binden Sie die JSON-Ausgabe an die Eigenschaft Configuration des Widgets "Raster".
 |
Wenn Sie den Konfigurationsdienst an das Raster binden, werden die Widget-Eigenschaften automatisch ausgeblendet. Wenn der Konfigurationsdienst nicht gebunden ist, werden die anderen Eigenschaften erneut angezeigt.
|
5. Speichern Sie das fertige Mashup, und zeigen Sie es an.
So konfigurieren Sie das Raster mithilfe von JSON-Daten manuell:
1. Wählen Sie in Mashup Builder im Zeichenbereich oder über den Fensterbereich Explorer ein Widget des Typs "Raster" aus.
2. Klicken Sie im Fensterbereich Eigenschaften neben der Widget-Eigenschaft Configuration auf Hinzufügen. Ein Dialogfenster für die Konfiguration wird geöffnet.
3. Geben oder fügen Sie ein JSON-Objekt ein, das die erforderlichen Konfigurationsdaten für das Raster enthält.
4. Klicken Sie auf Fertig. Die Konfigurationen werden auf das Raster angewendet.
5. Klicken Sie auf Speichern, um das Mashup zu speichern.
JSON-Konfigurationseigenschaften
In den folgenden Abschnitten werden die verfügbaren JSON-Konfigurationseigenschaften für das Raster beschrieben.
Konfigurationseigenschaften für Spalten
Diese Eigenschaft enthält Definitionen für eine Spalte im Raster, wie die Spaltenüberschrift und die Sortierreihenfolge.
Die meisten Eigenschaften der Spaltendefinition können einfach mit den entsprechenden Eigenschaften im Mashup Builder abgeglichen werden. Die folgenden Spalten-Definitionseigenschaften sind jedoch nur im Mashup Builder verfügbar, wenn die Datenquelle für das Raster an einen Data Shape gebunden ist. Dann entsprechen die folgenden Eigenschaften ähnlichen Optionen im Dialogfenster "Rasterspalten konfigurieren":
• hidden – Legt fest, ob eine bestimmte Rasterspalte anfänglich sichtbar oder ausgeblendet ist. Zur Laufzeit können Sie Spalten mit dem Menü zur Spaltenanzeige anzeigen oder ausblenden. Diese Eigenschaft entspricht der Eigenschaft Anzeigen im Dialogfenster für die Widget-Konfiguration.
• inLayout – Definiert, ob eine bestimmte Rasterspalte zur Laufzeit angezeigt wird. Wenn dies auf "false" festgelegt ist, sieht der Endbenutzer die Spalte nicht und hat keine Kontrolle über die Anzeige zur Laufzeit. Sie können jedoch weiterhin die Spaltendaten für die Statusformatierung verwenden. Diese Eigenschaft entspricht der Eigenschaft Exclude im Dialogfenster für die Widget-Konfiguration.
|
|
Sie können Spaltenüberschrift-Titel im JSON-Skript lokalisieren, indem Sie ein Lokalisierungs-Token in doppelten eckigen Klammern platzieren. Zur Laufzeit wird der Token-Wert mit den in der Lokalisierungstabelle gespeicherten Werten übersetzt.
|
"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"
}
"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 oder höher können Sie die Eigenschaft routeLinks verwenden, um Link-Daten mit einem LinkClicked-Ereignis zu routen.
"columnFormatter": {
"format":"_blank",
"type":"hyperlink",
"routeLinks": true,
"params": {
"textFormat":"Link",
"dependentField":"events"
}
}
"format":"_blank",
"type":"hyperlink",
"routeLinks": true,
"params": {
"textFormat":"Link",
"dependentField":"events"
}
}
In ThingWorx 9.4 oder höher können Sie die Eigenschaft showRowNumbers in der dynamischen Konfiguration verwenden.
"columns":{},
"showRowNumbers": true,
"treeGridSettings":{}
Konfigurationseigenschaften für Zeilen
Zeileneigenschaften wie die Standardzeilenauswahl, Zeilenhöhe und zeilenbasierte Statusformatierung.
"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": {
…
}
}
"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": {
…
}
}
Konfigurationseigenschaften für Strukturraster
Die folgenden Konfigurationen sind in ThingWorx 9.3.4 oder höher verfügbar.
"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": '--'
}
"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": '--'
}
Konfigurationseigenschaften für Symbolleisten
"toolbar":{
"actionsData": ""
"actionsPosition": "after"
}
"actionsData": ""
"actionsPosition": "after"
}
Konfigurationseigenschaften für Stile
Optionale Stileigenschaften, die die Anzeige des Rasters steuern, wie Hintergrundfarben, Rahmenstile, Schriftarten und statusspezifische Stile. Sie können Stile definieren und verwenden, um die Statusformatierung anzuwenden.
"styles": {
"rowStyle1": {
"image": "",
"backgroundColor": "#90ee90",
"fontFamily": [
"helvetica",
"arial"
],
"lineThickness": "1",
"foregroundColor": "#ffffff",
"textDecoration": "",
"lineColor": "#ff0000",
"fontSize": "11px",
"lineStyle": "solid",
"fontStyle": "normal",
"fontWeight": "bold",
"secondaryBackgroundColor": ""
}
}
"rowStyle1": {
"image": "",
"backgroundColor": "#90ee90",
"fontFamily": [
"helvetica",
"arial"
],
"lineThickness": "1",
"foregroundColor": "#ffffff",
"textDecoration": "",
"lineColor": "#ff0000",
"fontSize": "11px",
"lineStyle": "solid",
"fontStyle": "normal",
"fontWeight": "bold",
"secondaryBackgroundColor": ""
}
}
|
|
Die Steuerung der Schriftarteigenschaften ist nur bei der Konfiguration mit einem Dienst verfügbar. Die Schriftartauswahl ist keine Eigenschaft, die im Mashup Builder verfügbar ist.
|
Widget-Beschriftung
"label": {
"label": "Grid Widget",
"type": "body",
"alignment": "center"
}
"label": "Grid Widget",
"type": "body",
"alignment": "center"
}
Bearbeitungsmodus und Schaltflächen
Sie können die Bearbeitung im Raster unter editButtons konfigurieren.
"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": ""
}
"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": ""
}
Menü für die Spaltenkonfiguration
"columnsMenu": {
"options": "both", // Controls the options that are available within the menu. Options: "none", "reorder", "show", "both"
"visibleItems": 6,
"label": "Data View"
}
"options": "both", // Controls the options that are available within the menu. Options: "none", "reorder", "show", "both"
"visibleItems": 6,
"label": "Data View"
}
Validierung
"validation" : {
"showSuccess": true,
"successIcon": "/Thingworx/MediaEntities/SuccessIcon",
"showFailure": true,
"failureIcon": "/Thingworx/MediaEntities/FailureIcon",
"showCriteria": true,
"criteriaIcon: "/Thingworx/MediaEntities/CriteriaIcon"
}
"showSuccess": true,
"successIcon": "/Thingworx/MediaEntities/SuccessIcon",
"showFailure": true,
"failureIcon": "/Thingworx/MediaEntities/FailureIcon",
"showCriteria": true,
"criteriaIcon: "/Thingworx/MediaEntities/CriteriaIcon"
}
Allgemeine Optionen
"filter": {
"show": true
},
"resetButton": {
"enabled": true
},
"resizeColumns": true,
"reorderColumns": true
"show": true
},
"resetButton": {
"enabled": true
},
"resizeColumns": true,
"reorderColumns": true