Configuration de la grille à l'aide de données JSON
Outre les propriétés de configuration des colonnes et des widgets, vous pouvez configurer les propriétés du widget Grille de manière dynamique à l'aide de données JSON de l'une des manières suivantes :
• Créez un service de données personnalisé qui génère des données de configuration.
• Ajoutez manuellement les données de configuration à la propriété Configuration du widget dans Mashup Builder.
Utilisation d'un service de données JSON
Pour afficher les données sur une grille utilisant la configuration dynamique, vous devez créer des données de configuration de l'une des manières suivantes :
• Créez un nouveau service sur un objet dans Composer et écrivez un code JavaScript de service de données. Vous pouvez utiliser les extraits de code disponibles et d'autres raccourcis utiles.
• Rédigez un service JavaScript dans un éditeur de texte, puis copiez-le dans l'éditeur de code d'un nouveau service de données d'un objet dans Composer.
• Modifiez la sortie des exemples disponibles pour le widget Grille (avancée) au format JSON.
Pour utiliser un exemple de services de configuration importé dans ThingWorx Composer, procédez comme suit :
1. Dans Composer, accédez à Modélisation/Objets et ouvrez l'objet GridAdvancedExampleServices.
2. Ouvrez l'onglet Services dans le panneau de gauche. Les exemples de services disponibles s'affichent sur la droite.
3. Sélectionnez l'un des services de configuration, puis cliquez sur Modifier pour afficher le code de script.
4. Modifiez le script, puis enregistrez-le. Pour plus d'informations, consultez la section Propriétés de configuration JSON.
Pour configurer la grille à l'aide d'un service de données :
1. Dans Composer, créez une nouvelle entité d'objet et un service de données pour stocker les données de configuration dynamique.
2. Dans le service, créez un service de configuration JavaScript et définissez la sortie sur JSON.
3. Dans le Mashup Builder, utilisez le panneau Données pour ajouter le service de configuration de l'objet que vous avez créé à l'étape 1.
4. Dans le panneau Données, développez le service de données, puis sous Données renvoyées, développez Toutes les données et liez la sortie JSON à la propriété Configuration du widget Grille.
 |
Lorsque vous liez le service de configuration à la grille, les propriétés du widget sont automatiquement masquées. Si vous supprimez la liaison avec le service de configuration, les autres propriétés sont réaffichées.
|
5. Enregistrez et affichez l'application composite achevée.
Pour configurer la grille manuellement à l'aide de données JSON :
1. Dans Mashup Builder, sélectionnez un widget Grille dans le canevas ou utilisez le panneau Explorateur.
2. Dans le panneau Propriétés, cliquez sur Ajouter en regard de la propriété Configuration du widget. Une boîte de dialogue de configuration s'ouvre.
3. Entrez ou collez un objet JSON qui contient les données de configuration requises pour la grille.
4. Cliquez sur Terminé. Les configurations sont appliquées à la grille.
5. Cliquez sur Enregistrer pour enregistrer l'application composite.
Propriétés de configuration JSON
Les sections suivantes décrivent les propriétés de configuration JSON disponibles pour la grille.
Propriétés de configuration de colonne
Cette propriété contient des définitions pour une colonne de la grille, telles que l'en-tête de colonne et l'ordre de tri.
La plupart des propriétés de définition de colonne sont faciles à rapprocher des propriétés correspondantes disponibles dans le Mashup Builder. Toutefois, les propriétés de définition de colonne suivantes sont uniquement disponibles dans le Mashup Builder lorsque la source de données de la grille est liée à une forme de données. Les propriétés suivantes possèdent un équivalent similaire dans la boîte de dialogue Configurer les colonnes de la grille :
• hidden : définit si la colonne concernée de la grille est initialement visible ou masquée dans la vue. Au moment de l'exécution, vous pouvez afficher ou masquer les colonnes à l'aide du menu d'affichage des colonnes. Cette propriété correspond à la propriété Afficher de la boîte de dialogue de configuration du widget.
• inLayout : définit si une colonne de spécifique de la grille est visible au moment de l'exécution. Si vous définissez cette propriété sur "faux", l'utilisateur final ne verra pas la colonne et n'aura aucun contrôle sur sa visibilité à l'exécution. Toutefois, vous pouvez toujours utiliser les données de colonne pour le formatage de l'état. Cette propriété correspond à la propriété Exclude de la boîte de dialogue de configuration du widget.
|
|
Vous pouvez localiser les en-têtes de colonne dans le script JSON en utilisant un jeton de localisation entre crochets doubles. Au moment de l'exécution, la valeur jetonisée est traduite à l'aide des valeurs stockées dans la table de localisation.
|
"columns": {
"idFieldName": "id",
"header": {
"hide": false,
"singleLine": true,
"verticalAlignment: "top", // *{string} controls the row selection. Options: 'top', 'center', 'bottom'
"maxHeight": 20,
"selectionCheckboxAlignment": "bottom",
"sortSelectionColumn": true
"sortSelection": false
},
"columnDefs": [
{
"targets": 0,
"fieldName": "max_temp",
"title": "Max Temp",
"width": "95px",
"autoWidth": false,
"inLayout": true,
"sortable": true,
"initialSort": "descending",
"cellHorizontalAlignment": 'center',
"cellVerticalAlignment": 'center',
"columnMinimumWidth": 101,
"columnMaximumWidth": 201,
"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,
"verticalAlignment: "top", // *{string} controls the row selection. Options: 'top', 'center', 'bottom'
"maxHeight": 20,
"selectionCheckboxAlignment": "bottom",
"sortSelectionColumn": true
"sortSelection": false
},
"columnDefs": [
{
"targets": 0,
"fieldName": "max_temp",
"title": "Max Temp",
"width": "95px",
"autoWidth": false,
"inLayout": true,
"sortable": true,
"initialSort": "descending",
"cellHorizontalAlignment": 'center',
"cellVerticalAlignment": 'center',
"columnMinimumWidth": 101,
"columnMaximumWidth": 201,
"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"
}
Vous pouvez utiliser la propriété routeLinks pour router des données de lien à l'aide d'un événement LinkClicked.
"columnFormatter": {
"format":"_blank",
"type":"hyperlink",
"routeLinks": true,
"params": {
"textFormat":"Link",
"dependentField":"events"
}
}
"format":"_blank",
"type":"hyperlink",
"routeLinks": true,
"params": {
"textFormat":"Link",
"dependentField":"events"
}
}
Vous pouvez utiliser showRowNumbers pour afficher ou masquer les numéros de ligne.
"columns":{},
"showRowNumbers": true,
"treeGridSettings":{}
Propriétés de configuration de ligne
Configure les propriétés de ligne, telles que la sélection de lignes par défaut, la hauteur de ligne par défaut et le formatage de l'état basé sur les lignes.
"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',
"verticalAlignment":"top", // *{string} controls the vertical alignment of content within rows. Options: 'top', 'center', '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',
"verticalAlignment":"top", // *{string} controls the vertical alignment of content within rows. Options: 'top', 'center', 'bottom'
"rowFormatter": {
"stateDefinition": {
…
}
}
Propriétés de configuration de grille d'arborescence
"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": '--'
}
Propriétés de configuration de barre d'outils
"toolbar":{
"actionsData": ""
"actionsPosition": "after"
}
"actionsData": ""
"actionsPosition": "after"
}
Propriétés de configuration de style
Propriétés de style facultatives qui contrôlent l'apparence de la grille, notamment en ce qui concerne les couleurs d'arrière-plan, les styles de bordure, les polices et les styles spécifiques à l'état. Vous pouvez définir et utiliser des styles à appliquer au formatage de l'état.
"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": ""
}
}
|
|
Le contrôle des propriétés de police n'est disponible que dans le cas d'une configuration au moyen d'un service. La sélection de police n'est pas une propriété disponible dans le Mashup Builder.
|
Etiquette du widget
"label": {
"label": "Grid Widget",
"type": "body",
"alignment": "center"
}
"label": "Grid Widget",
"type": "body",
"alignment": "center"
}
Mode de modification et boutons
Vous pouvez configurer la modification sur la grille sous 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": ""
}
"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 de configuration des colonnes
"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"
}
validation
"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"
}
Options générales
"filter": {
"show": true
},
"resetButton": {
"enabled": true
},
"resizeColumns": true,
"reorderColumns": true
"show": true
},
"resetButton": {
"enabled": true
},
"resizeColumns": true,
"reorderColumns": true