Data Grid Head

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.

Caution

Drag and drop the Data Grid Head component within the Data Grid component.

Attributes

In the right panel, you can configure different attributes to customize the component. Refer to the sections below to learn more.Right Panel

Design

In the Design tab, you can configure the selected component's basic information and the attributes that determine how the component will look like in the app. Refer to the sections below to learn more.Design

In this section, you can configure basic attributes of the component. Refer to the table below to learn more.

CSS Class	CSS or style invoked from Style > Themes and applied to the component. Click the field to open the drop-down menu and select one of the styles available. Tip You can add more than one style.
Cells	Header cells. Click the field to open the Data Grid Row Cells panel, then click add item to add a new cell to the row. The cell created appears listed. Click the cell created and configure it in the attributes section that appears to the right of the panel. Refer to the Data Grid Header Cell section to learn learn more about the cell attributes.
Visible	Attribute that defines whether the component is visible in the app. Click the arrow and choose an option from the drop-down menu. Select true so that the component is visible in the app or false so that it is not visible.
Important For Accessibility	Attribute that defines whether the screen reader reads or ignores the value defined in the Accessibility Text attribute of the component. Click the arrow and select an option from the drop-down menu. Choose true so that the screen reader reads the component or false so that the screen reader does not read the component. The default value is false.
Accessibility Text	Alternative text. Add a short text to describe the component to users who may not be able to see it. The text will be read by iOS Voice Over or Android Talk Back. You can also add the accessibility text to the translations dictionary or select an existing translation if there are languages selected in your context settings.TranslationsSettings
Accessibility Order	Attribute that tells the screen reader the order in which it must read the components. To configure it, click the field and enter a number to define the order. For example, if this component should be read in third place, enter the value 3. If you don't configure a custom order, components are read from top to bottom and left to right of the screen.

In this section, you can configure the size and position attributes of the component. Refer to the table below to learn more.

Position Type

Click the arrow and select a type from the drop-down menu. Refer to the table below to learn more about the options available.

Absolute	Position of the component determined by the X and Y axes.
Fixed	This value is not implemented.
Relative	Vertical and horizontal displacement from the original position of the component.

Abs. Left

Click the field and enter the abs. left (X) value. To define the unit of measurement, click the arrow in the right field and select an option from the drop-down menu.

Abs. Top

Click the field and enter the abs. top (Y) value. To define the unit of measurement, click the arrow in the right field and select an option from the drop-down menu.

In this section, you configure the attributes to align the text within the component and set margin and padding properties. Refer to the table below to learn more.

In this section, you configure the attributes to align the text within the component and set margin and padding properties. For the Data Grid Head component, you can only configure the Margin Left and Margin Right attributes, which refer to the space around a component's border. Enter a value for each of the margin properties. To define the unit of measurement, click the arrow in the right field and select an option from the drop-down menu.

In this section, you configure the style of the component. Refer to the table below to learn more.

HR Size	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.
HR Color	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.

In this section, you configure parameters applicable to the shadows of the component.

Shadow offset-x	Enter a value for the shadow with regard to the X (horizontal) axis, which considers the center of the component as starting point. If the value is a negative number, the shadow will point to the left. You can click the arrow located to the right of the shadow field and select a unit of measurement from the drop-down menu.
Shadow offset-y	Enter a value for the shadow with regard to the Y (vertical) axis, which considers the center of the component as starting point. You can click the arrow located to the right of the shadow field and select a unit of measurement from the drop-down menu.
Shadow Blur Radius	Enter a value for the width of the shadow radius. You can click the arrow located to the right of the shadow field and select a unit of measurement from the drop-down menu.
Shadow Color	To set the shadow color, click the Shadow Color field and type a hexa color code or click the rounded-edges square icon to open the color picker located to the left (rounded-edges square icon). In the color picker, select a color or enter the hexa or rgba color code.

Actions

In the Actions tab, you can set animations for the components in your app's screen and determine how the user invokes effects and triggers actions while interacting with the app. Refer to the sections below to learn more.Actions

In this section, you can set different effects on the component's attributes and the animations through which the effects take place. For this component, you can only set effects on different attributes. Refer to the table below to learn more.

Alpha	Component’s transparency or opacity. Enter the value to set the initial opacity of the component before the animation is executed. The value can range from 0 to 1, considering 1 as the value that grants the highest level of transparency.
Rotation	Component's rotation angle. Enter the value to set the component's initial angle of rotation before the animation is executed. The value can go from 0 to 90, and it is expressed in degrees.
Scale	Component's dimension. Enter the value to set the initial scale of the component before the animation is executed. By default, the scale value is 1, which equals the component’s original size. The value can be any number starting on 1.

Advanced

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

Data Grid Header Cell

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.

Width

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.

Height

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

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.

Standard absolute size	Enter any of the following values: xx-small, x-small, small, medium, large, x-large and xx-large.
Relative size	Enter any of the following values, where each constant represents a fixed portion of the screen: 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) and rel-xx-large (1/5).
Absolute size in pixels	Enter a value followed by the suffix px. For example, 6px.
Size in millimeters	Enter a value followed by the suffix mm. For example, 6mm.
Size according to the number of base line rows	Enter a value followed by the suffix br. For example, 2br. You can use decimal numbers.

Font Family

Text font family or typeface. To set a font family, click the arrow and select an option from the drop-down menu. You can also click </> and type the code to set the text font family manually.

Font Style

Text font style. To set the font style, click the arrow and select an option from the drop-down menu. The only option available is italic.

Font Weight

Text font weight. To set the font weight, click the arrow and select an option from the drop-down menu. The only option available is bold.

Color

Text color. To set the color, click the field and type a hexa color 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.

Text Decoration

Decoration added to the text. To set the decoration, click the arrow and select an option from the drop-down menu. The only option available is underline.

Text Alignment

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.

Vertical align

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.

Background Color

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

Background Gradient

Click the Gradient radio button 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

Click the Image checkbox to add an image to the component's background. You can use a background image with both the Flat and Gradient background options. Click the Background image field and type the name of the background image, or click the upload icon to open the image picker. Select one of the images from the list or use the search bar to find an image by name.

Resource Origin

Method through which the resource referenced by the component is loaded. Fill in this field if the component selected references a resource, like an image or a video. Click the arrow and select one of the options available in the drop-down menu: choose L (Local) to retrieve the coded content from the local resources or choose H (HTTP) to retrieve the resource content from the Comm Server.

Expires

Indicates the form and validity of the defined HTTP resource's cache. By default, no value is defined. If the field remains empty, the image will be downloaded every time it is used.

To define this attribute, click the field and enter the desired value. Refer to the table below to learn more about the values that can be configured.

session	The image is valid until the app user closes the app or signs out of the app.
Never	The image won't be deleted from the cache.
M:[number of days in a month, separated by commas] Note To specify the last day of the month, use the word last instead of the number.	The image is valid up to the day or days specified. It applies for every month of the year. For example: M:1,10, 20, last
W:[days of the week, separated by commas] Note To specify the days of the week, use the following expressions (in order): mo, tu, we, th, fr, sa and su.	The image is valid up to the day or days specified. It applies for every week of the month. For example, W: mo, fr, sa.
[amount of hours]h	The image is valid for the number of hours specified, from the moment it loads. For example, 12h.
[number of days]d	The image is valid for the number of days specified, from the moment it loads. For example, 10d.
[amount of seconds]s	The image is valid for the amount of seconds specified, from the moment it loads. For example, 25s.
[YYYYMMddHHmmss]	The image is valid up to the date and time specified (including year, month, day, hours and minutes). Then, the image will load every time until the value is changed. For example, 20151231182056.

Tip

Regardless of this attribute, if the app user deletes the app or its data, cached images will be deleted too.

Padding properties

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.

On Click

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

Position

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

In this section:

Veritran Docs