Icon
- 07 May 2024
- 3 Minutes to read
- Print
- PDF
Icon
- Updated on 07 May 2024
- 3 Minutes to read
- Print
- PDF
Article summary
Did you find this summary helpful?
Thank you for your feedback
Icon widget helps to visually depict action to navigate and access the functional links of an associated file or program.
Select the preferred Icon from Widget, define its properties and perform your actions using these interactive elements!
Figure: Icon widget
Let's explore the following Use Case for navigating through Icon Widget!
Use Case User Persona: Administrator | Solution |
| Sandra, the Administrator wants to create an interactive element for their application where Tenant details, User Incident History and User Assets can be viewed for a form named Incident Form. | Sam, the Application Designer can drag and drop the Icon Widget on the form. Under Navigate to, he can select Internal from the drop-down list. The icon can be named as Incident form. From the Form Type select Popover form and Form Mode as Read from the drop-down list. |
Refer to the gif below for more information.
Let us design an interactive visual element, engage your user, and accommodate their wants and needs. To configure the widget, perform the following steps:
- Navigate to General tab of Form Designer. Enter all mandatory details required for the Form.
- In Design Form tab, from the left pane select Widgets > Icon.
- Drag and drop this control inside a panel to create an Icon field.
- Click (Settings icon for this field) Icon to view Properties pop-up.
Figure: Creating Icon
Figure: Creating IconYou can view the following tabs on the Settings for this field:
- Properties
- Appearance
- Validations
- Set Values
Properties
This section contains the list of properties using which the Administrator can configure the respective Icon widget's label, tooltip, image and navigation.
Figure: Properties
To know more about the fields that are available under the Properties section, see Field Description given below.
Field Description
This table contains the list of fields and their descriptions that are available under the Properties section:
| Field | Description |
|---|---|
| General | |
| Label | Specify the name for the Icon widget. This name identifies the Icon in the form. For example: Asset Details |
| Include Label? | Check this  to include the label. |
| Tooltip | Specifies the text which you want to display near the icon. This describes the purpose of the action of the Icon. |
| Upload Icon | Icons can be assigned to the selected attribute. On clicking the  button, a pop-up displays to browse. Select the icon from the icon library.  |
| Navigate to any one option based on your need! | |
| Internal |  Figure: InternalIf Navigate to Internal is selected, it extends the dropdown where you can choose Form Type - Main form, or Popover Form, Form Mode - Read or Write, and enter a Form Name. |
| External |  Figure: ExternalSpecify the URL for the Icon. Click Done to save the configurations. |
| Open in | Click the radio button to open in  . |
Appearance
This section contains the list of features using which the Administrator can select Border, Background and color Icon. To know more about the fields that are available under the section, see Field Description given below.
Figure: Appearance
Field Description
This table contains the list of fields and their descriptions that are available under the Appearance section:
| Field | Description |
|---|---|
| Border | |
| Border | Select the border as None or Solid from the drop-down list. |
| Color | Click the color tile and choose the color as per your requirement. |
| Background | |
| Color | Select the background color of the icon from the color tray. |
| Icon | Select the color of the icon from the color tray. |
| Text | |
| Font Type | Select the font type. |
| Font Color | Select the font color from the color tray. |
| Font Size | Select the font size for the icon. |
| Font Style | Select the font style for the icon. |
Validations
This section contains the list of validation setups using which the Administrator can configure the respective value based on tenant.
Figure: Validations
Set Values
This section contains the list of set values using which the Administrator can specify submitting the Popover Form. To know more about the fields that are available under the Set Values section, see Field Description given below.
Figure: Set Values
Field Description
This table contains the list of fields and their descriptions that are available under the Set Values section:
| Field | Description |
|---|---|
| Parameter | Select the parameter type from the field. |
| Field | Select the status for the icon. |
| Value | Select the value from the drop-down list. |
You can click Save to save the configurations for the Icon widget.
Was this article helpful?