Skip to main content

Form Summary Applet

Overview​

The FormSummaryApplet 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.

Input Parameters​

ParameterTypeRequiredDescription
configPreviewConfig✅Defines the card title, questionnaire ID, and preview items to display
serviceRequestIdstring✅References the service request to load the associated encounter

PreviewConfig​

 interface PreviewConfig {
    title: string;
    questionnaireId: string;
    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.

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.

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
  • Patches the renderer with existing data

2. Save Changes​

  • Extracts response data from the questionnaire renderer
  • Builds a payload using the mapper service
  • Persists the response to state management
  • Closes the modal on success
  • Shows error if response extraction fails

3. Cancel Edit​

  • Checks for unsaved changes
  • Triggers unsaved changes confirmation dialog if needed
  • Closes all dialogs

4. Unsaved Changes Handling​

  • Allows user to return to editing
  • Option to save changes before closing
  • Discards changes if user confirms

Example​

 const config: PreviewConfig = {
    questionnaireId: '6a42c9c0-9a5c-4d9e-b2b5-ae4d8628ba48',
    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',