Overview

Tabs are a group of tab component used to navigate and allow users to switch between different views or sections within the same layout. Each tab represents a distinct section, and selecting a tab displays its associated content while hiding the content of other tabs.

Tabs help organize content into manageable sections, enabling users to navigate and access information efficiently without loading new pages or screens

Attributes

Attributes are the options available for each component, allowing you to customize its appearance and control their behavior. It includes various sections explained below.

Basic:

Attribute Name	Description
Component Size	This allows users to modify the size of a specific component according to the grid size of layout. For example, If the layout grid size is 3 then layout is divided into 3 sections then you can changes the components size between 1 to 3.
Layout Type	It is used to set the layout type in two ways as: Grid: The Grid type divides a component into a specified number of columns. The grid size determines the number of available columns. Flow: The Flow Layout Type is used for positioning and formatting components within a layout. This layout type allows components to be positioned in relation to each other. Note: By default, this attribute is set to a value of Grid Layout Type.
Default Tab	If you have multiple tabs, select the number to set the default tab.
Overflow Limit	This feature lets you control the number of tab. Setting the limit to 1 will show only one tab, with other appearing in a dropdown menu.

Config:

Attribute Name	Description
Show As Wizard	Enables a step-by-step navigation experience within the tabs. When enabled, users can progress through steps in a structured manner
Allow Invalid Switch	Allows users to move between tabs even if the current step contains validation errors
Allow Switch by Tab	Enables users to navigate between steps using tab selection. Users can switch steps by clicking on tabs instead of using navigation buttons
Hide Progress Indicator	If checked, the progress indicator that visually represents the steps in the wizard will be hidden
Show Submit	Displays the submit button within the wizard interface, allowing users to complete the form submission
Submit Label	Defines the label text for the submit button, enabling customization with merge text
Save on Switch	Automatically saves the progress when switching between steps to prevent data loss
Override Next	Allows customization of the "Next" button’s behavior, enabling users to define specific actions when proceeding to the next step
Override Previous	Allows customization of the "Previous" button’s behavior, enabling users to define specific actions when navigating back to a previous step

UI State:

Attribute Group

Attribute Name

Description

Visibility

Visibility Type

It determines whether a component is visible on the layout. It offers the following visibility types:

Always: The component will always be visible.
Conditional: The component's visibility is determined based on specific criteria, which can make it either visible or hidden as needed.
You can explore more about conditional visibility

Reference: Conditional Visibility.

Base UI:

Attribute Name	Description
Margin Location	"Margin Location" refers to the spacing around the outside edge of an element
Margin Size	"Margin Size" refers to the amount of space around the outside edges of an element

Note: After clicking inside the tab section on the layout, you will see the tab configuration.

Tab Configurations

Events

Events are essentially the automation of invoking the component's actions.
Here, only onload event actions are available for this components.

In the image below, you can select the created workflows.

Note: You need to create a workflow for selecting from this list.

For more information about Workflow check this out.

Reference: Workflow

onload Events:

We have an onload event that runs when the component is loaded.

For example, when a form is loaded, you can choose fields to be prepopulated by mapping field values using input mapping at the time the form component is loaded.

Input Mapping

Whenever an event is triggered and you want to pass data to destinations such as models, variables, or components, you can use input mapping to achieve that.

After clicking on Pencil icon, user can view the screen to set Input Mapping as follows:

After clicking on + button, user can set up input mapping using Input Mapping Screen as follows:

Condition	Description
Destination Type	It specifies the destination where the connector mapping is to be done. Reference: Destination Type Note: By default, the `Destination Type` is set as `Model`.
Model	It is specifically dependent on Destination Type one chooses. If you choose another Destination Type, you will get that field label here.
Note: Fields below this will only be enabled once user filled above two fields.
Field	After choosing the second condition field, you will get this field visible in modal. If you chose Model as second condition field, this will be field and if you chose variable as second field, there will be variable.
Operator	It is specifically operator value such as Set, Equals, Greater than, Equals than.
Source Type	In this option, you can select various sources from which you want to display values. Reference: Source Type Note: By default, the `Source Type` is set as `Static`.
Value	The available options will change depending on the selected source type. For example, if you choose "Static" as the source, you can provide a fixed static value.

Destination Type

Label Source Type Attribute	Description
Model	From this source, users can select a Model field to be displayed as the label name.
Variable	Here, users can select the label name from variables such as Record ID, Is Disabled, Is Read only, or Is Visible.
Input Variable	Here, users can select the input variable which they have created earlier.
Cookie key	By using the `Cookie Key`, the result is fetched by the value that has been added under the Cookie Key. But, have to make sure that the value that we are adding is from the Cookie Key value.
Local Storage Key	By using the `Local Storage Key`, the result is fetched by the value that has been added under the Local Storage Key. But, have to make sure that the value that we are adding is from the Local storage value.

Source Type

Source Type	Description
Static	Use this option to provide a fixed static value.
Field	Select the field from the chosen object in the model whose value you want to include.
Model	Choose the field from other models whose value you want to include.
Variable	Select from the variables created in the layout whose value you want to use as `Source`.
Output Variable	Select from the output variables created in the layout whose value you want to use as `Source`.
Cookie Key	Choose the available cookie key whose value you want to include from your browser.
Local Storage Key	Select the available Local Storage Key whose value you want to include from your browser.
User	You can also select fields from the current logged-in user in your organization to include in the merge. Note: The User source refers to the currently logged-in user in your organization. This means that if you include the `First Name` field from the user, each time a different user logs in, they will see their own First Name displayed.
Null	It enables assign null value to the Destination Type field we chose.
Blank	It enables assign blank value to the Destination Type field we chose.