Layers in Form designer

Layers is a way to organize your forms in the Form Designer. By working in a single layer, components from other layers will not disturb you when trying to design your form.

In the rendered form layers have no effect. Instead, you should use the :hidden property in Behavior to conditionally hide panels, sections or other components.

The following are examples of what 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 the layer dropdown in toolbar, add click Add new layer. Click the layer you just created to select it. Note that the canvas now 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 add another layer, 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.

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

If you placed a component in the wrong layer, you can change its layer in the properties panel. Changing the layer for a component also changes the layer of all its children.

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.
Create two extra layers, Layer 1 and Layer 2, by clicking Add new layer in the layers dropdown.
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.

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.

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

The logic for when a component is visible in the Form Designer is:

It belongs to the current layer
One of its children is visible

For example: if a component X is placed in Layer 5, and Layer 5 is selected, then X will be shown along with all of its parents, all the way up to the form root.