Veritran Docs

CSS Class

CSS or style invoked from Global Design > Themes and applied to the component. Click the field and select a style from the drop-down menu.

Profile Option

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

Value

Text displayed in the component that informs the app user about the data to be entered. You can add plain text or a reference to a parameter or register. You can also add the value to the translations dictionary or select an existing translation if there are languages selected in the context's settings.

Single Line

Attribute that indicates that the text value must be displayed in a single line within the component. Click the field and select true to enable this option or leave the field empty.

Single Line Mode

Attribute that indicates how the text value of the component is reduced to be displayed in a single line. The options available are: Ellipsis End, EllipsisMiddle, EllipsisStart, Stretch, TrimChar, TrimWord.

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.

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.

Tab Index

Order in which the cursor moves from one component to another and focuses on each component by pressing the TAB key on a keyboard (web apps) or tapping Next (mobile apps in Android devices). Click the field and enter a value.

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.

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.

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.

Background Color

Component's 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

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 add an image, click the Background Image field and type the name of the background image, or click the magnifying glass icon to open the image picker. 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.

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 a 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 a 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 field and type a hex 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.

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.

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.

On Double Click

Action involving clicking or tapping the component twice.

On Click

Action involving clicking or tapping the component.

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.

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.

On Load Effect

Animation executed immediately after the screen loads.

On Call Effect

Animation executed upon invoking it through a message.

Tooltip Enabled

Determines whether the tooltip is enabled in the app for the selected component. Click the arrow and choose an option from the drop-down menu. Select true to enable the tooltip or false to disable it.

Message

Message displayed by the tooltip. Enter a message to be displayed on screen.

Color

Tooltip text 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.

Font Size

Tooltip 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

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

Background Color

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

Position

Click the arrow and select an option from the drop-down menu to set the position of the tooltip with regard to the component: Bottom, Left, Right or Top.

Value

Attribute that simulates the behavior of the Value attribute from the Basic section in the Design tab. Click the field and type a value to see it applied to the component automatically.

Background Image

Image applied to the component's background.