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.

Charset

Set of characters supported by the component. This expression defines the characters that are valid and can be entered by the app user in the component's field. To set the charset, click the field and enter the charset or click the magnifying glass icon to open the charset picker. In the charset picker, go through the list to find the desired charset and click Select. The options available are: Alphabetic, Alphabetic lower case, Alphabetic upper case, Alphanumeric and Numeric.

Form Id

Id of the form to which the text input belongs. This attribute must be configured only if the component is part of a form. To set the id, click the field and enter the id value.

Submit Button

Component id of the button used to submit the data entered in a form. This attribute must be configured if the text input is part of a form. To set the id, click the field and enter the value.

Submit Button Text

Text included in the submit button. This attribute must be configured with the text defined in the Submit Button component. To set the text, click the field and enter the value.

Enable Code Autofill

Attribute that includes the Security Code Autofill feature, through which OTP codes received via SMS appear as automatic autofill suggestions. The OTP code will be detected as a suggestion if the text includes the word CODE (or its translation) followed by a space and the OTP code.

To configure this attribute, click the arrow and choose one of the two values in the drop-down menu. Select true to enable the auto-fill suggestions or select false so suggestions are not enabled.

Required

Attribute that defines whether the app user must enter data in the text input field. You can either leave the field empty or click the arrow and select true so that the text input is required.

Display Name

Placeholder defined for the component's text displayed on screen. To set the text, click the field and enter a value.

Input Msg

Message received by the app user if the data entered in the text input field is invalid. To set a message, click the field and enter the text.

Regexp

Regular expression that validates the data entered by the app user into the component's field. To set the expression, click the field and type it or click the the magnifying glass icon to open the RegEx picker. In the picker, go through the list to find the desired expression and click Select. The options available are: Any, Email, Float, X Characters and X to Y Characters.

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.

Auto dump

Token where the Value attribute of the component will be stored every time such attribute changes. To set a token, click the field and enter the token number.

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

Min Length

Minimum number of characters that the app user can enter in the text input field. To set the minimum length, click the field and type a numeric value.

Max Length

Maximum number of characters that the app user can enter in the text input field. To set the maximum length, click the field and type a numeric value.

Enabled

Attribute that defines whether the component can be edited by the app user, which means that the app user can enter text.

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.

Enabled Selectors

Attribute that allows you to enable or disable date selectors. Click the arrow and choose a value from the drop-down menu. Select true to enable date selectors or false to disable them. The default value is false.

Date Mask

Date mask format. To set a date format, click the arrow and select one of the options available: DD-MM-YYYY, DD-MMM-YYYY, DD-MMMM-YYYY, DD/MM/YYYY, DD/MMM/YYYY or DD/MMMM/YYYY. The default value is DD/MM/YYYY.

Active preview date

Attribute that activates the preview of the date entered. Click the arrow and choose an option from the drop-down menu. Select true so that the preview is activated or false so that the preview is not activated.

Date Language

Click the arrow and select one of the options available: English, French, Portuguese or Spanish.

Disable Weekends

Selector used to disable weekends from the calendar. Click the arrow and choose one of the two values from the drop-down menu. Select true so that weekends are disabled or false to keep them enabled.

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.

The default value is true.

Disabled Copy/Paste

Attribute that disables the copy/paste options for web apps so that the app user cannot copy and paste texts when entering text into the text input field. Click the arrow and choose one of the values from the drop-down menu. Select true so that the copy/paste option is disabled or false to keep it enabled.

Encode File

Token where the data of the file's Encode attribute will be stored after the On Change action—set in the Actions tab—is executed. Click the field and enter the token.

Call onDateInputComplete when clean

Click the arrow and choose a value from the drop-down menu. Select true or false.

Normalize padding

Attribute that normalizes the padding in iOS devices, so that the data entered by the app user is displayed in the same way as it is displayed in Android devices. Click the arrow and choose an option from the drop-down menu. Select true so that padding is normalized or false so that no changes are applied to the component's padding.

Keyboard Options

Attribute that defines the behavior of the virtual keyboard. Click the arrow and choose an option from the drop-down menu. Refer to the table below to learn more about the options available.

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.

Border Color Focus

Color set to the component's border when the component is on focus. 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.

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.

Separator

Text that specifies how start and end dates are separated. For example, in "04/01/2021 to 04/15/2021", the separator is "to".

Menu date range

Configuration of the left menu displayed in a calendar preview. It must be set in JSON format.

End Date Autodump

Token where the end date will be stored. Enter the token value.

End Date Value

End date displayed as DD/MM/YYYY. Click the field and enter the date.

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.

Style

This attribute is deprecated.

On Complete Valid

Action executed if the app user completes the text field with the number of characters configured and the data entered is valid according to the regular expression defined. To learn how to set this to be triggered, refer to Events & Actions.

On Complete Invalid

Action executed if the app user completes the text field with the number of characters configured and the data entered is invalid according to the regular expression defined. To learn how to set this to be triggered, refer to Events & Actions.

On Valid

Action occurring after an onChange event—which implies changing the component's text value and is set in the Actions tab of the right panel—is executed by the app user and it complies with the regular expression and the minimum and maximum length values defined. To learn how to set this to be triggered, refer to Events & Actions.

On Invalid

Action occurring after an onChange event is executed by the app user and it fails to comply with the regular expression and the minimum and maximum length values defined. To learn how to set this to be triggered, refer to Events & Actions.

On Clear

Action to be executed when the app user enters the last character into the component's field. To learn how to set this to be triggered, refer to Events & Actions.

Input Mask

Attribute that allows the use of different types of data input (for example, currency or decimals).

Type

Attribute that specifies how the functionality of the component can be visually implemented. Click the arrow and select an option from the drop-down menu. The options include: calendar, date, dateRange, email, file, mask, number, PIN, rutchile, text, textMultiline, timePicker and url.

Protect with captcha

Attribute that adds an input to Google reCAPTCHA protection feature. To configure this attribute, click the arrow and choose one of the two values in the drop-down menu. Select true to add an input to the protection feature or select false to refrain from adding it.

Custom File Loader

Click the arrow and choose a value from the drop-down menu. Select true or false.

Custom File Button Text

To learn how to configure this attribute, contact your admin.

Custom File Empty Text

To learn how to configure this attribute, contact your admin.

Target Var File Name

Click the field and enter the target var file name.

Min Limit Date

Attribute that indicates the number of days visible in the calendar prior to the current date—date on which the app user is using the app. If no number is set, no minimum limit date will be defined in the calendar. Click the field and enter the desired number of days.

Max Limit Date

Attribute that indicates the maximum number of days visible ahead of the current date. If no number is set, no maximum limit date will be defined in the calendar. Click the field and enter the desired number of days.

File Filter Type

Standard code applicable to the file type displayed by the file upload window. Click the field and enter the code.

Datepicker Button Image

Image on the date picker button. 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 and click it.

Hide Clear Button

Attribute that hides the button that allows the app user to clear the data entered in the component's text field. Select true to hide the button or select false so that the button is displayed in the app.

Hint

Hint text. To set the content, click the field and enter the desired word or phrase.

Hint Color

Hint text color. 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.

Hint Font Size

Hint 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. Then, click the arrow and select a unit of measurement from the drop-down menu to the right.

Hint Font Family

Hint 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 font family manually.

Hint Font Style

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

Hint Font Weight

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

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

Left Icon

To set an icon on the left side of the component, 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.

Left Icon Color

To set a color for the icon located to the left, 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.

Right Icon

To set an icon on the right side of the component, 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.

Right Icon Color

To set a color for the icon located to the right, 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.

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.

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

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

On Click

Action involving clicking or tapping the component.

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.

On Change

Action involving changing the component's value.

On DateInput Complete

Action involving completing a date in a date field by typing the date or selecting it from the calendar.

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.

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.

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.

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.