Veritran Docs

X

Position of the component in the canvas with regard to the x axis. Enter a number in the field and then select the % or px unit of measurement.

Y

Position of the component in the canvas with regard to the x axis. Enter a number in the field and then select the % or px unit of measurement.

R

Angle with the vertical axis in which the component is positioned.

W

Width of the component with regard to the screen size.

H

Height of the component with regard to the screen size.

Margin properties

Space around a component's border. To configure the margins, click the number field of each margin (left, right, top, bottom) and enter the desired value. Then, click the unit of measurement located to the right and select the px or % option from the list.

Padding properties

Space between the component's border and the component's content (value). To configure the paddings, click the number field of each margin (left, right, top, bottom) and enter the desired value. Then, click the unit of measurement located to the right and select the px or % option from the list.

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.

State

Attribute that allows you to simulate the appearance of the component under a specific state. States are defined in the Styles section of the theme applied to the app and define the appearance of the component under specific circumstances - to apply the state style to a component, you must set the logic in the right panel, indicating the app that, under a specific event, the component must change its default state.

Select an option from the drop-down menu: Active, Success, Error, Disabled. Learn more about each option below.

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.

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

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

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

Component's 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. and type the HEXA color code in the Hexa field. To set the opacity, go to the Opacity field and enter a number up to 100. You can also set the opacity outside the color picker in the Opacity field next to the color field.

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. To set the opacity, go to the Opacity field and enter a number up to 100. You can also set the opacity outside the color picker in the Opacity field next to the Background color field.

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.

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

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. and type the HEXA color code in the Hexa field. To set the opacity, go to the Opacity field and enter a number up to 100. You can also set the opacity outside the color picker in the Opacity field next to the Background color field.

Font 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

To set a font family or typeface, 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

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. and type the HEXA color code in the Hexa field. To set the opacity, go to the Opacity field and enter a number up to 100. You can also set the opacity outside the color picker in the Opacity field next to the Background color field.

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.

Line Spacing

Determines the space between lines in the component text. By default, it is configured with the font value for the font size selected. To set the spacing, enter a number (integer or decimal) and the expression px. For example: 12px or 12.5px.

If you set the value in 0px, the font lines will overlap. If you write a value in letters only (for example, newtest, the configuration won't have effect and it will apply the default value explained above.

Character Spacing

Determines the space between characters in the component text. By default, it is configured with the font value for the font size selected. To set the spacing, enter a number (integer or decimal) and the expression px. For example: 12px or 12.5px.

If you set the value in 0px, the spacing will be the default spacing of the font used. If you write a value in letters only (for example, newtest, the configuration won't have effect and it will apply the default value explained above.

Font 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

To set a font family or typeface, 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

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

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

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

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. and type the HEXA color code in the Hexa field. To set the opacity, go to the Opacity field and enter a number up to 100. You can also set the opacity outside the color picker in the Opacity field next to the Background color field.

On Double Click

Action triggered when the user clicks or taps the component twice.

On Click

Action triggered when the user clicks or taps 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.