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.

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.

Color

Border color. To set the color, click the field and type a hexa code or click the rounded-edges square icon to open the color picker. In the color picker, enter the hexa color code.

Opacity

You can also set the opacity percentage outside the color picker. If you previously selected a color in the color picker, the opacity is set in 100 by default. If no color was selected, this field is empty. To modify it, click the Opacity field and enter the desired percentage.

Width

Border width. Type a number to set the width. To change the unit of measurement, click the ellipsis (three dots) and select an option from the drop-down menu.

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, Hover, Pressed, 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.

Icon

To set an icon, 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.

Icon Color

To set a color for the icon, click the field and type a hex color code or click the square icon to open the color picker. click the Shadow 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 color code and modify the opacity (if necessary) in the respective fields.

You can also set the opacity percentage outside the color picker in the Opacity field. If you previously selected a color in the color picker, the opacity is set in 100 by default. If no color was selected, this field is empty. To modify it, click the field and enter the desired percentage.

Value

Text displayed in the component that informs the app user about the use or action of the button. You can add plain text or a reference to a parameter or register. You may also be able to add the value to the translations dictionary or select an existing translation if there are languages selected in app settings.TranslationsApp Settings

Submit

Id of the form to be processed. When processing a form, all the fields associated to that form id are validated. Click the field and enter a form id.

Enabled

Attribute that defines whether the component can be used or edited by the app user.

Click the arrow and choose one of the two values from the drop-down menu. Select true so that the component can be clicked by the user or false so it cannot be clicked. Disabled buttons will appear grayed out in the app. The default value is true.

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.

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.

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.

You can also set the opacity percentage outside the color picker in the Opacity field. If you previously selected a color in the color picker, the opacity is set in 100 by default. If no color was selected, this field is empty. To modify it, click the field and enter the desired percentage.

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.

Back Button

Attribute that indicates whether the event defined in the onClick attribute must be executed when the app user clicks or taps the back button. Click the arrow and choose one of the options available in the drop-down menu. Select true so that the event is activated or false so that the event is not activated. The default value is false.

Force Show

Attribute that tells the device to show a back button, even if it does not apply. Click the arrow and choose one of the options available in the drop-down menu. Select true so that the back button is shown or false so that it is not shown. If this attribute is not configured, the default value is false.

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.

You can also set the opacity percentage outside the color picker in the Opacity field. If you previously selected a color in the color picker, the opacity is set in 100 by default. If no color was selected, this field is empty. To modify it, click the field and enter the desired percentage.

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.

On Click

Action triggered when the user clicks or taps the component.

On Click Tracking Event

Action involving tracking On Click actions. To learn more about how to create a tracking event and add it to a component in your app, refer to the Tracking section.GA4 Tracking

On Double Click

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

On Hold

Action involving clicking the component and maintaining it clicked for more than one second.

On Focus

Action involving focusing on the component. For example, tapping on the component's text field to begin typing.

On Blur

Action involving losing focus on that same 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.