Veritran Docs

Flat

Click the Flat radio button to set a single color for the component's background. 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.

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.

Gradient

Click the Gradient radio button to set a color gradient for the component's background. Click each of the rounded-edges square icons to open the color picker. In the color picker, enter the hexa color code in the Hexa field. Click to invert the order of the colors selected for the gradient. Click or 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.

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.

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.

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 or rgba color code.

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 the context 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 clicked by the app user or not.

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

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.

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

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

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.

On Click

Action involving clicking or tapping 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 involving clicking or tapping 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.

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

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.

Image applied to the component's background for simulation purposes. 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 from the list or use the search bar to find an image by name.