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.
- ix-small-label-inline
- ix-small-label-hidden
- ix-small-label-top
- ix-small-label-left
- ix-medium-label-inline
- ix-medium-label-hidden
- ix-medium-label-top
- ix-medium-label-left
- ix-large-label-inline
- ix-large-label-hidden
- ix-large-label-top
- ix-large-label-left
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.