Section
- Content Writers
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. Reference: 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. Reference: Actions |
UI State:
Attribute | Description |
|---|---|
Visibility Type | It determines whether a component is visible on the layout. It offers the following visibility types:
Note: By default, Reference: Conditional Visibility |
Read Only Type | It specifies whether a component can be edited by users. It offers the following options:
Reference: Read Only |
Base UI:
Attribute Name | Description |
|---|---|
Padding Location | Padding Location typically refers to the configuration of spacing around elements. |
Padding Size | Padding Size refers to the amount of space added inside an element, between the element's content and its border or edge. |
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. |
Show Border | It is used to simply add border surrounding the section. Note: Currently, noKodr supports only black borders. |
Merge Text
Merge text is a key feature of the noKodr application, allowing users to display field values on the UI. Depending on the data type, users can perform mathematical operations on these fields.
For example, if you want to display a calculated total price based on the quantity and unit price entered by the user on a sales order form, and you wish to dynamically showcase this on the UI without saving the record in the database, you can achieve this using the UI fields in noKodr.
After selecting merge text you can you can see several options such as:
Attribute Name | Description |
|---|---|
Source Type | In this option, you can select various sources from which you want to display values. |
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. |
Merge Field Expression | The selected field from the source will be displayed in a merge format. For instance, the first name field from the contact model will appear as: {model:contact.FirstName}. |
Message Body | In this option, You can add multiple values to form your final UI merge text. For example, merge fields include {model:contact.FirstName},{model:contact.LastName} will eventually display the contact's first name and last name next to each other. |
Available Sources
After clicking on the Gear Icon, you can select various sources to include fields or values, such as variables, other models, static values, etc.
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. Reference: Source Type |
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 Reference: Variant. |
Visibility Type | It determines whether a component is visible on the layout. It offers the following visibility types:
Reference: Conditional Visibility. |
Disability Type | It determines whether a component is disabled on the layout. It offers the following visibility types:
Reference: Conditional Disability. |
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. Note: It is usually used to group buttons which depict actions which warn the user. |
Success | Success variant is in a green color. Note: It is usually used to group buttons which depict successful action. |
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.
