Card

Veritran Docs

Card

The Card component is one of the components that must be added to the Card Container to be able to use it. It behaves as an independent container with its own components and content. To insert a Card component in the screen, go to the Left Panel in the Visual Builder. Go through the list of components to find the Card component or click the search bar and type its name. Then, drag and drop the component into the canvas and configure its attributes in the right panel. Refer to the sections below to learn more.Building Tabs and Left Panel

Warning

The Card component must be dragged and dropped within the Cards Group component. Check the treeview and make sure you follow the hierarchical structure defined for the Card Container.

Attributes

In the right panel, you can configure different attributes to customize the component. Refer to the sections below to learn more.Right Panel

Design

In the Design tab, you can configure the selected component's basic information and the attributes that determine how the component will look like in the app. Refer to the sections below to learn more.Design

In this section, you can configure basic attributes of the component. Refer to the table below to learn more.

Type	Attribute that defines whether the component is fixed or variable as part of a container. To set the type, click the arrow and choose an option from the drop-down menu. Select F to indicate a single element or V so that all the elements of the group are added, according to a specific array to be defined.
Array	Id of the array from which the data is retrieved and displayed on screen. Enter the array number. Important This attribute must be configured only if the Type attribute is set as V (variable).
Value	This field must not be configured.
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 context settings.TranslationsSettings

Actions

In the Actions tab, you can set animations for the components in your app's screen and determine how the user invokes effects and triggers actions while interacting with the app. Refer to the sections below to learn more.Actions

In this section, you can set events or actions that will be triggered by a certain action. In this case, the only trigger action that can be configured is On Click. Therefore, an event or action will be triggered only when the app user clicks the component.

To configure it, type the action to be triggered in the On Click field or click the vertical three-dot icon. The Create new link window opens. Click the down arrow and select one of the link types available in the drop-down menu: View, SW States, Process, Lambda, Pop Up, Toggle, Event, Link, Mail, Module Screen or Interface Message. A new drop-down menu appears. Click the down arrow and select the action or event within the selected type. Then, complete the parameters applicable to the option selected. Once you configure the required parameters, click Accept.

Advanced

There are no attributes that can be configured in the Advanced tab for the Card component.

In this section:

Was this helpful?

Would you like to provide feedback? Just click here to suggest edits.

Veritran Docs

Card

Warning

Attributes

Design

Important

Actions

Advanced

Search results