[en] Data Grid
[en] The Data Grid component is a container component that allows you to display data in table format. To insert a Data Grid component in the screen, go to the Left Panel in the screens editor. Go through the list of components to find the Data Grid component or click the search bar and type its name. Then, drag and drop the component into the canvas and configure its attributes in the right panel. Refer to the sections below to learn more.Visual Builder - Left Panel
[en] Once you drag the Data Grid component into the canvas, you can include the Data Grid Head and the Data Grid Row components. The Data Grid component must include at least one Data Grid Row component.Data Grid Row 3.0Data Grid Row 3.0
Importante
[en] The Data Grid component can be used in web and mobile apps (both for Android and iOS devices).
Attributes
En el panel derecho, puedes configurar diferentes atributos para personalizar el componente. Consulta Design, Actions y Advanced a continuación para obtener más información.Visual Builder - Right Panel
Design
En la pestaña Design, puedes configurar la información básica del componente seleccionado y los atributos que determinan el aspecto que tendrá el componente en la app. Consulta las secciones a continuación para obtener más información.Design Tab
En esta sección, rellena los detalles básicos del componente seleccionado y los atributos de alineación y tamaño. Esta sección está disponible para cada componente arrastrado al lienzo. Para saber más, lee Design.Design Tab
En esta sección puedes configurar los atributos básicos del componente. Consulta la tabla a continuación para obtener más información.
CSS Class | CSS o estilo invocado desde Style > Themes y aplicado al componente. Haz clic en el campo para abrir el menú desplegable y selecciona uno de los estilos disponibles. SugerenciaPuedes añadir más de un estilo. |
Profile Option | Código aplicado en referencia al perfil de usuario de la app. Haz clic en el campo e introduce el código. |
[en] HR Size | [en] Size of the horizontal lines that divide the grid. To set the size, click the arrow and select large, medium or small from the drop-down menu. |
[en] HR Color | [en] Color of the horizontal lines that divide the grid. To set a color, click the field and type the hex color code or click the rounded-edges square icon to open the color picker. In the color picker, select a color or click HEXA or RGBA, then click the field to the left and type a HEXA or RGBA color code, respectively. |
[en] HR Style | [en] Style of the horizontal lines that divide the grid. Click the arrow and select dashed, dottedor solid from the drop-down menu. |
Scroll | Atributo que define si el usuario de la app puede desplazarse para visualizar el componente si éste sobrepasa el área visual de la pantalla del dispositivo. Haz clic en la flecha y selecciona auto, yes, o no en el menú desplegable. |
[en] Cols | [en] Number of columns. Click the field and enter the number of columns you want the component to display. [en] The default number of columns is 0. |
Visible | Atributo que define si el componente es visible en la app. Haz clic en la flecha y elige una opción del menú desplegable. Selecciona true para que el componente sea visible en la app o false para que no lo sea. |
Important For Accessibility | Atributo que define si el lector de pantalla lee o ignora el valor definido en el atributo Texto de accesibilidad del componente. Haz clic en la flecha y selecciona una opción del menú desplegable. Elige true para que el lector de pantalla lea el componente o false para que el lector de pantalla no lea el componente. El valor por defecto es false. |
Accessibility Text | Texto alternativo. Añade un texto breve para describir el componente a los usuarios que no puedan verlo. El texto será leído por iOS Voice Over o Android Talk Back. También puedes añadir el texto de accesibilidad al diccionario de traducciones o seleccionar una traducción existente si hay idiomas seleccionados en la configuración de tu app. |
[en] Accessibility Order | Atributo que indica al lector de pantalla el orden en que debe leer los componentes. Para configurarlo, haz clic en el campo e introduce un número para definir el orden. Por ejemplo, si este componente debe leerse en tercer lugar, introduce el valor |
En esta sección puedes configurar los atributos de tamaño y posición del componente. Consulta la tabla a continuación para obtener más información.
Position Type | Haz clic en la flecha y selecciona un tipo en el menú desplegable. Consulta la tabla a continuación para saber más sobre las opciones disponibles.
|
En esta sección se configuran los atributos para alinear el texto dentro del componente y se establecen las propiedades de margen y relleno. Consulta la tabla a continuación para obtener más información.
Propiedades de relleno | Espacio entre el borde del componente y el contenido del componente (valor). Introduce un valor para cada una de las propiedades de relleno: Padding Top, Padding Left, Padding Bottom and Padding Right. Puedes hacer clic en la flecha situada a la derecha de cada campo de relleno y seleccionar la unidad de medida deseada en el menú desplegable. |
Propiedades de los márgenes | Para definir la unidad de medida, haz clic en la flecha del campo de la derecha y selecciona una opción del menú desplegable. |
Alineación del texto | Haz clic en la opción de alineación deseada. De izquierda a derecha: justificado, izquierda, centrado o derecha, dependiendo de si deseas que el texto se alinee con los bordes izquierdo y derecho, con el borde izquierdo, centrado entre los dos bordes del componente o alineado con el borde derecho. También puedes hacer clic en </> y escribir el código para establecer la alineación del texto manualmente. |
En esta sección se configura el estilo del componente. Consulta la tabla a continuación para obtener más información.
[en] Background Color | [en] To set a single color for the component's background, click the field and type a hex code or click the rounded-edges square icon to open the color picker. In the color picker, select a color or enter the hexa or rgba color code. |
[en] Background Gradient | [en] To set a color gradient for the component's background, click each of the square icons to open the color picker. In the color picker, select the color or click HEXA or RGBA, then click the field to the left and type a HEXA or RGBA color code to form the color gradient. Click Switch direction to invert the order of the colors selected for the gradient. Click Change to horizontal direction or Change to vertical direction to define the gradient's direction in horizontal or vertical position, respectively. |
Background Image | Imagen aplicada al fondo del componente. Para establecer la imagen, haz clic en el campo y escribe el nombre de la imagen, o haz clic en el ícono de la lupa para abrir el selector de imágenes. A continuación, selecciona una de las imágenes disponibles en la lista o utiliza la barra de búsqueda para encontrar una imagen por su nombre. |
Resource Origin | Método a través del cual se carga el recurso referenciado por el componente. Rellena este campo si el componente seleccionado hace referencia a un recurso, como una imagen o un vídeo. Haz clic en la flecha y selecciona una de las opciones disponibles en el menú desplegable: elige L (Local) para recuperar el contenido codificado de los recursos locales o elige H (HTTP) para recuperar el contenido de los recursos del Comm Server. |
[en] Background Aspect Keep | [en] Specifies whether the background image defined in the Background Image attribute should maintain its original aspect ratio or stretch to fill the total background size. Click the arrow and choose an option from the drop-down menu. Select yes so that the background image keeps its aspect or no so that it stretches to occupy the total background size. |
[en] Background Horizontal Align | [en] Specifies the horizontal alignment of the background image defined in the Background Image attribute with regard to the component's background. Click the arrow and select center, left or right from the drop-down menu. Nota[en] This attribute can only be configured if the Background Aspect Keep attribute is set to yes. |
[en] Background Vertical Align | [en] Specifies the vertical alignment of the background image defined in the Background Image attribute with regard to the component's background. Click the arrow and select bottom, middle or right from the drop-down menu. Nota[en] This attribute can only be configured if the Background Aspect Keep attribute is set to yes. |
En esta sección, puedes definir el orden de los componentes dentro de la pantalla. Consulta la tabla a continuación para obtener más información.
Z-Index | Propiedad que define el orden de posición de los componentes. Si varios componentes se solapan, los componentes con un índice Z más alto se colocarán sobre los que tengan un índice más bajo. Este campo se rellena automáticamente. |
En esta sección se configuran los parámetros aplicables a las sombras del componente.
Shadow offset-x | Introduce un valor para la sombra con respecto al eje X (horizontal), que considera el centro del componente como punto de partida. Si el valor es un número negativo, la sombra apuntará hacia la izquierda. Puedes hacer clic en la flecha situada a la derecha del campo de sombra y seleccionar una unidad de medida en el menú desplegable. |
Shadow offset-y | Introduce un valor para la sombra con respecto al eje Y (vertical), que considera el centro del componente como punto de partida. Puedes hacer clic en la flecha situada a la derecha del campo de sombra y seleccionar una unidad de medida en el menú desplegable. |
Shadow Blur Radius | Introduce un valor para la anchura del radio de la sombra. Puedes hacer clic en la flecha situada a la derecha del campo de sombra y seleccionar una unidad de medida en el menú desplegable. |
Shadow Color | Para establecer el color de la sombra, haz clic en el campo y escribe un código hexadecimal o haz clic en el icono cuadrado para abrir el selector de color. En el selector de color, selecciona un color o haz clic en HEXA o RGBA, luego haz clic en el campo de la izquierda y escribe un código de color HEXA o RGBA, respectivamente. |
En esta sección, puedes establecer atributos avanzados relacionados con el diseño del componente, así como acciones que se ejecutarán en circunstancias específicas. Consulta la siguiente tabla para obtener más información.
Target Var | Token en el que se almacenará el atributo Value del componente después de que el usuario de la app envíe los datos introducidos en un formulario. Para establecer un token, haz clic en el campo e introduce el número de token. NotaSolo se puede fijar un token. |
[en] VR Size | [en] Size of the vertical lines that divide the grid. Click the arrow and select large, medium or small from the drop-down menu. |
[en] VR Color | [en] Color of the horizontal lines that divide the grid. Click the field and type the hex color code or click the square icon to open the color picker. In the color picker, select a color or click HEXA or RGBA, then click the field to the left and type a HEXA or RGBA color code, respectively. |
[en] VR Style | [en] Style of the horizontal lines that divide the grid. Click the arrow and select dashed, dottedor solid from the drop-down menu. |
[en] Pagination | [en] Attribute that defines how data is loaded into the data grid. You can set this attribute following one of the two ways described below. [en] The first way is clicking the arrow and selecting an option from the drop-down menu. Choose true to enable pagination and define that new data appear once the app user scrolls down, false so that pagination is not enabled and all data appear synchronically when the component loads or full so that all the data appear asynchronously when the component loads. By default, the component behavior defaults to false. [en] The second way is clicking the field and entering a number higher than 0, to define the number of registers showed per page or entering 0 so that all the data appear asynchronously when the component loads. |
[en] Index Position | [en] Position of the data grid index. Click the arrow and select left or right to position the index to the left or to the right side of the component. |
[en] Index Font Family | [en] Text font family or typeface of the data grid index. Para establecer una familia de fuentes, haz clic en la flecha y selecciona una opción del menú desplegable. También puedes hacer clic en </> y escribir el código para establecer manualmente la familia de fuentes del texto. |
[en] Index Font Size | [en] Text size of the data grid index. To set the size, click the field and type a value. Then, click the arrow located to the right and select the unit of measurement from the drop-down menu. |
[en] Index Font Weight | [en] Text weight of the data grid index. Para establecer el peso de la fuente, haz clic en la flecha y selecciona una opción del menú desplegable. La única opción disponible es la negrita. |
[en] IndexFontColor | [en] Text color of the data grid index. Para establecer el color, haz clic en el campo y escribe un código de color hexadecimal o haz clic en el ícono cuadrado para abrir el selector de color. En el selector de color, selecciona un color o haz clic en HEXA o RGBA, luego haz clic en el campo de la izquierda y escribe un código de color HEXA o RGBA, respectivamente. |
[en] Index Font Style | [en] Text font style of the data grid index. Para definir el estilo de fuente, haz clic en la flecha y selecciona una opción del menú desplegable. La única opción disponible es la italic. |
[en] Index Background Color | Para establecer un color, haz clic en el campo y escribe el código hexadecimal del color o haz clic en el ícono cuadrado para abrir el selector de color. En el selector de color, selecciona un color o haz clic en HEXA o RGBA, luego haz clic en el campo de la izquierda y escribe un código de color HEXA o RGBA, respectivamente. |
En esta sección, puedes establecer los atributos aplicables al contenido de texto del componente que será visible en la app. Consulta la tabla a continuación para obtener más información.
Color | Color del texto. Para establecer el color, haz clic en el campo y escribe un código de color hexadecimal o haz clic en el icono cuadrado para abrir el selector de color. En el selector de color, selecciona un color o haz clic en HEXA o RGBA, luego haz clic en el campo de la izquierda y escribe un código de color HEXA o RGBA, respectivamente. | ||||||||||
Font Size | Tamaño del texto. Para establecer el tamaño, haz clic en el campo y escribe el valor deseado. Consulte la tabla a continuación para obtener más información sobre los tipos de tamaños de texto y los valores disponibles.
| ||||||||||
Font Family | Familia de fuentes o tipo de letra del texto. Para establecer una familia de fuentes, haz clic en la flecha y selecciona una opción del menú desplegable. También puedes hacer clic en </> y escribir el código para establecer manualmente la familia de fuentes del texto. | ||||||||||
Font Style | Estilo de fuente del texto. Para definir el estilo de letra, haz clic en la flecha y selecciona una opción del menú desplegable. La única opción disponible es la cursiva. | ||||||||||
Font Weight | Peso de la fuente del texto. Para establecer el peso de la fuente, haz clic en la flecha y selecciona una opción del menú desplegable. La única opción disponible es la negrita. | ||||||||||
Text Decoration | Decoración añadida al texto. Para fijar la decoración, haz clic en la flecha y selecciona una opción del menú desplegable. La única opción disponible es el subrayado. |
Actions
En la pestaña Actions, puedes establecer animaciones para los componentes de la pantalla de tu app y determinar cómo el usuario invoca efectos y desencadena acciones mientras interactúa con la app. Consulta las secciones a continuación para obtener más información.Actions Tab
En esta sección, puedes establecer eventos o acciones en el componente que serán activados por otras acciones determinadas. La única acción disponible para la configuración es On Click, que es una acción que implica hacer clic o tocar el componente. Si configuras esta acción, se activa un evento o acción cuando el usuario de la app haga clic en el componente.
Para definir el evento o la acción, escribe la acción que deseas activar en el campo On click o haz clic en los tres puntos verticales. Se abre la ventana Create new link. Haz clic en la flecha hacia abajo y selecciona uno de los tipos de enlace disponibles en el menú desplegable: View, SW States, Process, Lambda, Pop Up, Toggle, Event, Link, Mail, Module Screen o Interface Message. Aparece un nuevo menú desplegable. Haz clic en la flecha hacia abajo y selecciona la acción o evento dentro del tipo seleccionado. A continuación, completa los parámetros aplicables a la opción seleccionada. Una vez configurados los parámetros necesarios, haz clic en Accept.
En esta sección, puedes establecer diferentes efectos sobre los atributos del componente y las animaciones a través de las cuales se producen los efectos. En primer lugar, debes seleccionar los atributos para los que deseas establecer efectos. Consulta la tabla a continuación para obtener más información.
Alpha | Transparencia u opacidad del componente. Introduce el valor para establecer la opacidad inicial del componente antes de que se ejecute la animación. El valor puede oscilar entre 0 y 1, considerando 1 como el valor que otorga el mayor nivel de transparencia. |
Scale | Dimensión del componente. Introduce el valor para establecer la escala inicial del componente antes de que se ejecute la animación. Por defecto, el valor de escala es 1, que equivale al tamaño original del componente. El valor puede ser cualquier número empezando por 1. |
A continuación, se configura la animación a través de la cual se ejecutarán los efectos previamente definidos. Consulta la tabla siguiente para obtener más información sobre las animaciones disponibles.
On Load Effect | Animación ejecutada inmediatamente después de cargar la pantalla. |
On Call Effect | Animación ejecutada al invocarla a través de un mensaje. |
En todos los casos, puedes establecer el código de la animación o configurarla con el Editor de animaciones. Para configurar la animación, haz clic en </> y, a continuación, haz clic en el campo de texto para empezar a escribir el código o haz clic en los tres puntos verticales para abrir el Editor de animación. Consulta Actions para aprender a utilizar el editor.Actions Tab
Advanced
En la pestaña Advanced, puedes configurar atributos avanzados para el componente. Consulta las secciones a continuación para obtener más información.Advanced
En esta sección, puedes configurar diferentes atributos que afectan a lo que ves en el constructor visual. Consulta la tabla a continuación para obtener más información.
Importante
Los cambios realizados en esta sección no aparecerán en la app publicada.
Background Image | Imagen aplicada al fondo del componente. Para establecer la imagen, haz clic en el campo y escribe el nombre de la imagen, o haz clic en el ícono de la lupa para abrir el selector de imágenes. A continuación, selecciona una de las imágenes disponibles en la lista o utiliza la barra de búsqueda para encontrar una imagen por su nombre. |