Skip to main content

Form Summary Aidbox Renderer Applet

Overview​

The FormSummaryAidboxRendererApplet is an applet that displays a preview of questionnaire responses within a card interface. It allows users to view key form data at a glance and edit responses through a modal dialog. The applet integrates with state management systems to load, display, and persist questionnaire data.

info

The preview displays only a subset of the questionnaire items. Not all fields from the questionnaire are shown in the preview grid — only those explicitly configured in the previewItems array. Users can view and edit all questionnaire items by opening the full edit modal.

Layout Structure​

The FormSummaryApplet features a responsive card-based layout with three main sections. The header displays a card title. The content section shows a preview grid with a 2 columns layout, displaying only the configured preview items with their labels, values, and optional units. Formatted answer values are retrieved from the latest questionnaire response, with a "-" placeholder shown when no answer is available. The footer contains an Open button that appears on hover and triggers the edit modal, using a ghost variant for minimal visual emphasis.

Difference to FormSummaryApplet​

This Applet uses the Aidbox Forms Renderer to edit and display questionnaire responses. Therefore, some differences in behavior and appearance exist. The configuration options are expanded by Aidbox Renderer Options.

Input Parameters​

ParameterTypeRequiredDescription
configFormSummaryAidboxRendererConfig✅Defines the card title, questionnaire ID, and preview items to display. Also the aidbox form settings
serviceRequestIdstring✅References the service request to load the associated encounter

PreviewConfig​

export interface FormSummaryAidboxRendererConfig {
    title: string;
    questionnaireId: string;
    hideFooter?: boolean;
    sdcConfigId?: string;
    hideLanguageSelector?: boolean;
    theme?: string;
    token: string | undefined;
    previewItems: PreviewItemConfig[];
}

title (string) : The display title shown in the card header. This is the main heading users see when viewing the form summary. Example: "Patient Medical History".

questionnaireId (string) : The unique identifier of the questionnaire to load and display. This ID is used to fetch the questionnaire definition from the store and to retrieve associated responses.

hideFooter (boolean) : Will be passed to the Aidbox Forms Renderer.

sdcConfigId (string) : The unique identifier of the SDC configuration which will be loaded from the FHIR Server and then passed to the Aidbox Forms Renderer.

hideLanguageSelector (boolean) : Will be passed to the Aidbox Forms Renderer.

theme (string) : Will be passed to the Aidbox Forms Renderer.

token (string) : Currently necessary JWT Token for the Aidbox Renderer Api Calls. Will be passed to the Aidbox Forms Renderer and should be replaced in the future with our own authentication mechanism.

previewItems (PreviewItemConfig[]) : An array of items to display in the preview grid. Each item specifies which questionnaire fields to show and how to label them. See PreviewItemConfig for detailed structure.

The exact definition of what the renderer-specific options are doing can be found in the Aidbox Forms Renderer documentation. The SDCConfig options which are saved in FHIR Server are described in the SDCConfig documentation.

PreviewItemConfig​

 interface PreviewItemConfig {
    linkId: string;
    label: string;
    unit?: string;
}

linkId (string) : The unique identifier within the questionnaire that corresponds to a specific question or field. Used to retrieve the answer value from the questionnaire response.

label (string) : The human-readable display label shown to the user in the preview. This is independent of the questionnaire's internal naming.

unit (string) (optional) : The measurement unit displayed next to the value. Only shown if provided. If omitted, no unit is displayed.

ServiceRequestId​

The serviceRequestId input is required to link the questionnaire response to the correct service request and encounter, allowing the applet to load and display the appropriate data for the specific context.

Edit Action (Modal Dialog)​

The applet provides a comprehensive editing workflow through modal dialogs:

1. Trigger Edit Modal​

  • Opens the edit dialog with the questionnaire renderer
  • Loads the latest questionnaire response if available
  • Creates a new response if none is available

2. Save Changes​

  • Aidbox Forms Renderer autosaves on every change
  • $save Endpoint is used
  • Click on the Save button to save the form manualy (can be hidden via config)

3. Close Modal​

  • Closes Modal. Changes are always saved on change in Forms Renderer.

4. Submit Changes​

  • $submit Endpoint is used to submit the form
  • author is set and response is saved with completed status
  • On Success the modal closes

4. Amend Changes (can be disabled via config)​

  • $submit Endpoint is used to submit the form
  • response is saved with amended status
  • On Success the modal closes

Example​

 const config: PreviewConfig = {
    questionnaireId: '6a42c9c0-9a5c-4d9e-b2b5-ae4d8628ba48',
    token: 'xyz',
    title: 'Personal Data',
    previewItems: [
         { linkId: 'pat-last-name', label: 'Nachname' },
         { linkId: 'pat-first-name', label: 'Vorname' },
         { linkId: 'vital-height', label: 'Größe', unit: 'cm' },
         { linkId: 'vital-weight', label: 'Gewicht', unit: 'kg' },
         { linkId: 'vital-bmi', label: 'BMI' },
         { linkId: 'vital-ibw', label: 'IBW' },
         { linkId: 'pat-gender', label: 'Geschlecht' },
         { linkId: 'pat-birthday', label: 'Geburtstag' },
         { linkId: 'pat-marital', label: 'Familienstand' },
    ],
 };

serviceRequestId: 'f1a2b3c4-6d5e-4f7a-8b9c-0d1e2f3a4b5c',