Image Field
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. Reference: Label Source Type |
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. Reference: Field Type. |
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. Example: If the debounce time is set to 2 seconds, the Event will only execute if there is a 2-second pause. |
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. |
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.
on Load Event:
In the image below, you can select the created workflows.
For more information about Workflow check this out.
onload Events:
We have an onload event that runs when the 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.