Skip to main content

Display/Text Rendering

This subsection consists of the display and text-related advanced rendering extensions.

The extensions that fall under this subsection are:

From SDC - Questionnaire Item UI Controls

  • prompt - Prompt (deprecated - encouraged to use entryFormat)
  • unit - Unit (deprecated - encouraged to use questionnaire-unit)
  • lower - Lower-bound
  • upper - Upper-bound
  • flyover - Fly-over

Custom Questionnaire Item UI Controls

  • context-display

From SDC - Advanced Form Rendering

Prompt

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

It continues to hover above the field, even when the field is not empty.

Basic Usage

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.

Basic Usage

Lower-bound

Displays the lower-bound label of a slider control question.

The usage example below is same as the upper-bound extension.

Basic Usage

Upper-bound

Displays the upper-bound label of a slider control question.

The usage example below is same as the lower-bound extension.

Basic Usage

Flyover

Displays a fly-over text when the item's text is hovered over.

Basic Usage

Context Display

This is a custom Questionnaire Item UI Control extension designed for the purpose of showing contextual information of a tab in a tabbed form i.e. in progress, completed, etc.

LvlCodeDisplayDefinition
2context-displayContext DisplayShould be used with a tab-container. Display item is rendered as a contextual piece of visual information i.e icon/emoji on the tab and the currently displayed tab section's header.

Usage rules:
1. Display item should use rendering-xhtml to display a base64 image.
2. Display item should be placed in a child item of type 'group' within a 'tab-container' group.
3. Display item also has to be placed before any other question items in the group. Multiple 'context-display' items can be placed, and the order of which they are placed matters.
warning

As this a custom (and has fairly complex usage requirements) extension, it might not play well with other SDC form renderers. It will most likely appear as a regular display item displayed before other items in the group.

Tabs Usage

tip

The presence of context display items in a group enables a "Completed Tabs Shown/Hidden" mechanic in a tabbed form.

This mechanic is useful when multiple people are involved in filling a form and need to know which tabs have been completed or can be skipped.

This mechanic doesn't interact with the "Previous/Next Tab" buttons. You can still navigate to any tab regardless of its visual shown/hidden status.

Rendering Style

Allows styling of the item's label using CSS styles. This is useful when the item's label needs to be styled differently from the rest of the form to draw attention to it.

For more information, refer to http://hl7.org/fhir/uv/sdc/rendering.html#rendering-style.

Basic Usage

Calculations Usage

Rendering XHTML

Provides an alternate representation of the item's label as a XHTML string. Allows for the rendering of styled text and base64-encoded images.

For more information, refer to http://hl7.org/fhir/uv/sdc/rendering.html#rendering-xhtml.

CSS Usage

HTML List Usage

Base64 Image Usage

DisplayCategory

Indicates what kind of display item it is so that differential formatting can be applied based on the purpose of the display element.

Refer to http://hl7.org/fhir/R4/valueset-questionnaire-display-category.html for the full set of possible codes.

Only instructions are supported currently.

Instructions Usage

Text value of the display item is rendered as instructions below the input field.

OpenLabel

Should be used with an open-choice item. Provides a label text to display beside the free-text field. i.e. 'Other, please specify', or 'Additional condition', or 'More reason(s)', etc.

Basic Usage

warning

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

ShortText

Provides a short text for an item. This is useful when the questionnaire is rendered on smaller devices like a mobile phone.

In Smart Forms, it is used when displaying a group item's text in a tab.

Tabs Usage