# Optional actions in form designer

> **Tip:**
> 
> Note that multiple selection can be done having the lasso ![SelectionIcon](_images/SelectionIcon.png) icon enabled, to apply settings at once.

> **Tip:**
> 
> Use the keyboard shortcut **`Alt + x`** to quickly switch between the Select rectangle tool (known as Lasso, to select multiple components at the same time) and the Move tool (to select a single component) icons.

## Snap grid

Adjust the **Snap to grid** (magnet icon) and the **Grid size** settings, placed at the top bar, to ease the way you move components around.

## Add components

-   [Add components](#form_designer_new.adoc#_add_a_component_e_g_media_map_calendar_button_chart_barcode_etc), such as Media, Links, Label, Maps, Icons and Calendars, Charts, among others.

## Edit components under **Properties**

### Set a title

Type a title for the selected panel or section in the **Caption** property. Note that [translation](form_designer/translate_a_form.md) can be directly typed in here for the [permitted languages](application_preferences.md#permitted_languages) set for the application. Switch to each language with the ![FormTranslationIcon](_images/FormTranslationIcon.png) icon.

### Set a tooltip

A **Tooltip** can be entered (i.e., the descriptive text that is displayed when the user hovers over a component in the form).

### Set style

Style can be set, e.g., _background, borders, font_, etc. For example, if "Border radius" is set, the corners of the component will be rounded. Note that the color picker will show the [Theme](user_settings.md#theme) colors as well as all possible customizable combinations.

### Fixed edges

[Fixed edges](fixed_edges_functionality.md) for making your layout adaptive to any screen size.

### Configure action icons

For any selected section, [action icons](application_forms.md#action_icons) is individually shown or hidden by clicking on them, under **Properties**.

### Auto save and full row edits for table sections

For a selected Table section, set the **Save automatically** and the **Full row edit** in case you don’t want to have the Save icon on the section but to store your changes as soon as you hit Enter or focus away, and that clicking on a cell opens the entire row for edition, respectively. Note that the **Save automatically** setting must be unmark if the Table section is meant to be used in [offline mode](offline_mode.md).

### Create only for detail sections

For a selected Detail section, tick **Open in create mode** to make it independent of having a Selector to avoid navigation between records, i.e., it will only allow the possibility to create and save.

### Sorting of records

For a selected **Multi detail**, **Table** or **Record selector** section, the sorting is per default set to sort by **Record name**. This is simply changed by selecting another field, under **Properties**.

### Deny component collapse on mobile

Tick “Suppress collapse in mobile mode” checkbox if you want to deny users to collapse Panels or Sections while using mobile devices.

### Set fields to mandatory or read only

Set **Mandatory** and/or **Read-only**. Those field boxes will be marked in a special way to be quickly identified.

> **Note:**
> 
> Note that making one field to be **Mandatory** in a section will make it that way in any other section of that form.

### Set alignment

Set **Align** to left, center or right on the horizontal aspect. If nothing set, the alignment is left as default. And set centered or bottom on the vertical aspect, where bottom is the default.

### Set number format

Set a [**Number format**](number_format.md) in case you wish to display a Number field in a different way other than the automatic one based on your [language](user_settings.md#language).

### Set date format

Set a [Date format](date_format_patterns.md) in case you wish to display a Date or Date time field in a different way other than the automatic one based on your [language](user_settings.md#language). For example, if you wish to remove the seconds from a Date time field, type DD/MM/YY HH:MM. Note that the seconds will still be editable as soon as the user clicks on the field.

### Display file history

For **File** field, "Show file history" will enable a popup where previous versions of the file can be downloaded, in case the storage is an Amazon server.

## Configure form appearance

### Resize component

Resize a component by having the ![MoveToolIcon](_images/MoveToolIcon.png) icon enabled, then select it and drag any of its perimeter controls (or its division line, in case of fields in a Table section). Alternatively, edit its **Dimensions** under **Properties**.

### Reposition component

Reposition a component by selecting it and dragging it to the desired position.

> **Note:**
> 
> Alternatively, edit its **Position** under **Properties**. If that’s the case, be aware that the position will be relative to the **Parent** property, for example, a Panel might be at position X: 0 of the form canvas (i.e., "Form root" as **Parent**), which means that it will be seen at the very left hand of the screen, but a Button placed on that Panel (i.e., "Panel 123" as **Parent**) with position X: 0 results in being placed at the very left of the Panel.
> 
> A component moved out of the dimensions of its Parent will be automatically render inside that Parent component.

### Bring to front/Send to back

Bring to front/Send to back any selected component to specify its position over or under another component, with the icon next to Components, on the top bar of the Form designer.

### Format text with markdown

Use [Markdown](markdown.md) on **Note** and **Label** fields with the `Display as formatted text` property.

## Other optionals

### Show save all button

**Show save all button**, to display a button component at the top of the form to save at once all changes made along the sections.

> **Note:**
> 
> Note that this property will also reflect on mobile mode, enabling/disabling its floating Save icon.

### Disable keyboard shortcuts

**Disable keyboard shortcuts**, to avoid the effect of [key bindings](application_forms.md#_keyboard_shortcuts_for_forms) on forms.

## Make configurations in **Form rule**

### Run on select

Makes it possible to run a block of iql code when a record is selected in the section. It is useful to set up the selected record name, or any other value as parameter to filter another section, even if these are not related. For instance,

**Run on select**

```
set @recordNameForFiltering = RecordName
```

`@recordNameForFiltering` can later be used in a filter, or behaviour in another section.

### Behavior

Set a custom [**Behavior**](form_designer/set_custom_behavior_for_components.md) so the component can "react" in a special way based on specif criteria defined in IQL.

### Run on change

Get the result of calculations immediately after changing values in your form with the [Run on change](iql_in_forms.md#_run_calculations_on_fields_or_set_the_value_of_fields) property.

### Run on init

Use **Run on init**, where you can set up with [IQL](iql.md) initial data to display right after the user loads the form, without having to type any input to obtain further actions. For example, set today’s date automatically on a parameter field once the user opens the form, so that other fields and/or filters can have a chain reaction based on that.

### Filter

Write a filter to exclude irrelevant records.