Adición de acciones personalizadas a la barra de herramientas de rejilla
En ThingWorx 9.4 o versiones posteriores, se pueden definir acciones personalizadas para mostrarlas en la barra de herramientas de la rejilla.
Resumen
• Botón
• Desplegable
• Vínculo
• Botón de alternar
Configuración de acciones personalizadas para la barra de herramientas del widget de rejilla
1. En Composer, cree un servicio de datos que devuelva una infotable con los datos necesarios para las definiciones de acción. Para obtener más información sobre los formatos de datos soportados, consulte Ejemplo: Configuración de la barra de herramientas de ejemplo.
2. En Mashup Builder, añada el servicio al mashup mediante el panel Datos.
3. Enlace la infotable del servicio a la propiedad ToolbarActions del widget de rejilla. Las propiedades adicionales para las acciones personalizadas se muestran en el panel Propiedades.
4. En el panel Propiedades, configure las acciones de la barra de herramientas. Para crear enlaces de widget internos, utilice el cuadro de diálogo de configuración de enlaces.
5. Pulse en Guardar y, a continuación, en Ver mashup.
Propiedades de la acción personalizada
En la siguiente tabla se enumeran las propiedades de cada tipo de acción personalizada que se pueden añadir al widget de rejilla.
|
Tipo de acción
|
Nombre de propiedad/evento
|
Descripción
|
Ejemplo
|
|---|---|---|---|
|
Botón
|
<actionId>_Clicked
|
Un evento que se activa cuando se pulsa el botón.
|
Button1_Clicked
|
|
<actionId>_Disabled
|
Permite desactivar el botón en la barra de herramientas.
|
Button1_Disabled
|
|
|
<actionId>_Visible
|
Permite controlar la visibilidad del botón en la barra de herramientas.
|
Button1_Visible
|
|
|
Desplegable
|
<actionId>_Disabled
|
Permite desactivar la lista desplegable en la barra de herramientas.
|
Dropdown1_Disabled
|
|
<actionId>_SelectedText
|
Esta propiedad enlazable permite definir y recuperar el valor del texto seleccionado en la acción de lista desplegable.
|
Dropdown1_SelectedText
|
|
|
<actionId>_SelectedTextChanged
|
Evento que se activa cuando se cambia el elemento seleccionado en la lista desplegable.
|
Dropdown1_SelectedTextChanged
|
|
|
<actionId>_Visible
|
Permite controlar la visibilidad del desplegable en la barra de herramientas.
|
Dropdown1_Visible
|
|
|
Vínculo
|
<actionId>_Disabled
|
Permite desactivar el vínculo en la barra de herramientas.
|
Link1_Disabled
|
|
<actionId>_Visible
|
Permite controlar la visibilidad de la acción de vínculo en la barra de herramientas.
|
Link1_Visible
|
|
|
Botón de alternar
|
<actionId>_Disabled
|
Permite desactivar el botón de alternar en la barra de herramientas.
|
Toggle1_Disabled
|
|
<actionId>_State
|
Esta propiedad enlazable permite definir y recuperar el estado de la acción del botón de alternar.
|
Toggle1_State
|
|
|
<actionId>_StateChanged
|
Evento que se activa cuando cambia el estado del botón de alternar.
|
Toggle1_StateChanged
|
|
|
<actionId>_Visible
|
Permite controlar la visibilidad de la acción de botón de alternar en la barra de herramientas.
|
Toggle1_Visible
|
Ejemplo: Creación de un servicio para configurar acciones personalizadas para la barra de herramientas de rejilla
En el siguiente ejemplo se muestra un servicio que crea las siguientes acciones personalizadas en la barra de herramientas de rejilla:
• Un menú desplegable que controla la altura de la fila.
• Un botón de alternar que controla la visibilidad de los números de fila.
• Un botón de exportación para exportar las filas seleccionadas de la rejilla.
En Composer, cree un servicio de datos que devuelva una infotable con los datos necesarios para las acciones personalizadas. Para obtener más información sobre los formatos de datos soportados, consulte Definición de las acciones de la barra de herramientas mediante una infotable.
var result = Resources["InfoTableFunctions"].CreateInfoTableFromDataShape({
infoTableName : "InfoTable",
dataShapeName : "ToolbarAction"
});
// Dropdown start
result.AddRow({
actionId: "DD1",
actionType: "dropdown",
actionLabel: "Row Height",
actionTooltip: "Change row height",
actionDisabled: false,
actionVisible: true,
dropdownData: [{label:"36 px", value: "36"}, {label:"48 px", value: "48"}, {label:"64 px", value: "64"}],
actionMaxWidth: 200,
dropdownHintText: "Select..."
});
// Dropdown end
// Toggle start
result.AddRow({
actionId: "T1",
actionType: "toggle",
actionLabel: "Show Row Numbers",
actionTooltip: "Adds a column that shows row numbers.",
actionDisabled: false,
actionVisible: true,
toggleChipIcon: true,
toggleState: false,
toggleLabelPosition: 'right',
actionMaxWidth: 200
});
// Toggle end
// Button start
result.AddRow({
actionId: "B1",
actionType: "button",
actionLabel: "Export",
actionTooltip: "Export the selected rows data.",
actionDisabled: false,
actionVisible: true,
buttonType: "primary",
actionMaxWidth: 100
});
// Button end
infoTableName : "InfoTable",
dataShapeName : "ToolbarAction"
});
// Dropdown start
result.AddRow({
actionId: "DD1",
actionType: "dropdown",
actionLabel: "Row Height",
actionTooltip: "Change row height",
actionDisabled: false,
actionVisible: true,
dropdownData: [{label:"36 px", value: "36"}, {label:"48 px", value: "48"}, {label:"64 px", value: "64"}],
actionMaxWidth: 200,
dropdownHintText: "Select..."
});
// Dropdown end
// Toggle start
result.AddRow({
actionId: "T1",
actionType: "toggle",
actionLabel: "Show Row Numbers",
actionTooltip: "Adds a column that shows row numbers.",
actionDisabled: false,
actionVisible: true,
toggleChipIcon: true,
toggleState: false,
toggleLabelPosition: 'right',
actionMaxWidth: 200
});
// Toggle end
// Button start
result.AddRow({
actionId: "B1",
actionType: "button",
actionLabel: "Export",
actionTooltip: "Export the selected rows data.",
actionDisabled: false,
actionVisible: true,
buttonType: "primary",
actionMaxWidth: 100
});
// Button end
En Mashup Builder, cree los siguientes enlaces:
• Para controlar la altura de las filas de la rejilla, enlace la propiedad desplegable SelectedText a una función de expresión que convierta el tipo base de cadena en un número. A continuación, se puede enlazar la salida de la función a la propiedad MinRowHeight de la rejilla.
• Para controlar la visibilidad de los números de fila, enlace la propiedad T1_State del botón de alternar con la propiedad de la rejilla ShowRowNumbers.
• Para mostrar el botón de exportación cuando se seleccionan filas, enlace la propiedad RowsSelected de la rejilla con la propiedad B1_Visible del botón.
Para obtener más información sobre las opciones de configuración disponibles para las acciones personalizadas, consulte Ejemplo: Configuración de la barra de herramientas de ejemplo.