# form_designer_components

### 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) |
| --- |

### 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) |
| --- | --- |

### Drawing

Users can sketch and add context directly onto images, PDF (first page only) and DXF CAD files, turning static visuals into interactive canvases where pins, rectangles, polygons, or lines can be drawn to highlight areas of interest, then bind information to those shapes.

**Example**

| ![Drawing](_images/Drawing.png) |
| --- |

First, drop the Drawing component onto a Repeater, Detail or Multi detail section that has its **Datasource** set to the table containing the uploaded image or PDF file, e.g., "Project drawing".

Next, configure the component settings:

-   **Background image**: Set this to the proper File field.

-   **Relation field**: Select the **Annotation settings** header bar of the Drawing component and set the **Relation field** (e.g., from the relation "Annotation" → "Project drawing", where "Annotation" must be a [Generated series](tables.md#generated_series)).

-   **Popup field**: Choose the Dropdown, Text, or Note field that will serve as the tooltip when a drawing figure is selected.

-   **Geometry field**: Choose a Text or Note field where the shape type and drawing coordinates will be stored.

Other properties are optional.

Finally, you can add a Detail section filtered by the Drawing component. This allows users to edit the annotation in the **Popup field** and manage other related data.

In the rendered form, you can choose between different shapes to draw, zoom in and out, and delete selected drawings.

### 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) |
| --- |

### 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) |
| --- |

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

### 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) |
| --- |

### 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) |
| --- |

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

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

### Meter

The **meter** component is a tool to display a number field as a portion 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) |
| --- |

#### 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) |
| --- | --- |

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

### 3D Viewer

View 3D models directly in your form. It supports architectural BIM data (IFC), web graphics (GLB/GLTF) and 3D printing files (STL/3MF/OBJ).

**Example**

| ![3Dviewer](_images/3Dviewer.png) |
| --- |

First, drop the 3D Viewer component onto a Repeater, Detail or Multi detail section that has its **Datasource** set to the table containing the uploaded file.

Next, configure the component settings:

-   **File field**: Set this to the proper File field.

-   **Selection parameter**: Optional. When visual elements in an IFC or common 3D file are selected, their geometry metadata is automatically retrieved into this parameter. This allows administrators to utilize JSONPath expressions to use the 3D Viewer as a selector or to selectively query, filter, and populate relational data tables.

Other properties are optional.

In the rendered component, you can use its tools to show and hide elements or an advanced filter, and review its properties.