Input with Icon
This is similar to the "Icon Button" widget; however, it offers a unique and specific UI appearance.
Input (Icon) Properties
| Property | Description |
|---|---|
| Icon Type | Choose the icon that you want displayed on the widget. There are two icons to choose from - (Edit) and (Delete). |
(Edit)  | Edit Icon: Highlights the button-click that makes a field "Editable". |
(Delete)  | Delete Icon: Highlights the button-click that "Deletes" the value in a field. |
| Icon Color | Choose the color of the icon. |
| Icon Size | Sets the size of the icon. |
API Methods
setVisibility
Sets the Visibility flag for this component.
- Method
- Usage
setVisibility(visible: boolean): void
// Setting the visibility to "true" makes the element visible
a8forms.IconInput("iconInputId").setVisibility(true)
// Setting the visibility to "false" makes the element invisible
a8forms.IconInput("iconInputId").setVisibility(false)
setVisibilityCondition
Sets the visibility condition for this component.
- Method
- Usage
setVisibilityCondition(condition: string): void
// Sets a condition for changing the element's visibility status.
a8forms.IconInput("iconInputId").setVisibilityCondition("1 === 1")
Event Handlers
Event handlers allow you to set triggers for various actions based on the fired events. They are as follows:
onClick
onClick - Triggers an action, such as calling for a service or function when the widget is clicked.
Example:
When you want to disable the "Read Only" status of a text field (in other words: make it editable), you can::
Use the following code on the (onChange) event handler of the text field.
onChange
a8.forms.Textarea("iconInputId).setReadOnly(false)
//Where "iconInputId" is the ID of the "Icon Input" component.