Form Editor

The Form Editor allows you to build User Interfaces fast with minimal technical knowledge. It is based on different sections:

• the Editor Area, where the process logic is constructed element for element

• the Properties, where the current selected component can be modified

• the Toolbar, where some tools are located and also all elements, which can be added to the process

• the Quick Action Menu, where you find quick actions according to the current selection

Accessibility

Axon Ivy project tree -> double click on the Form node of an HTML Dialog. If there is none, create a new HTML Dialog and select the type Dialog Form on the first wizard page.

Toolbar

The Tool Bar collects all tools that can be helpful for working with the form editor:

Left

Device Mode: Simulate how the form looks like on different devices (Desktop, Table, Mobile).

Edit / Preview Mode: Toggle between edit mode

• Edit Mode: provides wider gaps between the components for ease drag and drop

• Preview Mode: simulate how the form will look like for the end user

Undo: your last changes.

Redo: your last changes.

Center

You can create many different components, by drag and drop the wished element to the Editor Area. To keep the overview they are divided into different categories:

All Components: All components with are known in the form editor

Structures: Components which allow to have sub components

Elements: Input, selection and text components

Actions: Action components

Composites: All reusable HTML Dialog Component

Data: Create components from data class

Right

Open the HTML Dialog Preview of the form.

Opens the Data Class Editor of the form.

Opens the Process Editor of the form.

Opens or closes the Properties of the selected component.

Open view options:

• Theme: Toggle between dark and light theme.

Editor Area

In the editor area you can layout and design your forms by drag and drop. To add new components, open the palette from the Toolbar and drag and drop it to this area.

Per default, components are structured from top to bottom with full width. To change this you can use a Layout component. With this you can arrange components side by side in a grid.

On each component you have a Quick Action Menu, which provides useful actions.

Quick Action Menu

To open the Quick Action Menu simply select a component in the editor. The available actions can be different based on the component type:

Delete the current selection.

Duplicate the current selection.

Extract a layout to a new Form Component.

Create new column. Only available on the Table component.

Create components from the form data class.

Create components inline via palette.

Properties

Having a component selected, you can define its features within the Properties view on the right. In this section you can change the config of each component.

There are also settings which are only available, if a certain parent component is present. E.g. if you have a Layout component with the type Grid and column Free you will get on each child a new section where you can define how much space it should take on different screen sizes.

Tip

You can also open the properties view of a component with a double click.

Form Component

A form can be rendered as Html Dialog or it can be a Component that can be used within other Form’s. You can change the Form Type on the Form Properties view (no selection).

Outline

The form editor provides an outline, to give you a better overview of your current form with all the components. You can open it inside the Properties panel via the outline switch at the top.

Create from data

You can create components from the form data by click on the Data in the Toolbar, via the Quick Action Menu or if you have an empty form the button Create from data. The following wizard shows you the form data class, where you can select attributes to directly create the components for them. You can also create a Proceed and Cancel button to control the workflow.

Note

Only data class attributes which can be rendered as component are shown in the wizard.