Skip to main content

Question Rendering

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

The extensions that fall under this subsection are:

From SDC - Questionnaire Item UI Controls

  • autocomplete - Auto-complete
  • drop-down - Drop down
  • check-box - Checkbox
  • radio-button - Radio Button
  • slider - Slider

From SDC - Advanced Form Rendering

Autocomplete

Provides a list of potential matches based on text entered into the field. It is useful when performing a search over a large valueSet via a terminology service.

Autocomplete is only supported on open-choice items.

Open Choice Usage

Provides a list of options to choose from drop-down list. It is useful for small-to-medium sized lists of options that can reasonably be scanned and selected.

Drop down is only supported on choice items.

Choice AnswerOption Usage

Choice AnswerValueSet Usage

Checkbox

Provides a list of options with a box beside each option. It is useful for questions where more than one option can be selected.

Checkbox is only supported on choice and open-choice items. It is commonly used with choiceOrientation extension.

Choice AnswerOption Usage

Open-choice AnswerOption Usage

Choice AnswerValueSet Usage

Open-choice AnswerValueSet Usage

Radio Button

Provides a list of options with a radio button beside each option. It is useful for questions where only one option can be selected.

Radio button is only supported on choice and open-choice items. It is commonly used with choiceOrientation extension.

Choice AnswerOption usage

Open-Choice AnswerOption usage

Choice AnswerValueSet usage

Open-Choice AnswerValueSet usage

Slider

Provides a horizontal axis between the high and low values which can be visually manipulated to select values. It is useful for limiting the number of selectable values within a certain range.

Slider is only supported on integer items. It is commonly used with minValue, maxValue and sliderStepValue extensions.

Basic Usage

ChoiceOrientation

Forces the rendering of choices in a vertical or horizontal orientation.

ChoiceOrientation is only supported on itemControl "radio-button" and "check-box" extensions.

Basic Usage

SliderStepValue

Indicates the increment with which a slider will move between the minValue and the maxValue.

SliderStepValue is only supported on the itemControl "slider" extension.

Basic Usage

Collapsible

Allows the child items of a group to be displayed in a collapsible form where items can be shown and hidden from the view. It is useful for particularly long questionnaires.

Non-Group - Default Open Usage

Non-Group - Default Closed Usage

Group - Default Open Usage

Group - Default Closed Usage

Group - Nested Usage

note

When a parent of a child collapsible item is collapsed, its child items effectively stopped being rendered by React. This means the collapsible status of any child collapsible groups will return to the default values ("default-open" or "default-closed") as defined in the Questionnaire.

EntryFormat

Displays a "ghost" text in the field. Acts as a guide for the user on what to enter in the field.

It disappears from the field after text is entered.

EntryFormat is only supported on decimal, integer, string and text "text-field"-based items.

Basic Usage

Questionnaire-unit

Displays a unit of measurement at the right end of the field. This is useful when the field expects a specific unit to be entered.

Questionnaire-unit is only supported on decimal, integer, string and text "text-field"-based items.

Basic Usage