Layers in Form designer

The form root, also known as canvas, can be dimensioned in different layers, where panels with components can be placed on top of each other and, in combination with IQL, displayed or hidden based on certain criteria. This way, you can have a form with multiple panels using the same space, instead of having them all displayed, one after the other, causing a long form to scroll.

The following can be achieved with Layers:

Create a tabbed form

This is a type of view where multiple Button components are horizontally aligned at the top of a section area, looking like tabs, where a different section is displayed based on the tab the user clicks on.

Add a Panel component. Note that its property "Layer" is 0.
Drag and drop onto the Panel the type of section you wish, which will be associated to the first tab at a later stage. Add to the section all the fields you need.

For the second section, click on the "Layer 1" at the top menu of the Form designer. Note that the canvas looks empty. Then add a new Panel and its respective section, placing them in the same area where you placed the previous ones.

To see other layers' components at the same time, you may select multiple layers with Ctrl+click.

In this step, you have Layer 1 selected, but you may select Layer 0 too, to be able to see where you placed the first panel, to use it as reference of placement.

For the third section, click on the "Layer 2", and so on for additional sections.
Add as many Button components as panels you have, preferably on "Layer 0". Place them on top of the panel. Don’t forget to type a Caption for them.
Select the first Button, click on Run on click property, type set @activeTab = 0 on the IQL editor, and click Ok. This step defines a unique identifier parameter for the button. Continue doing this accordingly to the rest of the buttons (i.e., set @activeTab = 1 for the second button, set @activeTab = 2 for the third, etc.).
Make sure you are on "Layer 0" to select the first Panel. Click on Behavior property, type set :hidden = @activeTab != 0 on the IQL editor, and click Ok. This step will hide for the user this panel and section in case other tab different than "0" is clicked. Continue doing this accordingly to the rest of the panels (i.e., set :hidden = @activeTab != 1 for the second Panel, set :hidden = @activeTab != 2 for the third, etc.).
Save the form.

In case you want to edit an existing form where components where placed in a single layer, or in the wrong one, select the component(s), go to Properties, choose the correct Layer, and save the form.

Note that this is only a suggestion of design. The use of layers and IQL are flexible to build other types of forms.

Double click the Layer to rename it. This is especially useful when you have many layers so with a key name you will find what to edit in a faster way.

Create a router form

This is a type of view where a main section will control other sections below, based on the option chosen on a Drop-down (or other type of) field.

Design the main section as you wish. Note that its property "Layer" is 0.
Add a Panel component below the main section, drag and drop a section there, keeping in mind that this will be the view displayed when the first List item of the Drop-down field is chosen. With the Panel selected, click on the "Layer 1" under its Properties.

Now click on the "Layer 2" at the top menu of the Form designer, and add the next Panel and section associated to the second List item, placing them in the same area where you placed the previous Panel.

To see other layers' components at the same time, you may select multiple layers with Ctrl+click.

In this step, you have Layer 2 selected, but you may select Layer 0 and 1 too, to be able to see where you placed the first panel, to use it as reference of placement.

Select the Drop-down field on the main section, click on Run on change, and type:

if "Drop-down 1" is null then
    set @activePanel = 0
else
    if "Drop-down 1" in ("List item 1") then
        set @activePanel = 1
    else
        if "Drop-down 1" in ("List item 2") then
            set @activePanel = 2
        else
            set @activePanel = 0
        end
    end
end

and click Ok.

Select the Panel on Layer 1, click on Behavior and type set :hidden = @activePanel != 1 and click Ok. This step will hide for the user all panels and sections except the one is associated to the first List item. Continue doing this accordingly to the rest of the panels (i.e., set :hidden = @activePanel != 2 for the second Panel, etc.).
Save the form.

In case you want to edit an existing form where components where placed in a single layer, or in the wrong one, select the component(s), go to Properties, choose the correct Layer, and save the form.

Note that this is only a suggestion of design. The use of layers and IQL are flexible to build other types of forms.

Create a popup form

This is an alternative to Validation messages, where a popup Panel can be displayed instead. For example, a popup warning that a Number field cannot be larger than 100; for that:

Select the Number field and type the following in Run on change. After that, click Ok.

if "Number 1" > 100 then
    set @Popup = 0 else
    if "Number 1" <= 100 then
        set @Popup = 1
    end
end

Click on the "Layer 1" at the top menu of the Form designer. Add a Panel component approximately in the center of the form and drag and drop a Label with the Caption "Number 1 cannot be larger than 100".

Select the Panel, and type the following in Behavior. After that, click Ok.

if @Popup = 1 then
    set :hidden = 1
else
    if @Popup is null then
        set :hidden = 1
    end
end

Save the form.

In case you want to edit an existing form where components where placed in a single layer, or in the wrong one, select the component(s), go to Properties, choose the correct Layer, and save the form.

Note that this is only a suggestion of design. The use of layers and IQL are flexible to build other types of forms.