Overview
An Image Field is a UI element designed to display and manage image files within an application. It allows users to view, upload, and sometimes edit images, providing a way to incorporate visual content into the application.
Attributes of Image Field
Basic:
...
Attribute Name | Description | ||
---|---|---|---|
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. | ||
Allow Sources | Here, users can select the image source as Attachment, Record, or URL. | ||
Allowed Format | Here, users can select the image format as PNG, JPG, JPEG, GIF, or SVG. |
Config:
Attribute Name | Description | ||
---|---|---|---|
Debounce time in seconds | "Debounce time in seconds" refers to the delay period set to prevent a Event from being called.
| ||
Aspect Ratio Width | Here, users can set the aspect ratio width of the image. | ||
Aspect Ratio Height | Here, users can set the aspect ratio height of the image. | ||
Show Tool Tip Checkbox | If the "Show Tooltip" checkbox is marked as true, the tooltip will be displayed. | ||
Show alt Text Checkbox | If the "Show Alt Text" checkbox is marked as true, the alt text will be displayed. | ||
Show Description Checkbox | If the "Show Description" checkbox is marked as true, the description will be displayed. | ||
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. | ||
Value Destination Types | This attribute specifies whether the user wants to store a value in a variable or a model. Model: Here, you can select "Model" as the value destination.
| ||
Value Destination Variables | Here you can choose the variable option from this list.
| ||
Value Destination Model |
|
UI:
...
Config:
Attribute Name | Description | ||
---|---|---|---|
Component Size |
| ||
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 |
| ||
Attachment Path | Here, users can select attachments from different sources.
| ||
Display Width | Here, users can set the size of the image width. | ||
Display Height | Here, users can set the size of the image height. |
Conditional Visibility:
...
Attribute Name | Description | ||
---|---|---|---|
Visibility Type | It determines whether a component is visible 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. |
Max Attachment Content Length (KB) | Here, users can set the maximum attachment content length in KB. |
Max Record Content Length (KB) | Here, users can set the maximum record content length in KB. |
Min Width | Here, users can set the minimum width. |
Max Width | Here, users can set the maximum width. |
Min Height | Here, users can set the minimum height. |
Max Height | Here, users can set the maximum height. |
Read Only:
Attribute Name | Description | ||
---|---|---|---|
Read Only Type | It specifies whether a component can be edited by users. It offers the following options:
|
Conditional Disability:
...
Attribute Name | Description | ||
---|---|---|---|
Disability Type | It determines whether a component is disable on the layout. It offers the following visibility types:
|
Component:
Attribute Name | Description |
---|---|
Component Label | It simply shows the name over the field. |
Label Source Type:
...
Attribute | Description |
---|---|
Model (Salesforce Object) | From this source, users can select a Model (Salesforce Object) 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.
...