Skip to main content

Group Rendering

This subsection consists of the group-related advanced rendering extensions.

The extensions that fall under this subsection are:

From SDC - Questionnaire Item UI Controls

  • gtable - Group Table
  • grid - Group Grid
  • tab-container - Tab Container

Group Table

Allows questions within the group to be rendered as columns in a table with each group repetition as a row.

A group table provides the following controls:

  1. Add Row - Adds a new row to the group table.
  2. Remove Item - Removes the selected row from the group table.
  3. Row checkbox - Selects row items to be captured in the QuestionnaireResponse. By default, all rows are selected.
  4. Select-all checkbox - Selects or unselects all rows in the group table.
  5. Row drag indicator - Allows the user to drag and drop rows for reordering.

Basic Usage

Repeating Usage

note

Having too many columns in a group table can make the form question difficult to read. It is recommended to have a maximum of 4-5 columns in a group table.

Group Grid

Allows questions within the group to be rendered as a grid. Each row in the grid should refer to a topic/section, with the columns representing the related questions.

Refer to the grid section in Questionnaire Item UI Controls for a detailed explanation in constructing a group grid.

Single-row Usage

Multi-row Usage

note

Similar to the group table, having too many columns in a group grid can make the form question difficult to read. It is recommended to have a maximum of 4-5 columns in a group table.

Tab Container

Indicates that the group represents a collection of tabs.

This can be used to create a "tabbed" form, with clickable tabs on the left and the form sections on the right.

Conditional rendering can be used to show/hide tabs based on form answers or a pre-filled value i.e. a patient's age.

Basic Usage

Conditional Rendering Usage