@aehrc/smart-forms-renderer 0.27.2 → 0.27.4

package/src/components/FormComponents/OpenChoiceItems/OpenChoiceRadioAnswerOptionItem.tsx

@@ -45,20 +45,21 @@ function OpenChoiceRadioAnswerOptionItem(props: OpenChoiceRadioAnswerOptionItemP
 
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
-  const readOnly = useReadOnly(qItem, parentIsReadOnly);
-  const openLabelText = getOpenLabelText(qItem);
-
   // Init answers
   const qrOpenChoiceRadio = qrItem ?? createEmptyQrItem(qItem);
   let valueRadio: string | null = getQrChoiceValue(qrOpenChoiceRadio, true);
   const answers = qrOpenChoiceRadio.answer ?? [];
 
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
+  const openLabelText = getOpenLabelText(qItem);
+
+  const options = qItem.answerOption ?? [];
+
   // Init empty open label
-  const answerOptions = qItem.answerOption;
   let initialOpenLabelValue = '';
   let initialOpenLabelSelected = false;
-  if (answerOptions) {
-    const oldLabelAnswer = getOldOpenLabelAnswer(answers, answerOptions);
+  if (options) {
+    const oldLabelAnswer = getOldOpenLabelAnswer(answers, options);
     if (oldLabelAnswer && oldLabelAnswer.valueString) {
       initialOpenLabelValue = oldLabelAnswer.valueString;
       initialOpenLabelSelected = true;
@@ -79,40 +80,46 @@ function OpenChoiceRadioAnswerOptionItem(props: OpenChoiceRadioAnswerOptionItemP
     changedOptionValue: string | null,
     changedOpenLabelValue: string | null
   ) {
-    if (!answerOptions) return null;
+    if (options.length === 0) {
+      onQrItemChange(createEmptyQrItem(qItem));
+      return;
+    }
 
     if (changedOptionValue !== null) {
-      if (qItem.answerOption) {
-        const qrAnswer = findInAnswerOptions(qItem.answerOption, changedOptionValue);
-
-        // If selected answer can be found in options, it is a non-open label selection
-        if (qrAnswer) {
-          onQrItemChange({ ...createEmptyQrItem(qItem), answer: [qrAnswer] });
-          setOpenLabelSelected(false);
-        } else {
-          // Otherwise, it is an open-label selection
-          onQrItemChange({
-            ...createEmptyQrItem(qItem),
-            answer: [{ valueString: changedOptionValue }]
-          });
-          setOpenLabelValue(changedOptionValue);
-          setOpenLabelSelected(true);
-        }
+      const qrAnswer = findInAnswerOptions(options, changedOptionValue);
+
+      // If selected answer can be found in options, it is a non-open label selection
+      if (qrAnswer) {
+        onQrItemChange({ ...createEmptyQrItem(qItem), answer: [qrAnswer] });
+        setOpenLabelSelected(false);
+        return;
       }
+
+      // Otherwise, it is an open-label selection
+      onQrItemChange({
+        ...createEmptyQrItem(qItem),
+        answer: [{ valueString: changedOptionValue }]
+      });
+      setOpenLabelValue(changedOptionValue);
+      setOpenLabelSelected(true);
+      return;
     }
 
     if (changedOpenLabelValue !== null) {
       setOpenLabelValue(changedOpenLabelValue);
 
+      // If open label is unchecked, remove it from answers
       if (changedOpenLabelValue === '') {
         onQrItemChange(createEmptyQrItem(qItem));
-      } else {
-        setOpenLabelValue(changedOpenLabelValue);
-        onQrItemChange({
-          ...createEmptyQrItem(qItem),
-          answer: [{ valueString: changedOpenLabelValue }]
-        });
+        return;
       }
+
+      // Otherwise, add open label to answers
+      setOpenLabelValue(changedOpenLabelValue);
+      onQrItemChange({
+        ...createEmptyQrItem(qItem),
+        answer: [{ valueString: changedOpenLabelValue }]
+      });
     }
   }
 
@@ -124,6 +131,7 @@ function OpenChoiceRadioAnswerOptionItem(props: OpenChoiceRadioAnswerOptionItemP
       <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <OpenChoiceRadioAnswerOptionFields
           qItem={qItem}
+          options={options}
           valueRadio={valueRadio}
           openLabelText={openLabelText}
           openLabelValue={openLabelValue}

package/src/components/FormComponents/OpenChoiceItems/OpenChoiceRadioAnswerValueSetFields.tsx

@@ -0,0 +1,104 @@
+/*
+ * Copyright 2024 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { ChangeEvent } from 'react';
+import React from 'react';
+import { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
+import type { QuestionnaireItem, QuestionnaireItemAnswerOption } from 'fhir/r4';
+import { StyledRadioGroup } from '../Item.styles';
+import RadioButtonWithOpenLabel from '../ItemParts/RadioButtonWithOpenLabel';
+import RadioOptionList from '../ItemParts/RadioOptionList';
+import { getChoiceOrientation } from '../../../utils/choice';
+import type { TerminologyError } from '../../../hooks/useValueSetCodings';
+import { StyledAlert } from '../../Alert.styles';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import Typography from '@mui/material/Typography';
+
+interface OpenChoiceRadioAnswerValueSetFieldsProps {
+  qItem: QuestionnaireItem;
+  options: QuestionnaireItemAnswerOption[];
+  valueRadio: string | null;
+  openLabelText: string | null;
+  openLabelValue: string | null;
+  openLabelSelected: boolean;
+  readOnly: boolean;
+  terminologyError: TerminologyError;
+  onValueChange: (changedOptionValue: string | null, changedOpenLabelValue: string | null) => void;
+}
+
+function OpenChoiceRadioAnswerValueSetFields(props: OpenChoiceRadioAnswerValueSetFieldsProps) {
+  const {
+    qItem,
+    options,
+    valueRadio,
+    openLabelText,
+    openLabelValue,
+    openLabelSelected,
+    readOnly,
+    terminologyError,
+    onValueChange
+  } = props;
+
+  const orientation = getChoiceOrientation(qItem) ?? ChoiceItemOrientation.Vertical;
+
+  if (options.length > 0) {
+    return (
+      <StyledRadioGroup
+        row={orientation === ChoiceItemOrientation.Horizontal}
+        name={qItem.text}
+        id={qItem.id}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => onValueChange(e.target.value, null)}
+        value={valueRadio}
+        data-test="q-item-radio-group">
+        <RadioOptionList options={options} readOnly={readOnly} />
+
+        {openLabelText ? (
+          <RadioButtonWithOpenLabel
+            value={openLabelValue}
+            label={openLabelText}
+            readOnly={readOnly}
+            isSelected={openLabelSelected}
+            onInputChange={(input) => onValueChange(null, input)}
+          />
+        ) : null}
+      </StyledRadioGroup>
+    );
+  }
+
+  if (terminologyError.error) {
+    return (
+      <StyledAlert color="error">
+        <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
+        <Typography variant="subtitle2">
+          There was an error fetching options from the terminology server for{' '}
+          {terminologyError.answerValueSet}
+        </Typography>
+      </StyledAlert>
+    );
+  }
+
+  return (
+    <StyledAlert color="error">
+      <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
+      <Typography variant="subtitle2">
+        Unable to fetch options from the questionnaire or launch context
+      </Typography>
+    </StyledAlert>
+  );
+}
+
+export default OpenChoiceRadioAnswerValueSetFields;

package/src/components/FormComponents/OpenChoiceItems/OpenChoiceRadioAnswerValueSetItem.tsx

@@ -0,0 +1,156 @@
+/*
+ * Copyright 2024 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useMemo, useState } from 'react';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import { getOpenLabelText } from '../../../utils/itemControl';
+import { getOldOpenLabelAnswer } from '../../../utils/openChoice';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import {
+  convertCodingsToAnswerOptions,
+  findInAnswerOptions,
+  getQrChoiceValue
+} from '../../../utils/choice';
+import type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithParentIsReadOnlyAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
+import OpenChoiceRadioAnswerValueSetFields from './OpenChoiceRadioAnswerValueSetFields';
+import useReadOnly from '../../../hooks/useReadOnly';
+import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+import { useQuestionnaireStore } from '../../../stores';
+import useValueSetCodings from '../../../hooks/useValueSetCodings';
+
+interface OpenChoiceRadioAnswerValueSetItemProps
+  extends PropsWithQrItemChangeHandler,
+    PropsWithIsRepeatedAttribute,
+    PropsWithParentIsReadOnlyAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem | null;
+}
+
+function OpenChoiceRadioAnswerValueSetItem(props: OpenChoiceRadioAnswerValueSetItemProps) {
+  const { qItem, qrItem, parentIsReadOnly, onQrItemChange } = props;
+
+  const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
+
+  // Init answers
+  const qrOpenChoiceRadio = qrItem ?? createEmptyQrItem(qItem);
+  let valueRadio: string | null = getQrChoiceValue(qrOpenChoiceRadio, true);
+  const answers = qrOpenChoiceRadio.answer ?? [];
+
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
+  const openLabelText = getOpenLabelText(qItem);
+
+  // Get codings/options from valueSet
+  const { codings, terminologyError } = useValueSetCodings(qItem);
+
+  const options = useMemo(() => convertCodingsToAnswerOptions(codings), [codings]);
+
+  // Init empty open label
+  let initialOpenLabelValue = '';
+  let initialOpenLabelSelected = false;
+  if (options) {
+    const oldLabelAnswer = getOldOpenLabelAnswer(answers, options);
+    if (oldLabelAnswer && oldLabelAnswer.valueString) {
+      initialOpenLabelValue = oldLabelAnswer.valueString;
+      initialOpenLabelSelected = true;
+      valueRadio = initialOpenLabelValue;
+    }
+  }
+
+  const [openLabelValue, setOpenLabelValue] = useState<string | null>(initialOpenLabelValue);
+  const [openLabelSelected, setOpenLabelSelected] = useState(initialOpenLabelSelected);
+
+  // Allow open label to remain selected even if its input was cleared
+  if (openLabelSelected && valueRadio === null) {
+    valueRadio = '';
+  }
+
+  // Event handlers
+  function handleValueChange(
+    changedOptionValue: string | null,
+    changedOpenLabelValue: string | null
+  ) {
+    if (options.length === 0) {
+      onQrItemChange(createEmptyQrItem(qItem));
+      return;
+    }
+
+    if (changedOptionValue !== null) {
+      const qrAnswer = findInAnswerOptions(options, changedOptionValue);
+
+      // If selected answer can be found in options, it is a non-open label selection
+      if (qrAnswer) {
+        onQrItemChange({ ...createEmptyQrItem(qItem), answer: [qrAnswer] });
+        setOpenLabelSelected(false);
+        return;
+      }
+
+      // Otherwise, it is an open-label selection
+      onQrItemChange({
+        ...createEmptyQrItem(qItem),
+        answer: [{ valueString: changedOptionValue }]
+      });
+      setOpenLabelValue(changedOptionValue);
+      setOpenLabelSelected(true);
+      return;
+    }
+
+    if (changedOpenLabelValue !== null) {
+      setOpenLabelValue(changedOpenLabelValue);
+
+      // If open label is unchecked, remove it from answers
+      if (changedOpenLabelValue === '') {
+        onQrItemChange(createEmptyQrItem(qItem));
+        return;
+      }
+
+      // Otherwise, add open label to answers
+      setOpenLabelValue(changedOpenLabelValue);
+      onQrItemChange({
+        ...createEmptyQrItem(qItem),
+        answer: [{ valueString: changedOpenLabelValue }]
+      });
+    }
+  }
+
+  return (
+    <FullWidthFormComponentBox
+      data-test="q-item-open-choice-radio-answer-option-box"
+      data-linkid={qItem.linkId}
+      onClick={() => onFocusLinkId(qItem.linkId)}>
+      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
+        <OpenChoiceRadioAnswerValueSetFields
+          qItem={qItem}
+          options={options}
+          valueRadio={valueRadio}
+          openLabelText={openLabelText}
+          openLabelValue={openLabelValue}
+          openLabelSelected={openLabelSelected}
+          readOnly={readOnly}
+          terminologyError={terminologyError}
+          onValueChange={handleValueChange}
+        />
+      </ItemFieldGrid>
+    </FullWidthFormComponentBox>
+  );
+}
+
+export default OpenChoiceRadioAnswerValueSetItem;

package/src/components/FormComponents/StringItem/StringField.tsx

@@ -61,7 +61,7 @@ function StringField(props: StringFieldProps) {
       size="small"
       InputProps={{
         endAdornment: (
-          <InputAdornment position={'end'}>
+          <InputAdornment position="end">
             <FadingCheckIcon fadeIn={calcExpUpdated} disabled={readOnly} />
             {displayUnit}
           </InputAdornment>

package/src/hooks/useInitialiseRenderer.ts

@@ -17,7 +17,7 @@
 
 import type { Questionnaire, QuestionnaireResponse } from 'fhir/r4';
 import { useLayoutEffect, useState } from 'react';
-import { initialiseQuestionnaireResponse } from '../utils/initialise';
+import { initialiseQuestionnaireResponse } from '../utils';
 import type Client from 'fhirclient/lib/Client';
 import { readEncounter, readPatient, readUser } from '../api/smartClient';
 import {

package/src/hooks/useNextAndPreviousVisibleTabs.ts

@@ -0,0 +1,86 @@
+/*
+ * Copyright 2024 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useQuestionnaireStore } from '../stores';
+import type { Tabs } from '../interfaces/tab.interface';
+import { constructTabsWithVisibility } from '../utils/tabs';
+
+function useNextAndPreviousVisibleTabs(
+  currentTabIndex?: number,
+  tabs?: Tabs
+): { previousTabIndex: number | null; nextTabIndex: number | null; numOfVisibleTabs: number } {
+  const enableWhenIsActivated = useQuestionnaireStore.use.enableWhenIsActivated();
+  const enableWhenItems = useQuestionnaireStore.use.enableWhenItems();
+  const enableWhenExpressions = useQuestionnaireStore.use.enableWhenExpressions();
+
+  const tabsNotDefined = currentTabIndex === undefined || tabs === undefined;
+
+  if (tabsNotDefined) {
+    return { previousTabIndex: null, nextTabIndex: null, numOfVisibleTabs: 0 };
+  }
+
+  const tabsWithVisibility = constructTabsWithVisibility({
+    tabs,
+    enableWhenIsActivated,
+    enableWhenItems,
+    enableWhenExpressions
+  });
+
+  return {
+    previousTabIndex: getPreviousTabIndex(currentTabIndex, tabsWithVisibility),
+    nextTabIndex: getNextTabIndex(currentTabIndex, tabsWithVisibility),
+    numOfVisibleTabs: tabsWithVisibility.filter((tab) => tab.isVisible).length
+  };
+}
+
+function getPreviousTabIndex(
+  currentTabIndex: number,
+  tabsWithVisibility: { linkId: string; isVisible: boolean }[]
+): number | null {
+  const previousTabs = tabsWithVisibility.slice(0, currentTabIndex);
+  const foundIndex = previousTabs.reverse().findIndex((tab) => tab.isVisible);
+
+  // Previous visible tab not found
+  if (foundIndex === -1) {
+    return null;
+  }
+
+  // Previous visible tab less than 0
+  const previousTabIndex = currentTabIndex - foundIndex - 1;
+  if (previousTabIndex < 0) {
+    return null;
+  }
+
+  return previousTabIndex;
+}
+
+function getNextTabIndex(
+  currentTabIndex: number,
+  tabsWithVisibility: { linkId: string; isVisible: boolean }[]
+): number | null {
+  const subsequentTabs = tabsWithVisibility.slice(currentTabIndex + 1);
+  const foundIndex = subsequentTabs.findIndex((tab) => tab.isVisible);
+
+  // Next visible tab not found, something is wrong
+  if (foundIndex === -1) {
+    return null;
+  }
+
+  return currentTabIndex + foundIndex + 1;
+}
+
+export default useNextAndPreviousVisibleTabs;

package/src/hooks/useOpenLabel.ts

@@ -0,0 +1,43 @@
+/*
+ * Copyright 2024 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { getOldOpenLabelAnswer } from '../utils/openChoice';
+import { useState } from 'react';
+import type { QuestionnaireItemAnswerOption, QuestionnaireResponseItemAnswer } from 'fhir/r4';
+
+function useOpenLabel(
+  options: QuestionnaireItemAnswerOption[],
+  answers: QuestionnaireResponseItemAnswer[]
+) {
+  let initialOpenLabelValue = '';
+  let initialOpenLabelChecked = false;
+
+  if (options.length > 0) {
+    const oldLabelAnswer = getOldOpenLabelAnswer(answers, options);
+    if (oldLabelAnswer && oldLabelAnswer.valueString) {
+      initialOpenLabelValue = oldLabelAnswer.valueString;
+      initialOpenLabelChecked = true;
+    }
+  }
+
+  const [openLabelValue, setOpenLabelValue] = useState(initialOpenLabelValue);
+  const [openLabelChecked, setOpenLabelChecked] = useState(initialOpenLabelChecked);
+
+  return { openLabelValue, setOpenLabelValue, openLabelChecked, setOpenLabelChecked };
+}
+
+export default useOpenLabel;

package/src/index.ts

@@ -1,6 +1,5 @@
 import { questionnaireResponseStore, questionnaireStore } from './stores';
 import type { Questionnaire, QuestionnaireResponse } from 'fhir/r4';
-import { initialiseQuestionnaireResponse } from './utils/initialise';
 import { removeEmptyAnswers } from './utils/removeEmptyAnswers';
 import type { ItemToRepopulate } from './utils/repopulateItems';
 import { getItemsToRepopulate } from './utils/repopulateItems';
@@ -13,26 +12,6 @@ export * from './utils';
 export * from './interfaces';
 export type { ItemToRepopulate };
 
-/**
- * Build the form with an initial Questionnaire and an optional filled QuestionnaireResponse.
- * If a QuestionnaireResponse is not provided, an empty QuestionnaireResponse is set as the initial QuestionnaireResponse.
- *
- * @author Sean Fong
- */
-export async function buildForm(
-  questionnaire: Questionnaire,
-  questionnaireResponse?: QuestionnaireResponse
-): Promise<void> {
-  await questionnaireStore.getState().buildSourceQuestionnaire(questionnaire);
-
-  const initialisedQuestionnaireResponse = initialiseQuestionnaireResponse(
-    questionnaire,
-    questionnaireResponse
-  );
-  questionnaireResponseStore.getState().buildSourceResponse(initialisedQuestionnaireResponse);
-  questionnaireStore.getState().updatePopulatedProperties(initialisedQuestionnaireResponse);
-}
-
 /**
  * Destroy the form to clean up the questionnaire and questionnaireResponse stores.
  *

package/src/stories/BuildFormWrapper.tsx

@@ -0,0 +1,57 @@
+/*
+ * Copyright 2024 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useLayoutEffect, useState } from 'react';
+import type { Questionnaire, QuestionnaireResponse } from 'fhir/r4';
+import { BaseRenderer } from '../components';
+import { QueryClientProvider } from '@tanstack/react-query';
+import ThemeProvider from '../theme/Theme';
+import useQueryClient from '../hooks/useQueryClient';
+import { buildForm } from '../utils';
+
+interface BuildFormWrapperProps {
+  questionnaire: Questionnaire;
+  questionnaireResponse?: QuestionnaireResponse;
+}
+
+function BuildFormWrapper(props: BuildFormWrapperProps) {
+  const { questionnaire, questionnaireResponse } = props;
+
+  const [isLoading, setIsLoading] = useState(true);
+
+  useLayoutEffect(() => {
+    buildForm(questionnaire, questionnaireResponse).then(() => {
+      setIsLoading(false);
+    });
+  }, [questionnaire, questionnaireResponse]);
+
+  const queryClient = useQueryClient();
+
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <ThemeProvider>
+      <QueryClientProvider client={queryClient}>
+        <BaseRenderer />
+      </QueryClientProvider>
+    </ThemeProvider>
+  );
+}
+
+export default BuildFormWrapper;

package/src/stories/assets/questionnaires/QAdvancedAdditionalDisplayContent.ts

@@ -0,0 +1,83 @@
+import type { Questionnaire } from 'fhir/r4';
+
+export const qEntryFormat: Questionnaire = {
+  resourceType: 'Questionnaire',
+  id: 'EntryFormat',
+  name: 'EntryFormat',
+  title: 'Entry Format',
+  version: '0.1.0',
+  status: 'draft',
+  publisher: 'AEHRC CSIRO',
+  date: '2024-05-01',
+  url: 'https://smartforms.csiro.au/docs/advanced/additional-display/entry-format',
+  item: [
+    {
+      extension: [
+        {
+          url: 'http://hl7.org/fhir/StructureDefinition/entryFormat',
+          valueString: '####'
+        }
+      ],
+      linkId: 'postcode',
+      definition: 'http://hl7.org.au/fhir/StructureDefinition/au-address#Address.postalCode',
+      text: 'Postcode',
+      type: 'string',
+      repeats: false
+    }
+  ]
+};
+
+export const qShortText: Questionnaire = {
+  resourceType: 'Questionnaire',
+  id: 'ShortText',
+  name: 'ShortText',
+  title: 'Short Text',
+  version: '0.1.0',
+  status: 'draft',
+  publisher: 'AEHRC CSIRO',
+  date: '2024-05-01',
+  url: 'https://smartforms.csiro.au/docs/advanced/additional-display/short-text',
+  item: [
+    {
+      extension: [
+        {
+          url: 'http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl',
+          valueCodeableConcept: {
+            coding: [
+              {
+                system: 'http://hl7.org/fhir/questionnaire-item-control',
+                version: '1.0.0',
+                code: 'tab-container'
+              }
+            ]
+          }
+        }
+      ],
+      linkId: 'tab-container',
+      type: 'group',
+      repeats: false,
+      item: [
+        {
+          extension: [
+            {
+              url: 'http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-shortText',
+              valueString: 'Regular medications'
+            }
+          ],
+          linkId: 'tab-regular-medications',
+          text: 'Regular medications: check if still required, appropriate dose, understanding of medication and adherence',
+          type: 'group',
+          repeats: false,
+          item: [
+            {
+              linkId: 'highlight-short-text',
+              text: 'Notice the short text is used in the tab. The group title still displays the full text.',
+              type: 'display',
+              repeats: false
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};