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

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, select a color or enter the hexa color code in the respective 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 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.

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 Style > Themes and applied to the component. Click the field to open the drop-down menu and select one of the styles available.

Profile Option

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

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.

Exclusive Accessibility

Attribute that defines which components must be read by the screen reader. Click the arrow and select an option from the drop-down menu. Choose true to tell the screen reader to prioritize this component and its child components and ignore all other components within the screen. Choose false to tell the screen reader to read all the components within the screen. If not configured, the attribute's behavior defaults to false.

Accessibility Role

Attribute that tells the screen reader to read the component's function. Click the arrow and select an option from the drop-down menu. The options available are button, checkbox, image, imageButton, link, none, radioButton, search and switch. Choose the option that best suits the role that you want to give to the component in the screen.

Do Not Read My Children

Attribute that defines whether the screen reader must read the child components within the container component. Click the arrow and select an option from the drop-down menu. Choose true so that the screen reader reads the child components or false so that it doesn't read them. For mobile apps, if the attribute is not configured, the behavior defaults to 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.Translations

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.

Scroll

Attribute that defines whether the app user is able to scroll to visualize the component if it surpasses the visual area of the device screen. Click the arrow and select auto, yes, or no from the drop-down menu.

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.

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.

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.

Vertical Align

Vertical alignment of the component's content. To set the alignment of the content with regard to the space occupied by the component, click the arrow and select an option from the drop-down menu. The options available are: bottom, middle and top.

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.

Expires

Indicates the form and validity of the defined HTTP resource's cache. By default, no value is defined. If the field remains empty, the image will be downloaded every time it is used.

To define this attribute, click the field and enter the desired value. Refer to the table below to learn more about the values that can be configured.

Extend to Status Bar

Attribute that indicates that the background attributes of the component are extended to the device's system status bar. Click the arrow and choose an option from the drop-down menu. Select true so that the attributes extend to the status bar or false so that they do not extend.

Read Background to learn which attributes extend to the status bar.

Status Bar Style

Click the arrow and choose an option from the drop-down menu. Select dark so that the status bar is set in dark mode or light so that the status bar is set in light mode.

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.

Background Aspect Keep

Attribute that indicates that the background image set in the Background section must keep its aspect ratio and not occupy the background's total space. Click the arrow and select no so that the background image does not keep its aspect ratio or yes so that it maintains its aspect ratio.

Background Horizontal Align

Attribute that indicates the horizontal alignment of the background image defined in the Background section. Click the arrow and select an option from the drop-down menu. The alignments available are: center, left and right.

Background Vertical Align

Attribute that indicates the vertical alignment of the background image defined in the Background section. Click the arrow and select an option from the drop-down menu. The alignments available are: bottom, middle and top.

Screenshot Disabled

Attribute to determines whether screenshots can be made to the app's screen. Click the arrow and select false so that screenshots are enabled or true to disable screenshots.

Move Over Keyboard

Determines if the panel moves up whenever a virtual keyboard appears on screen. Click the arrow and select no so that the panel maintains its position and is covered by the keyboard or yes so that the panel moves up when the keyboard appears on screen.

Lazy Load

Determines if the component is created or destroyed upon a specific event or action defined in the Events and Actions section of the Actions tab. Click the arrow and choose an option from the drop-down menu. Select false to disable this behavior or true so that it can be created or destroyed while the app is being executed.

To create the component, set the value to true. Then, in the Events and Actions section, go to the action you want to behave as the trigger of the component's creation or destruction, click the field and enter the component's id and the phrase (DESTROY) or (CREATE). For example: EidPanel(CREATE).

On Swipe Down

Action executed if the app user vertically swipes the screen from top to bottom. To learn how to set an event to be triggered upon a swipe down, refer to Events & Actions.

On Drag And Drop

Action that allows the panel to be dragged and dropped in fixed positions defined as breakpoints. To configure this attribute, you must enter a JSON string.

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

Action involving clicking or tapping the component.

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.

On Load Effect

Animation executed immediately after the screen loads.

On Call Effect

Animation executed upon invoking it through a message.

On Exit Effect

Animation played before closing a screen. This effect has not been implemented yet.