The group details page allows us to configure how each group will be displayed in the generated output. This information appears when you select a group on the left hand panel representing the page information.
The top of the page displays the short name for the current group so we can ensure we are working on the correct one. As with the Field Settings page, we can click the Show Full Name button to show the full name of the current group.
The two styling text boxes allow us to associate CSS classes with this group (Group Styling (Class) text box) or to provide a direct CSS string that should be applied to this group. These can be used for visual styling (e.g. to give the group a coloured background) or to enable the creation of a hierarchical CSS file that can display elements differently based on their position within the hierarchy.
The Extended Border Styling option is used to provide more control over the border display of this group. This can be used to show rounded corners, or shadows for example. See the appropriate entry on the WebMaker FAQ for more details on how this is achieved.
The Display Method option provides some control over how the group contents will be laid out in the generated page. There are four main options available, which are Vertical, Horizontal, Table and Grid. The remaining option, Horizontal Table should only be used when this group is beneath a repeat as described below.
The Grid option is the most flexible of the four, as it gives the user control over how many rows and columns will be displayed, and exactly which components will be present in each 'cell' of the grid. Please see the section on Manipulating the Page Structure for details on how this is specified.
There is a special case that occurs if this group is the only child of a repeat element. In this case, if the Display Method of the group is set to Table, the labels will be taken out of the repeat to produce a table with a number of rows based on the data producing the page. This can be useful for displaying summary tables of information.
If the Horizontal Table
Display Method is chosen, the resultant output will be similar to this turned on its side. This means that the data is controlling the number of columns in the table, with the labels down the left hand side.
The Force Table Layout checkbox provides some more control over how the group is generated. Ticking this box will tell the system to use HTML table mark-up to render the group, rather than using more generic container elements such as DIVs and SPANs. This option may also be useful for fixing the relationship between grouped elements in the generated output. Therefore, it may make sense to tick this box for groups at the lowest level, but leave it unchecked for groups higher up in the page hierarchy.
The final checkbox - Use a Fieldset for this group, puts the elements in this group within a containing border, thereby separating it from the rest of the page, and making it more easily distinguishable. This option is often recommended for accessibility, as it provides the user with more context information about the fields contained within it.
The Label position for contained components option is used to provide control over where the labels will be shown for any fields or groups contained within this group. The default option is to place the labels to the left of each field, but if you wanted to change this (for example to put the labels above or to the right of each field), you could put he fields within a group, and then set this property accordingly. Depending on the Display Method of this group, this setting may not be available, or the options provided may be reduced. The Vertical display method prvoides all the options.
Label Details - This section controls whether a label is shown for this group. The format of the controls is the same as for the field label described previously. The checkbox is used to indicate whether the label is required, and the radio buttons decide whether it is a static or dynamic label. If a static label is required it is entered into the Static Label text box, or alternatively binding information must be set on the bindings page to create a dynamic label. The styling options allow full control over how the label will appear using either defined CSS class names, or a valid CSS string.