Veritran Docs

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.

Profile Option

Code applied in reference to the app user profile. Click the field and enter the code.

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.

HR Style

Style of the horizontal lines that divide the grid. Click the arrow and select dashed, dottedor solid from the drop-down menu.

Scroll

Attribute that defines whether the app user is able to scroll to visualize the component if it surpasses the visual area of the device screen. Click the arrow and select auto, yes, or no from the drop-down menu.

Cols

Number of columns. Click the field and enter the number of columns you want the component to display.

The default number of columns is 0.

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 branch settings.Left Panel

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.

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.

Padding properties

Space between the component's border and the component's content (value). Enter a value for each of the padding properties: Padding Top, Padding Left, Padding Bottom and Padding Right. You can click the arrow located to the right of each padding field and select the desired unit of measurement from the drop-down menu.

Margin properties

Space around a component's border. Enter a value for each of the margin properties: Margin Top, Margin Left, Margin Bottom and Margin Right. To define the unit of measurement, click the arrow in the right field and select an option from the drop-down menu.

Text Alignment

Click the desired alignment option. From left to right: none (no alignment), justified, left, centered or right, depending on whether you want the text not to be aligned, to be aligned with both left and right edges, the left edge, centered between the two edges of the component or aligned with the right edge. You can also click </> and type the code to set the text alignment manually.

Background Color

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.

Background Gradient

Color gradient defined for the component's background. To set the gradient, you must enter the gradient's direction (either horizontal or vertical) and the hex codes for the two colors of the gradient, all separated by commas. For example, to set a gradient in horizontal direction, enter the following: h,#673AB7,#949AC8. To set a gradient in vertical direction, enter: v,#673AB7,#949AC8.

Background Image

Image applied to the component's background.

To set the image, click the field and type the name of the image, or click the magnifying glass icon to open the image picker. Then, select one of the images available in 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.

Background Aspect Keep

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.

Background Horizontal Align

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.

Background Vertical Align

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.

Z-Index

Property that defines the components' position order. If several components overlap, components with a higher Z-index will be placed over those with a lower index. This field is filled in automatically.

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.

Target Var

Token where the information will be stored the app user submits the data entered in a form. To set a token, click the field and enter the token number.

VR Size

Size of the vertical lines that divide the grid. Click the arrow and select large, medium or small from the drop-down menu.

VR Color

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.

VR Style

Style of the horizontal lines that divide the grid. Click the arrow and select dashed, dotted or solid from the drop-down menu.

Pagination

Attribute that defines how data is loaded into the data grid. You can set this attribute following one of the two ways described below.

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.

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.

Index Position

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.

Index Font Family

Text font family or typeface of the data grid index.

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.

Index Font Size

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.

Index Font Weight

Text weight of the data grid index.

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

IndexFontColor

Text color of the data grid index.

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

Index Font Style

Text font style of the data grid index.

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

Index 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.

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.

Font Size

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.

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.

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.

Alpha

Effect in the 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.

Scale

Effect in the 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.

On Load Effect

Animation executed immediately after the screen loads.

On Call Effect

Animation executed upon invoking it through a message.

Background Image

Image applied to the component's background.

To set the image, click the field and type the name of the image, or click the magnifying glass icon to open the image picker. Then, select one of the images available in the list, or use the search bar to find an image by name.