# form_designer_components

### Media

The **media** component may be a picture from the web, or a picture or video from a [File field](field_types.md#File).

**Example**

| ![ExampleImage4](_images/form_designer/ExampleImage4.png) | ![ExampleSigning1](_images/form_designer/ExampleSigning1.png) |
| --- | --- |

> **Tip:**
> 
> Right-click on the rendered Media component, and click "Copy link address". Example of the link obtained:
> 
> ```
> https://swe02.istools.com/istools/apps/1801/tables/1/records/100551/fielddata/100500
> ```
> 
> Then you can share the link with members of the application (e.g., via [mail](set_actions/send_a_mail.md), [notification](set_actions/send_a_notification.md) or [SMS](set_actions/send_an_sms.md)) to **automatically download the file**, provided they have the appropriate access rights.

### Button

The **button** component lets customised actions to be run when it’s clicked.

**Configuration**

Under properties, set the **Target section** and optionally an **icon** and **caption**.

Under **Form rules** set the **Behavior** and **Run on click**, e.g.,

**_Behavior_**

```
set :backgroundcolor = 'green'
```

**_Run on click_**

```
call save()
```

> **Note:**
> 
> For tables, actions will only work for the selected record.

**Example**

| ![ButtonComponents](_images/form_designer/ButtonComponents.png) |
| --- |

### Icon

The **icon** component is more or less a [button](#_button) but can give a cleaner look to the form.

**Example**

| ![IconComponent](_images/form_designer/IconComponent.png) |
| --- |

### Link

A link text that will take you to another form within the application, to a website or to run a report, among other actions.

> **Note:**
> 
> In case this component uses Table data, but is placed outside the section, the property `Target section` must be provided.

**Example**

| ![BackToHomeForm](_images/form_designer/BackToHomeForm.png) |
| --- |

### Label

Text to have on the form as a legend, as a column in Table section with an [IQL caption](iql_in_forms/change_the_behavior_of_components.md#_caption), or as a frame for [embedded YouTube videos](markdown.md#_embed_youtube_videos).

**Example**

| ![WelcomeToOurSystem](_images/form_designer/WelcomeToOurSystem.png) |
| --- |

### Rectangle

The **Rectangle** component is used for highlighting an area of the form.

Custom the rectangle’s color, transparency and behavior as wished.

> **Warning:**
> 
> The Rectangle component is not rendered in mobile mode.

### Map

The **map** component is a map where coordinates can be marked to identify the location referred by a record. Toolbar buttons placement (to save, delete, add, etc.) can be aligned to the left or right to better suit your design.

**Example**

| ![MapComponent](_images/form_designer/MapComponent.png) |
| --- |

### Map layer

Additional layers of location markers can be overlaid onto a Map component. It’s makes it possible to display data from a GeoJson field.

### Map layer editor

A layer overlaid onto a Map component that includes tools to draw areas or edit existing ones. It’s makes it possible to store GeoJson data in a note field.

### Calendar

The **calendar** component is a full-size calendar with day, week or month-view. Toolbar buttons placement (to save, delete, add, etc.) can be aligned to the left or right to better suit your design.

**Example**

| ![Example,Calendar](_images/form_designer/Example,Calendar.png) |
| --- |

### Chart

The **chart** component can display three different types of charts: Bar, Line and Pie charts. The chart can then be saved as a PNG with a simple click.

> **Note:**
> 
> Clicking a legend hides the respective series, while double-click shows only that one.

**Example**

| ![Chart1](_images/form_designer/Chart1.png) | ![Chart2](_images/form_designer/Chart2.png) |
| --- | --- |

### IQL Chart

A more advanced way to configure a [chart with IQL](iql_in_forms/configure_charts_components_iql_chart.md). It gives further options that is not possible in a [regular chart](#_chart).

**Example**

| ![IQLChart1](_images/form_designer/IQLChart1.png) | ![IQLChart2](_images/form_designer/IQLChart2.png) |
| --- | --- |

Some general properties are:

-   **Show labels**. This will display the original name of the field placed as x-axis at the bottom of the chart. In the image above, "Officer".

-   **X-axis label**. To custom the original name of the field placed as x-axis at the bottom of the chart.

-   **Y-axis label**. To add a name on the left side of the chart.

-   **Max rows**. The number of elements you want to appear on the x-axis for Line and Bar charts, or slices in Pie chart, or rows in Table chart, e.g. 3 officers.

-   **Use date range selector**. See an example of how it is used in [Line chart](iql_in_forms/configure_charts_components_iql_chart.md#_line_chart_examples). Can also be used with Bar chart. Must be used together with "**X-axis type: Time series**" and "**Date range selector interval**" properties.

### Meter

The **meter** component is a tool to display a number field as a partion of an interval, e.g., exceptional for displaying progress.

> **Tip:**
> 
> Set the color of the bar depending on the value. E.g.,
> 
> ```
> if NumberField >= 100 then
>     set :textColor = 'green'
> end
> ```

> **Note:**
> 
> Hoovering over the bar displays the exact value.

**Example**

| ![Meter](_images/form_designer/Meter.png) |
| --- |

### Gantt chart

The **Gantt chart** component helps to schedule project tasks and tracks progress over time. Read more about the **Gantt chart** [here](gantt_chart.md).

**Example**

| ![GanttChart](_images/form_designer/GanttChart.png) |
| --- |

#### Barcode and QR code

The **Barcode and QR code** component gives the option to track and store information of goods or items, or for storing regular URL’s of webpages.

**Example**

| ![BarCode](_images/form_designer/BarCode.png) | ![QRCode](_images/form_designer/QRCode.png) |
| --- | --- |

### Search box

The **search box** is an input box to search data. It is configured in the following steps.

1.  Add an input field to the canvas, e.g., **Text** or **Number** field.

    1.  Under **Properties**, set **Datasource** to a desired variable, e.g., `@searchForNames`.

2.  Add a Section that displays records, e.g., a **Table** or a **Repeater** section.

    1.  Under **Form rules**, set the filter to display the records that matches the variable. E.g.,

        ```
        Name contains @SearchForNames
        ```

A simple search box is thereby made.

**Example**

| ![SearchBox1](_images/form_designer/SearchBox1.png) | ![SearchBox2](_images/form_designer/SearchBox2.png) |
| --- | --- |