Callout components
A Callout component provides user interaction and collects user data.
The UI components are grouped into categories, based on their functionality, as follows:
| Form Component Category | Description | Form Component |
|---|---|---|
| Basic | Contains the most used callout fields. | Text Field, Text Area, Number, Checkbox, Select Boxes, Label/Header, Drop-down List, Radio, Button |
| Advanced | Contains personal or period data. | HTML Element, Content, Url, Date / Time, Day, Time, Currency |
| Layout | Contains elements that alter the layout of the form. | Columns, Panel, Table |
To create a custom callout, drag the desired UI components, drop them to the right side panel, and arrange them to the logic of your use-case.
Customizing Callout Components
Once you drop a callout component, a configuration wizard opens in the Callout Designer. The configuration wizard displays tabs that allow further customization for various functionalities. Check the progress in the preview pane of the wizard.
When you are satisfied with a component design, click Save.
The table below describes the settings available for the common configuration wizard tabs.
| Wizard Tab | Description | Special Mentions |
|---|---|---|
| Display | In this tab, you configure the way the callout component is displayed. | The name you set in the mandatory Label field is passed as the PropertyName in the Field Key tab. |
| Data | In this tab, you configure a default value that end users see in the text field. | For components that can hold multiple items (e.g., Selectboxes, Tab), you define them in this tab. |
| Validation | In this tab, you configure validation requirements to enable other callout components. | |
| Field Key | In this tab, you configure the component name you want to use further in the workflow. | By default, this value is passed from the Label field of the Display tab. |
| Conditional | In this tab, you configure conditions for the component. | You can set advanced conditions, such as Javascript or JSONLogic. |
| Logic | In this tab, you configure the logic that triggers the conditions. |
- Not all callout components have all the configuration wizard tabs available.
- The Content Component is not available offline, because it needs to make a CDN call over the internet to load the Rich Text Editor.
- To add an image in the HTML Element component, convert the image to Base64 format.
Some callout components have specific tabs, for example:
| Component |
Wizard Tab |
Description |
|---|---|---|
| Date / Time |
Date |
In this tab, you configure the minimum and maximum date available for selection. |
| Time |
In this tab, you configure the incremental step for hours and minutes. |
|
| Day |
Day |
In this tab, you configure the way the business user selects the day (incremental or from a drop-down list). |
| Month |
In this tab, you configure the way the business user selects the month (incremental or from a drop-down list). |
|
| Year |
In this tab, you configure the way the business user selects the year (incremental or from a drop-down list), and also the minimum and maximum year available for selection. |
Managing Callout Components
To reopen the configuration wizard, hover over the callout component and click Edit.
To rearrange the callout components, click Move and drag the callout component to another location inside your callout.
To edit the callout component using its JSON settings, click Edit JSON. This opens the component JSON, that displays all the available settings.
To copy and paste a component inside the callout, click Copy and then click Paste below on the same component or on another one.
To remove a component from your callout, click Remove.