Attributes of Object field
Basic:
...
Attribute Name | Description | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Component Size |
| |||||||||||
Display as | Display As allows you to select data type options to define how the field will be display.
| |||||||||||
Label | A Label is the name shown to users and can come from various sources.
| |||||||||||
Place holder | This is a hint or example text displayed in an input field before the user enters their own data. | |||||||||||
Field Type | Here you can choose different field types.
| |||||||||||
Layout | Field Layout allows you to arrange fields on the form. | |||||||||||
Hide Space Checkbox | After marking this checkbox as true, it will crop the extra corners of the fields. | |||||||||||
Card Schema | In the card schema, all fields are displayed within the card. | |||||||||||
Form Schema | In the form schema, the user can select which fields they want to display in the form card. | |||||||||||
Edit Form Schema | In the edit schema, the user can choose which fields to display for editing. | |||||||||||
Pill icon | Here, the user can select an icon for the field name | |||||||||||
Pill Label | Here, the user can select an icon label for the field name. | |||||||||||
Hide Pill Icon | Enabling this checkbox will hide the pill icon. | |||||||||||
Dest Types | This attribute specifies whether the user wants to store a value in a variable or a model. Model: Here, the user can select the model and specify the field where the value will be stored. | |||||||||||
Dest Var | Here you can choose the variable option from variable list. Note: This appears when you select "Variable" in the Dest Type. | |||||||||||
Dest Model | Here you can choose the model from list. or it provide option for new model creation. Note: This appears when you select "Model" in the Dest Type.
|
Config:
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, |
Style |
|
Classes |
|
Grid Size | Here, the user can set the grid size based on the object, as 1 or 2. |
Hide Space | After marking this checkbox as true, it will crop the extra corners of the fields. |
UI state:
...
Visibility Type:
Attribute Name | Description | ||
---|---|---|---|
Visibility Type | It determines whether a component is visible on the layout. It offers the following visibility types:
|
Read Only:
Attribute Name | Description | ||
---|---|---|---|
Read Only Type | It specifies whether a component can be edited by users. It offers the following options:
|
Disability Type:
Attribute Name | Description | ||
---|---|---|---|
Disability Type | It determines whether a component is disable on the layout. It offers the following visibility types:
|
Validation:
Attribute Name | Description |
---|---|
Required Type | Here, users can apply validation based on filter conditions.
|
Required Error Message | Enter the error message you want to display for required fields. |
UI:
...
Attribute Name | Description | ||
---|---|---|---|
Layout | Field Layout allows you to arrange fields on the form.
| ||
Help Text | Provides additional guidance or information about a field or element to assist users in understanding how to complete it or what data is expected. | ||
Grid Size | It defines the width of the component in terms of grid columns, allowing users to control how much horizontal space the section occupies on the page. |
Layout:
...
Attributes | Description |
---|---|
None | In the None layout, only the input/output field is visible, with no label displayed. |
Stacked | In a stacked layout, the input/output field is placed below the field label, with a small margin around the label. |
Horizontal | In a horizontal arrangement, the input/output field is placed before the field label, with a small margin around the label. |
Single Column | In a Single Column layout, the input/output field is larger than the field label, and displayed in single column grid. |
No Label | In the No Label layout, only the input/output field is visible, without the label. Layout: |
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. |
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 | Here, you can choose the label from user fields such as First Name, Last Name, Email, Name, Phone, or Session ID. |
Merge Field Expression | Merge Field Expression displays the value selected from the chosen value source. |
Message Body | Inside the message body, user also can add the values manually. |
Include Page | ||||
---|---|---|---|---|
|
Events:
Events are essentially the automation of invoking the component's actions.
Here, we have onload event, click, double click actions are available for this components.
Icon Events | Description |
---|---|
onload | This event action is triggered when the Field component is loaded. |
change | This event action is triggered when the field is changed.. |
blur | This event action is triggered when the field is unfocused. |
Below here is the onload event workflow action.
Info |
---|
Note: Similarly you can create event action for change event and blur. |
on Load Event:
...
In the image below, you can select the created workflows.
...
Info |
---|
Note: "You need to create a workflow for selecting from this list. |
For more information about Workflow check this out.
Info |
---|
Reference: Workflow |
onload Events:
We have an onload event that runs when the component is loaded
Panel | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
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
...
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.
...