Form wizard - Layout

Applications module Application structure / Select a page New menu / Form wizard



The form wizard writes style classes to the surrounding grouping, these affect 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 will 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 dialog of edit elements, is automatically activated by the form wizard.

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 combinations 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 included so that "ix-ViewPort-label-Position" classes take effect. 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 is 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".