Skip to main content

Veritran Docs

[en] Data Grid Head

[en] The Data Grid Head component allows you to add a header to the data grid. This component can only be configured and used once added to a Data Grid component. Refer to the sections below to learn more.

Atención

[en] Drag and drop the Data Grid Head component within the Data Grid component.

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

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

Advanced

[en] There are no attributes available for configuration in the Advanced tab for the Data Grid Head component.

[en] Data Grid Header Cell

[en] In this section, you can define the cell attributes related to its size, text content, style and events. Refer to the table below to learn how to configure a header cell.

[en] Width

[en] Cell border width. Type a number to set the width. To define the unit of measurement, click the arrow in the right field and select an option from the drop-down menu.

[en] Height

[en] Cell border width. Type a number to set the width. To define the unit of measurement, click the arrow in the right field and select an option from the drop-down menu

Font Size

[en] Cell text size. To set the size, click the field and type the desired value. Refer to the table below to learn more about the types of text sizes and values available.

Tamaño absoluto estándar

Introduce cualquiera de los siguientes valores: xx-small, x-small, small, medium, large, x-large y xx-large.

Tamaño relativo

Introduce cualquiera de los siguientes valores, donde cada constante representa una porción fija de la pantalla: rel-xx-small (1/54); rel-x-small (1/40); rel-small (1/30); rel-medium (1/22); rel-large (1/15); rel-x-large (1/10) y rel-xx-large (1/5).

Tamaño absoluto en píxeles

Introduce un valor seguido del sufijo px. Por ejemplo, 6px.

Tamaño en milímetros

Introduce un valor seguido del sufijo mm. Por ejemplo, 6mm.

Tamaño en función del número de filas de la línea de base

Introduce un valor seguido del sufijo br. Por ejemplo, 2br. Puedes utilizar números decimales.

[en] 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.

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.

[en] 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.

Alineación del texto

[en] Cell content alignment. Click the desired text alignment option. From left to right: justified, left, centered or right, depending on whether you want the text to be aligned with both left and right edges, the left edge, centered between the two edges of the cell or aligned with the right edge.

[en] Vertical align

[en] Cell content position. Click the field and select an option from the drop-down menu to define the position of the content within the cell. The options available are: bottom, middle, top.

[en] Background Color

[en] Cell background color. To set a color, 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] Background Gradient

Haz clic en el botón de radio Gradient para establecer un gradiente de color para el fondo del componente. Haz clic en cada uno de los íconos cuadrados 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 para formar la gradiente de color. Haz clic en Switch direction para invertir el orden de los colores seleccionados para el degradado. Haz clic en Change to horizontal direction o Change to vertical direction para definir la dirección del degradado en posición horizontal o vertical, respectivamente.

Background Image

Haz clic en la casilla Image para añadir una imagen al fondo del componente. Puedes utilizar una imagen de fondo con las opciones de fondo flat y gradient. Haz clic en el campo Background Image y escribe el nombre de la imagen de fondo, o haz clic en Select an image para abrir el selector de imágenes. Selecciona una de las imágenes de 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] Expires

Indica la forma y validez de la caché del recurso HTTP definido. Por defecto, no se define ningún valor. Si el campo permanece vacío, la imagen se descargará cada vez que se utilice.

Para definir este atributo, haz clic en el campo e introduce el valor deseado. Consulta la tabla a continuación para obtener más información sobre los valores que se pueden configurar.

session

La imagen será válida hasta que el usuario cierre la app o salga de ella.

Never

La imagen no se borrará de la caché.

M:[número de días de un mes, separados por comas].

Nota

Para especificar el último día del mes, utiliza la palabra last en lugar del número.

La imagen es válida hasta el día o días especificados. Se aplica a todos los meses del año. Por ejemplo: M:1,10, 20, last

W:[días de la semana, separados por comas].

Nota

Para especificar los días de la semana, utiliza las siguientes expresiones (en orden): mo, tu, we, th, fr, sa y su.

La imagen es válida hasta el día o días especificados. Se aplica a todas las semanas del mes. Por ejemplo, W: mo, fr, sa.

[número de horas]h

La imagen es válida durante el número de horas especificado, desde el momento en que se carga. Por ejemplo, 12h.

[número de días]d

La imagen es válida durante el número de días especificado, desde el momento en que se carga. Por ejemplo, 10d.

[cantidad de segundos]s

La imagen es válida durante la cantidad de segundos especificada, desde el momento en que se carga. Por ejemplo, 25s.

[YYYYMMddHHmmss]

La imagen es válida hasta la fecha y hora especificadas (incluyendo año, mes, día, horas y minutos). Entonces, la imagen se cargará cada vez hasta que se cambie el valor. Por ejemplo, 20151231182056.

Sugerencia

Independientemente de este atributo, si el usuario de la app elimina la app o sus datos, las imágenes almacenadas en caché también se eliminarán.

Propiedades de relleno

[en] Space between the cell border and the cell content. Enter a value for each of the padding properties: Padding Top, Padding Left, Padding Bottom and Padding Right. To define the unit of measurement, click the arrow in the right field and select an option from the drop-down menu.

[en] On Click

[en] Attribute that defines an event or action to be triggered when clicking the cell. To learn how to set the event or action to be triggered, read the Events and Actions section in Actions.Actions Tab

[en] Position

[en] Position of the cell within the row. Click the field and enter the position number.