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, text, date and dateTime 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, text and quantity items.

Basic Usage​