Configuración de la rejilla mediante datos JSON
Además de las propiedades del widget y de las propiedades de configuración de las columnas, se pueden configurar las propiedades del widget de rejilla de forma dinámica mediante datos JSON de las siguientes maneras:
• Crear un servicio de datos personalizado que genere datos de configuración.
• Añadir manualmente los datos de configuración a la propiedad Configuration del widget en Mashup Builder.
Utilización de un servicio de datos de JSON
Para mostrar los datos en una rejilla que utiliza configuración dinámica, se deben crear los datos de configuración de una de las siguientes maneras:
• Crear un nuevo servicio en una cosa en Composer y escribir un servicio de datos de JavaScript. Se pueden utilizar los fragmentos de código disponibles y otros accesos directos útiles.
• Escribir un servicio JavaScript en el editor de texto que prefiera el usuario y luego copiarlo en el editor de código de un nuevo servicio de datos en una cosa de Composer.
• Cambiar la salida de los ejemplos que están disponibles para la rejilla (Avanzada) a un formato JSON.
Para utilizar un servicio de configuración de ejemplo importado en ThingWorx Composer, siga estos pasos:
1. En Composer, vaya a Modelado/Cosas y abra la cosa GridAdvancedExampleServices.
2. Abra la ficha Servicios del panel izquierdo y los servicios de ejemplo disponibles aparecerán a la derecha.
3. Seleccione uno de los servicios de configuración y, a continuación, pulse en el icono Editar para ver el código del script.
4. Edite el script y guárdelo. Para obtener más información, consulte la sección Propiedades de configuración JSON.
Para configurar la rejilla mediante un servicio de datos:
1. En Composer, cree una nueva entidad de cosa y un servicio de datos para almacenar los datos de configuración dinámicos.
2. En el servicio, cree un servicio de configuración de JavaScript y defina la salida en JSON.
3. En Mashup Builder, utilice el panel Datos para añadir el servicio de configuración de la cosa que se ha creado en el paso 1.
4. En el panel Datos, expanda el servicio de datos y, a continuación, en Datos devueltos, Todos los datos, enlace la salida JSON a la propiedad Configuration del widget de rejilla.
 |
Al enlazar el servicio de configuración a la rejilla, las propiedades del widget se ocultan automáticamente. Si el servicio de configuración deja de estar enlazado, las otras propiedades vuelven a aparecer.
|
5. Almacenamiento y visualización del mashup completado
Para configurar manualmente la rejilla mediante datos JSON:
1. En Mashup Builder, seleccione un widget de rejilla en el lienzo o utilice el panel Explorador.
2. En el panel Propiedades, pulse en Añadir junto a la propiedad Configuration del widget. Se abre un cuadro de diálogo de configuración.
3. Escriba o pegue un objeto JSON que contenga los datos de configuración necesarios para la rejilla.
4. Pulse en Terminado. Las configuraciones se aplican a la rejilla.
5. Pulse en Guardar para guardar el mashup.
Propiedades de configuración JSON
En las siguientes secciones se describen las propiedades de configuración JSON disponibles para la rejilla.
Propiedades de configuración de columnas
En esta propiedad se incluyen definiciones para una columna de la rejilla, como la cabecera de columna y el orden de clasificación.
La mayoría de las propiedades de definición de columna son fáciles de emparejar con las propiedades correspondientes disponibles en Mashup Builder. Sin embargo, las siguientes propiedades de definición de columna solo están disponibles en Mashup Builder cuando el origen de datos de la rejilla está unido a una definición de datos. A continuación, las siguientes propiedades corresponden a opciones similares del cuadro de diálogo Configurar columnas de rejilla:
• hidden: permite definir si una columna de rejilla específica está inicialmente visible u oculta. En tiempo de ejecución, se pueden mostrar u ocultar las columnas mediante el menú de visualización de columnas. Esta propiedad corresponde a la propiedad Mostrar del cuadro de diálogo de configuración de widgets.
• inLayout: permite definir si una columna específica de la rejilla es visible en tiempo de ejecución. Si se define en falso, el usuario final no verá la columna y no tendrá ningún control sobre su visibilidad en tiempo de ejecución. Sin embargo, se puede seguir utilizando los datos de la columna para formatear el estado. Esta propiedad corresponde a la propiedad Exclude del cuadro de diálogo de configuración de widgets.
|
|
Los títulos de cabecera de columna en el script de JSON se pueden localizar colocando un token de localización entre corchetes dobles. En tiempo de ejecución, el valor tokenizado se traduce mediante los valores almacenados en la tabla de localización.
|
"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"
}
En ThingWorx 9.3.6 o versiones posteriores, se puede utilizar la propiedad routeLinks para distribuir los datos de vínculo mediante un evento LinkClicked.
"columnFormatter": {
"format":"_blank",
"type":"hyperlink",
"routeLinks": true,
"params": {
"textFormat":"Link",
"dependentField":"events"
}
}
"format":"_blank",
"type":"hyperlink",
"routeLinks": true,
"params": {
"textFormat":"Link",
"dependentField":"events"
}
}
En ThingWorx 9.4 o versiones posteriores, se puede utilizar la propiedad showRowNumbers dentro de la configuración dinámica.
"columns":{},
"showRowNumbers": true,
"treeGridSettings":{}
Propiedades de configuración de fila
Permite configurar las propiedades de la fila, como la selección de filas por defecto, la altura de fila y el formato de estado basado en filas.
"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": {
…
}
}
Propiedades de configuración de rejilla de árbol
Las siguientes configuraciones están disponibles en ThingWorx 9.3.4 o versiones posteriores.
"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": '--'
}
Propiedades de configuración de la barra de herramientas
"toolbar":{
"actionsData": ""
"actionsPosition": "after"
}
"actionsData": ""
"actionsPosition": "after"
}
Propiedades de configuración de estilo
Propiedades de estilo opcionales que controlan el aspecto de la rejilla, como los colores de fondo, los estilos de borde, las fuentes y los estilos específicos de estado. Se pueden definir y utilizar estilos para aplicar el formato de estado.
"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": ""
}
}
|
|
El control de las propiedades de fuente solo está disponible al configurar con un servicio. La selección de fuentes no es una propiedad disponible en Mashup Builder.
|
Rótulo de widget
"label": {
"label": "Grid Widget",
"type": "body",
"alignment": "center"
}
"label": "Grid Widget",
"type": "body",
"alignment": "center"
}
Modo de edición y botones
Se puede configurar la edición en la rejilla en 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": ""
}
Menú de configuración de columnas
"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"
}
validación
"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"
}
Opciones generales
"filter": {
"show": true
},
"resetButton": {
"enabled": true
},
"resizeColumns": true,
"reorderColumns": true
"show": true
},
"resetButton": {
"enabled": true
},
"resizeColumns": true,
"reorderColumns": true