Form wizard - Layout

Applications module Application structure / Highlight page New main menu / Form wizard



Using the Form wizard, style classes are written to the surrounding grouping, these effect the arrangement of the elements and the corresponding titles in the grouping. To the right of each of the four options in the dialog, you'll see a preview of the option.

Option 1

In all display sizes (SMALL, MEDIUM, LARGE), the titles will be hidden and - provided they are available - placeholders will be shown. The Display title in control setting, which can be accessed in the Properties of edit elements, is automatically activated by the Form wizard.



Here's what it looks like in the web:

Option 2

In all display sizes, the titles and the edit elements will be displayed one below the other in their own row. Here's what it looks like in the web:

Option 3

On small displays, the titles will be hidden and placeholders will be shown instead, like in Option 1. On medium and large display sizes, the titles and edit elements will each be shown in their own row, like in Option 2. Here's what it looks like in the web on a small display size:

Option 4

On small displays, the titles are hidden and placeholders will be shown instead. On medium displays, the titles and edit elements are shown in their own row. On large displays, the titles and the corresponding edit elements will be displayed next to one another. Here's what it looks like in the web on a large display size:

View pages

On view pages, placeholders will not be shown in the view elements. Instead, the title will, where appropriate, actually be hidden.

Style classes

Additional combincations can also be created by manually entering style classes. The following style classes are defined for edit and/or view elements within a grouping generated by the Form wizard. The style class Container_ResponsiveForm, the starting class for the groupings, must be present so that ix-ViewPort-label-Position classes are effective. Here, the styles are inherited from the smaller to the larger display size, meaning from SMALL to MEDIUM and from MEDIUM to LARGE. For example, to depict Option 1, the Form wizard writes the class ix-small-label-inline to the Container_Responsive grouping. For Option 3, ix-medium-label-top is additionally written to overwrite the settings for the medium and large display sizes. It's also conceivable, to, for example, create a grouping using the class Container_ResponsiveGroup ix-small-label-left, where titles and edit elements are always shown next to each other on small displays.

The last selected layout option for the respective type (e.g. div layout for an edit page) is saved in the file manager.properties.