Section
Overview
The Section component functions as a container for grouping other components, such as Forms, Tables, and Badges. It provides a structured method to organize and display information within the application.
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 | Description |
---|---|
Component Size |
For example, |
Layout Type | It is used to set the layout type in two ways as:
Note: By default, this attribute is set to a value of Grid Layout Type. |
Grid Size | It defines how many columns you want to divide the component into. For example, if you set the grid size to 3 for a component, you can arrange the content inside it across three columns. |
Header | This field allows users to add a title or heading to the section. You can also assigned Header using merge text. |
No Header | This checkbox enables users to hide the section's header. |
Is Collapsible | This checkbox allows users to make sections collapsible. |
Actions | This allows users to add multiple actions to a section, each represented as a button. It enables users to invoke workflows directly from the section header. |
Overflow After | If the number of actions exceeds the provided limit, the additional actions will be displayed in a dropdown. |
Show Border | It is used to simply add border surrounding the section. |
UI State:
Attribute | Description |
---|---|
Visibility Type | It determines whether a component is visible on the layout. It offers the following visibility types:
|
Read Only Type | It specifies whether a component can be edited by users. It offers the following options:
|
Base UI:
Source Type:
Label Source Type Attribute | Description |
---|---|
Static | It includes only records from the manually input value. |
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. |
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. |
User | Here, you can choose the label from user fields such as First Name, Last Name, Email, Name, Phone, or Session ID. |
Header Actions:
Header Action Attributes | Description |
---|---|
Label | A Label is the name shown to users and can come from various sources. |
Name | Enter a unique API name for your action. |
Icon | This option lets you choose from various icons to add to the action button. |
Variant | This feature allows users to change the appearance of the action button. You can explore more about variants |
Visibility Type | It determines whether a component is visible on the layout. It offers the following visibility types:
|
Disability Type | It determines whether a component is disable on the layout. It offers the following visibility types:
|
Variants:
Variant | Description |
---|---|
Neutral | Neutral is the default variant of the Action which is displayed in white color. |
Brand | Brand variant is a blue color. |
Outline-brand | Outline-brand is like the brand variant, but the color is used for the label and border only, not the whole Action color. |
Destructive | Destructive variant is in a red color. |
Success | Success variant is in a green color. |
Events:
Custom Action Event:
This event changes as you create new actions for the component. For example, in the image below, I have created a custom action called “New Candidate.” The event associated with this action is visible, which means that whenever you click on this action, the assigned workflow will be triggered.