# Callout components

> A Callout component provides user interaction and collects user data.

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. |  |

:::note
* 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:

 <colgroup>
  <col/>
  <col/>
  <col/>
 </colgroup>
 
  
     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**.