Smart Forms

https://smartforms.csiro.au/docs
Admin
Smart Forms is a web application designed to render FHIR Questionnaires, demonstrating HL7 FHIR...
Tokens:57,257
Snippets:358
Trust Score:5.8
Update:11 months ago
Show doc for...
Tokens:
Raw
### Install SmartForms Renderer with npm

Source: https://smartforms.csiro.au/docs/dev/renderer-overview

This command installs the SmartForms Renderer package using npm. Ensure you have Node.js 20+ and React 17.x or 18.x installed.

```bash
npm install @aehrc/smart-forms-renderer  

```

--------------------------------

### FHIR Observation Resource Example for Data Extraction

Source: https://smartforms.csiro.au/docs/dev/renderer-overview

This JSON snippet illustrates a FHIR Observation resource that can be generated or extracted using template-based logic. It includes details for Body Mass Index (BMI) with specific coding systems (LOINC, UOM). The `extension` fields with `sdc-questionnaire-templateExtractValue` demonstrate how values from a `QuestionnaireResponse` are mapped to FHIR resource elements during the extraction process. This example is derived from the output of the data extraction process.

```json
{
  "resourceType": "Observation",
  "id": "bmi-obs",
  "status": "final",
  "category": [
    {
      "coding": [
        {
          "system": "http://terminology.hl7.org/CodeSystem/observation-category",
          "code": "vital-signs"
        }
      ]
    }
  ],
  "code": {
    "coding": [
      {
        "system": "http://loinc.org",
        "code": "39156-5",
        "display": "Body mass index"
      }
    ]
  },
  "subject": {
    "_reference": {
      "extension": [
        {
          "url": "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-templateExtractValue",
          "valueString": "%resource.subject.reference"
        }
      ]
    }
  },
  "effectiveDateTime": "1900-01-01",
  "_effectiveDateTime": {
    "extension": [
      {
        "url": "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-templateExtractValue",
        "valueString": "now()"
      }
    ]
  },
  "valueQuantity": {
    "_value": {
      "extension": [
        {
          "url": "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-templateExtractValue",
          "valueString": "answer.value.value"
        }
      ]
    },
    "unit": "kg/m2",
    "system": "http://unitsofmeasure.org",
    "code": "kg/m2"
  }
}
```

--------------------------------

### Define Questionnaire with SourceQueries Extension

Source: https://smartforms.csiro.au/docs/sdc/population

This JSON defines a FHIR Questionnaire that includes a `sourceQueries` extension. This extension references a contained batch resource named 'PrePopQuery'. The batch resource specifies a GET request to fetch Observation data, with a placeholder `{{%patient.id}}` that will be replaced with the actual patient ID before execution. This allows for dynamic data fetching for pre-population.

```json
{
  "resourceType": "Questionnaire",
  "contained": [
    {
      "resourceType": "Bundle",
      "id": "PrePopQuery",
      "type": "batch",
      "entry": [
        {
          "fullUrl": "urn:uuid:38a25157-b8e4-42e4-9525-7954fed52553",
          "request": {
            "method": "GET",
            "url": "Observation?code=8302-2&_count=1&_sort=-date&patient={{%patient.id}}"
          }
        }
      ]
    }
  ],
  "extension": [
    {
      "url": "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-sourceQueries",
      "valueReference": {
        "reference": "#PrePopQuery"
      }
    }
  ]
}
```

--------------------------------

### Populate Questionnaire using TypeScript Library

Source: https://smartforms.csiro.au/docs/operations/populate

This example shows how to use the `populateQuestionnaire` function from the `@aehrc/sdc-populate` TypeScript library to populate a Questionnaire resource within a client application. The function takes the Questionnaire and optional context as input and returns the populated QuestionnaireResponse. Refer to the library's API reference for detailed parameter information.

```TypeScript
import { populateQuestionnaire } from "@aehrc/sdc-populate";

async function populateMyQuestionnaire() {
  const questionnaire = { /* your Questionnaire resource */ };
  const context = { /* your context resources */ };

  try {
    const populatedResponse = await populateQuestionnaire(questionnaire, context);
    console.log(populatedResponse);
  } catch (error) {
    console.error("Error populating questionnaire:", error);
  }
}
```

--------------------------------

### Configuring Tab List and Content Widths

Source: https://smartforms.csiro.au/docs/dev/storehooks/renderer-config-store

Illustrates how to define the width of the tab list and tab content areas using responsive breakpoints. This allows for adaptive layouts across different screen sizes.

```javascript
const tabConfig = {
  tabListWidthOrResponsive: {
    tabListBreakpoints: { xs: 12, sm: 4, md: 3 },
    tabContentBreakpoints: { xs: 12, sm: 8, md: 9 }
  }
};

setRendererConfig(tabConfig);

```

--------------------------------

### Consume SourceQueries in InitialExpression

Source: https://smartforms.csiro.au/docs/sdc/population

This JSON snippet demonstrates how to consume the results of a `sourceQueries` extension using an `initialExpression`. It utilizes FHIRPath to access the value from the first entry of the executed batch query, allowing the retrieved data to pre-populate questionnaire items. This requires the `sourceQueries` extension to be defined elsewhere in the questionnaire.

```json
{
  "url": "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-initialExpression",
  "valueExpression": {
    "language": "text/fhirpath",
    "expression": "%PrePopQuery.entry[0].resource.entry.resource.value.value"
  }
}
```

--------------------------------

### Referencing a Contained ValueSet in Questionnaire

Source: https://smartforms.csiro.au/docs/sdc/terminology

This example shows how to reference a ValueSet defined within the 'contained' resource of a FHIR Questionnaire. This approach is useful for self-contained questionnaires or when sharing ValueSets within a single document.

```json
{
  "resourceType": "Questionnaire",
  // ...
  "contained": [
    {
      "resourceType": "ValueSet",
      "id": "example-value-set",
      "url": "http://hl7.org/fhir/ValueSet/example-valueSet",
      // ...
      "expansion": [
        {
          "contains": [
            {
              "system": "http://hl7.org/fhir/ValueSet/example-valueSet",
              "code": "code-1",
              "display": "display-1"
            },
            {
              "system": "http://hl7.org/fhir/ValueSet/example-valueSet",
              "code": "code-2",
              "display": "display-2"
            }
          ]
        }
      ]
    }
  ],
  "item": [
    {
      // ...
      "answerValueSet": "#example-value-set"
    }
  ]
}
```

--------------------------------

### Example SourceResponse JSON Structure

Source: https://smartforms.csiro.au/docs/dev/storehooks/questionnaire-response-store/source-response

This JSON object represents a typical `sourceResponse` structure. It includes essential fields like `resourceType`, `status`, `questionnaire`, and `item`. This structure is used by the renderer to manage the questionnaire response.

```json
{
  "resourceType": "QuestionnaireResponse",
  "status": "in-progress",
  "questionnaire": "",
  "item": []
}

```

--------------------------------

### Build Form API

Source: https://smartforms.csiro.au/docs/api/smart-forms-renderer/functions/buildForm

Constructs a form with an initial Questionnaire and an optional filled QuestionnaireResponse. Supports read-only mode, custom terminology servers, SDC variables, and rendering configurations.

```APIDOC
## Function: buildForm()

### Description
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. The build process also supports applying readOnly mode, providing a default terminology server URL, passing additional SDC variables, adjusting renderer styling, overriding QuestionnaireItem rendering, and overriding SDC UI controls.

### Method
`buildForm`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **params** (BuildFormParams) - Required - BuildFormParams containing the configuration for building the form.

### Request Example
```json
{
  "params": {
    "questionnaire": { ... },
    "questionnaireResponse": { ... },
    "readOnly": true,
    "terminologyServerBaseUri": "http://example.com/fhir/terminology",
    "sdcVariables": { ... },
    "rendererConfigStore": { ... },
    "qItemOverrideComponents": { ... },
    "sdcUiOverrideComponents": { ... }
  }
}
```

### Response
#### Success Response (void)
- None (returns a Promise<void>)

#### Response Example
None
```

--------------------------------

### ResponseParameter Interface

Source: https://smartforms.csiro.au/docs/api/sdc-populate/interfaces/ResponseParameter

This section provides detailed documentation for the ResponseParameter interface, including its properties, their types, and descriptions. It also highlights inherited properties from the ParametersParameter.

```APIDOC
## ResponseParameter Interface

### Description
Documentation for the ResponseParameter interface, detailing its properties and inheritance from ParametersParameter.

### Properties

#### `_id?`
- **Type**: `Element`
- **Optional**: Yes
- **Description**: Optional ID for the element.
- **Inherited from**: `ParametersParameter._id`

#### `_name?`
- **Type**: `Element`
- **Optional**: Yes
- **Description**: Optional name for the element.
- **Inherited from**: `ParametersParameter._name`

#### `_valueBase64Binary?`
- **Type**: `Element`
- **Optional**: Yes
- **Description**: Optional base64Binary value element.
- **Inherited from**: `ParametersParameter._valueBase64Binary`

#### `_valueBoolean?`
- **Type**: `Element`
- **Optional**: Yes
- **Description**: Optional boolean value element.
- **Inherited from**: `ParametersParameter._valueBoolean`

#### `_valueCanonical?`
- **Type**: `Element`
- **Optional**: Yes
- **Description**: Optional canonical value element.
- **Inherited from**: `ParametersParameter._valueCanonical`

#### `_valueCode?`
- **Type**: `Element`
- **Optional**: Yes
- **Description**: Optional code value element.
- **Inherited from**: `ParametersParameter._valueCode`

#### `_valueDate?`
- **Type**: `Element`
- **Optional**: Yes
- **Description**: Optional date value element.
- **Inherited from**: `ParametersParameter._valueDate`

#### `_valueDateTime?`
- **Type**: `Element`
- **Optional**: Yes
- **Description**: Optional dateTime value element.
- **Inherited from**: `ParametersParameter._valueDateTime`

#### `_valueId?`
- **Type**: `Element`
- **Optional**: Yes
- **Description**: Optional ID value element.
- **Inherited from**: `ParametersParameter._valueId`

#### `_valueInstant?`
- **Type**: `Element`
- **Optional**: Yes
- **Description**: Optional instant value element.
- **Inherited from**: `ParametersParameter._valueInstant`

#### `_valueMarkdown?`
- **Type**: `Element`
- **Optional**: Yes
- **Description**: Optional markdown value element.
- **Inherited from**: `ParametersParameter._valueMarkdown`

#### `_valueOid?`
- **Type**: `Element`
- **Optional**: Yes
- **Description**: Optional OID value element.
- **Inherited from**: `ParametersParameter._valueOid`

#### `_valueString?`
- **Type**: `Element`
- **Optional**: Yes
- **Description**: Optional string value element.
- **Inherited from**: `ParametersParameter._valueString`

#### `_valueTime?`
- **Type**: `Element`
- **Optional**: Yes
- **Description**: Optional time value element.
- **Inherited from**: `ParametersParameter._valueTime`

#### `_valueUri?`
- **Type**: `Element`
- **Optional**: Yes
- **Description**: Optional URI value element.
- **Inherited from**: `ParametersParameter._valueUri`

#### `_valueUrl?`
- **Type**: `Element`
- **Optional**: Yes
- **Description**: Optional URL value element.
- **Inherited from**: `ParametersParameter._valueUrl`

#### `_valueUuid?`
- **Type**: `Element`
- **Optional**: Yes
- **Description**: Optional UUID value element.
- **Inherited from**: `ParametersParameter._valueUuid`

#### `extension?`
- **Type**: `Extension[]`
- **Optional**: Yes
- **Description**: There can be no stigma associated with the use of extensions by any application, project, or standard - regardless of the institution or jurisdiction that uses or defines the extensions. The use of extensions is what allows the FHIR specification to retain a core level of simplicity for everyone.
- **Inherited from**: `ParametersParameter.extension`

#### `id?`
- **Type**: `string`
- **Optional**: Yes
- **Description**: Unique id for the element within a resource (for internal references). This may be any string value that does not contain spaces.
- **Inherited from**: `ParametersParameter.id`

#### `modifierExtension?`
- **Type**: `Extension[]`
- **Optional**: Yes
- **Description**: There can be no stigma associated with the use of extensions by any application, project, or standard - regardless of the institution or jurisdiction that uses or defines the extensions. The use of extensions is what allows the FHIR specification to retain a core level of simplicity for everyone.
- **Inherited from**: `ParametersParameter.modifierExtension`

#### `name`
- **Type**: `"response"`
- **Required**: Yes
- **Description**: The name of the parameter (reference to the operation definition).
- **Overrides**: `ParametersParameter.name`

#### `part?`
- **Type**: `ParametersParameter[]`
- **Optional**: Yes
- **Description**: Only one level of nested parameters is allowed.
- **Inherited from**: `ParametersParameter.part`

#### `resource`
- **Type**: `QuestionnaireResponse`
- **Required**: Yes
- **Description**: When resolving references in resources, the operation definition may specify how references may be resolved between parameters. If a reference cannot be resolved between the parameters, the application should fall back to it's general resource resolution methods.
- **Overrides**: `ParametersParameter.resource`

#### `valueAddress?`
- **Type**: `Address`
- **Optional**: Yes
- **Description**: If the parameter is a data type.
- **Inherited from**: `ParametersParameter.valueAddress`

#### `valueAge?`
- **Type**: `Age`
- **Optional**: Yes
- **Description**: If the parameter is a data type.
- **Inherited from**: `ParametersParameter.valueAge`

#### `valueAnnotation?`
- **Type**: `Annotation`
- **Optional**: Yes
- **Description**: If the parameter is a data type.
- **Inherited from**: `ParametersParameter.valueAnnotation`

#### `valueAttachment?`
- **Type**: `Attachment`
- **Optional**: Yes
- **Description**: If the parameter is a data type.
- **Inherited from**: `ParametersParameter.valueAttachment`

#### `valueBase64Binary?`
- **Type**: `string`
- **Optional**: Yes
- **Description**: If the parameter is a data type.
- **Inherited from**: `ParametersParameter.valueBase64Binary`

#### `valueBoolean?`
- **Type**: `boolean`
- **Optional**: Yes
- **Description**: If the parameter is a data type.
- **Inherited from**: `ParametersParameter.valueBoolean`

#### `valueCanonical?`
- **Type**: `string`
- **Optional**: Yes
- **Description**: If the parameter is a data type.

```

--------------------------------

### useResponsive() Hook Examples (JavaScript)

Source: https://smartforms.csiro.au/docs/api/smart-forms-renderer/functions/useResponsive

This hook determines if the screen size matches a given breakpoint query. It takes an object with query options and returns a boolean. Supported queries include 'up', 'only', and custom breakpoints.

```javascript
import { useResponsive } from 'your-hook-library';

// Check if the screen size is at least 'md' (medium)
const isMdUp = useResponsive({ query: 'up', start: 'md' });

// Check if the screen size is exactly 'lg' (large)
const isLgOnly = useResponsive({ query: 'only', start: 'lg' });

// Check if the screen size is at least 'tablet' - this is a custom breakpoint
const isTabletUp = useResponsive({ query: 'up', start: 'tablet' });
```

--------------------------------

### SDC Populate Interfaces

Source: https://smartforms.csiro.au/docs/api/sdc-populate

Details the interfaces available in the @aehrc/sdc-populate package.

```APIDOC
## Interfaces

### CustomContextResultParameter

- **Description**: -

### FetchResourceCallback

- **Description**: To define a method to fetch resources from the FHIR server with a given query string. Method should be able to handle both absolute urls and query strings.

### FetchResourceRequestConfig

- **Description**: -

### FetchTerminologyCallback

- **Description**: To define a method to fetch resources from the FHIR server with a given query string. Method should be able to handle both absolute urls and query strings.

### FetchTerminologyRequestConfig

- **Description**: -

### FhirContext

- **Description**: Represents a contextual FHIR resource reference passed during app launch.

### IdentifierParameter

- **Description**: -

### InputParameters

- **Description**: Input parameters for the $populate operation.

### IssuesParameter

- **Description**: -

### OutputParameters

- **Description**: Output parameters for the $populate operation.

### PopulateQuestionnaireParams

- **Description**: -

### PopulateResult

- **Description**: -

### QuestionnaireRefParameter

- **Description**: -

### ResponseParameter

- **Description**: -
```

--------------------------------

### Check Custom Breakpoint with 'up' Query using useResponsive Hook

Source: https://smartforms.csiro.au/docs/api/smart-forms-renderer/interfaces/UseResponsiveProps

This example illustrates using the useResponsive hook with a custom breakpoint (e.g., 'tablet') and the 'up' query to check if the screen size meets or exceeds this custom size.

```javascript
const isTabletUp = useResponsive({ query: 'up', start: 'tablet' });
```

--------------------------------

### Check Exact Screen Size with 'only' Query using useResponsive Hook

Source: https://smartforms.csiro.au/docs/api/smart-forms-renderer/interfaces/UseResponsiveProps

This example shows how to use the useResponsive hook with the 'only' query type to check if the screen size exactly matches a specific breakpoint (e.g., 'lg' for large).

```javascript
const isLgOnly = useResponsive({ query: 'only', start: 'lg' });
```

--------------------------------

### Basic SmartForms Renderer Usage in React

Source: https://smartforms.csiro.au/docs/dev/renderer-overview

Demonstrates the basic integration of the BaseRenderer component within a React application. It utilizes the useBuildForm hook to initialize the form based on a FHIR Questionnaire and requires a QueryClientProvider for API calls.

```typescript
import React from 'react';  
import {  
  BaseRenderer,  
  RendererThemeProvider,  
  useBuildForm,  
  useRendererQueryClient  
} from '@aehrc/smart-forms-renderer';  
import { QueryClientProvider } from '@tanstack/react-query';  
import { Questionnaire } from 'fhir/r4';  
  
// Pass in your FHIR R4.Questionnaire  
interface YourBaseRendererWrapperProps {  
  questionnaire: Questionnaire;  
}  
  
function YourBaseRendererWrapper(props: YourBaseRendererWrapperProps) {  
  const { questionnaire } = props;  
  
  // The renderer needs a query client to make API calls  
  const queryClient = useRendererQueryClient();  
  
  // This hook builds the form based on the questionnaire  
  const isBuilding = useBuildForm({ questionnaire });  
  
  if (isBuilding) {  
    return <div>Loading...</div>;  
  }  
  
  return (  
    // The RendererThemeProvider provides the default renderer theme based on Material UI  
    <RendererThemeProvider>  
      <QueryClientProvider client={queryClient}>  
        <BaseRenderer />  
      </QueryClientProvider>  
    </RendererThemeProvider>  
  );  
}  

```

--------------------------------

### Check Screen Size with 'up' Query using useResponsive Hook

Source: https://smartforms.csiro.au/docs/api/smart-forms-renderer/interfaces/UseResponsiveProps

This example demonstrates how to use the useResponsive hook to check if the current screen size is at least a specific breakpoint (e.g., 'md' for medium). It utilizes the 'up' query type.

```javascript
const isMdUp = useResponsive({ query: 'up', start: 'md' });
```

--------------------------------

### Get Terminology Server URL using React Hook

Source: https://smartforms.csiro.au/docs/dev/storehooks/terminology-server-store/url

This React component demonstrates how to use the `useTerminologyServerStore` hook to retrieve the terminology server URL. It initializes the `YourBaseRendererWrapper` with a specific URL and displays the current URL using `JsonViewer`. Removing the `terminologyServerUrl` prop will revert to the default.

```javascript
function App() {
  const url = useTerminologyServerStore.use.url();

  return (
    <>
      <YourBaseRendererWrapper
        questionnaire={qChoiceAnswerValueSetBasic}
        terminologyServerUrl="https://tx.ontoserver.csiro.au/fhir"
      />
      <JsonViewer hookName="url" data={url} />
    </>
  );
}

```

--------------------------------

### Get Section Heading from Questionnaire (TypeScript)

Source: https://smartforms.csiro.au/docs/api/smart-forms-renderer/functions/getSectionHeading

This function, getSectionHeading, searches a FHIR Questionnaire object for a given targetLinkId. It uses provided tab definitions to identify and return the associated section heading string. If the linkId or its corresponding heading is not found, it returns null. This is useful for dynamically labeling tabs in a user interface based on questionnaire structure.

```TypeScript
function getSectionHeading(questionnaire: Questionnaire, targetLinkId: string, tabs: Tabs): string | null {
  // Implementation details for searching the questionnaire and matching with tabs would go here.
  // Example placeholder:
  if (questionnaire && targetLinkId && tabs) {
    // Logic to find the heading
    return "Sample Heading";
  } else {
    return null;
  }
}
```

--------------------------------

### use - Accessor and Mutator Methods

Source: https://smartforms.csiro.au/docs/api/smart-forms-renderer/variables/useSmartConfigStore

This section details the methods available under the `use` object, which allow for retrieving and setting various configuration states like client, encounter, FHIR context, patient, and user.

```APIDOC
## Type Declaration

### use

> **use** : `object`

#### use.client()

> **client** : () => `Client` | `null`

##### Returns

`Client` | `null`

#### use.encounter()

> **encounter** : () => `Encounter` | `null`

##### Returns

`Encounter` | `null`

#### use.fhirContext()

> **fhirContext** : () => `FhirContext`[] | `null`

##### Returns

`FhirContext`[] | `null`

#### use.patient()

> **patient** : () => `Patient` | `null`

##### Returns

`Patient` | `null`

#### use.setClient()

> **setClient** : () => (`client`) => `void`

##### Returns

> (`client`): `void`

###### Parameters

Parameter| Type
---|---
`client`| `Client`

###### Returns

`void`

#### use.setEncounter()

> **setEncounter** : () => (`encounter`) => `void`

##### Returns

> (`encounter`): `void`

###### Parameters

Parameter| Type
---|---
`encounter`| `Encounter`

###### Returns

`void`

#### use.setFhirContext()

> **setFhirContext** : () => (`fhirContext`) => `void`

##### Returns

> (`fhirContext`): `void`

###### Parameters

Parameter| Type
---|---
`fhirContext`| `FhirContext`[]

###### Returns

`void`

#### use.setPatient()

> **setPatient** : () => (`patient`) => `void`

##### Returns

> (`patient`): `void`

###### Parameters

Parameter| Type
---|---
`patient`| `Patient`

###### Returns

`void`

#### use.setUser()

> **setUser** : () => (`user`) => `void`

##### Returns

> (`user`): `void`

###### Parameters

Parameter| Type
---|---
`user`| `Practitioner`

###### Returns

`void`

#### use.user()

> **user** : () => `Practitioner` | `null`

##### Returns

`Practitioner` | `null`
```

--------------------------------

### OutputParameters Interface

Source: https://smartforms.csiro.au/docs/api/sdc-populate/interfaces/OutputParameters

Details the properties of the OutputParameters interface, including inherited properties from the Parameters resource.

```APIDOC
## OutputParameters Interface

### Description
Output parameters for the $populate operation.

### Method
N/A (Interface definition)

### Endpoint
N/A (Interface definition)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (200)
This interface defines the structure of parameters, not a direct response.

#### Response Example
None

## Properties
### _id?
> `optional` **_id** : `Element`
#### Inherited from
`Parameters._id`

* * *
### _implicitRules?
> `optional` **_implicitRules** : `Element`
#### Inherited from
`Parameters._implicitRules`

* * *
### _language?
> `optional` **_language** : `Element`
#### Inherited from
`Parameters._language`

* * *
### id?
> `optional` **id** : `string`
The only time that a resource does not have an id is when it is being submitted to the server using a create operation.
#### Inherited from
`Parameters.id`

* * *
### implicitRules?
> `optional` **implicitRules** : `string`
Asserting this rule set restricts the content to be only understood by a limited set of trading partners. This inherently limits the usefulness of the data in the long term. However, the existing health eco-system is highly fractured, and not yet ready to define, collect, and exchange data in a generally computable sense. Wherever possible, implementers and/or specification writers should avoid using this element. Often, when used, the URL is a reference to an implementation guide that defines these special rules as part of it's narrative along with other profiles, value sets, etc.
#### Inherited from
`Parameters.implicitRules`

* * *
### language?
> `optional` **language** : `string`
Language is provided to support indexing and accessibility (typically, services such as text to speech use the language tag). The html language tag in the narrative applies to the narrative. The language tag on the resource may be used to specify the language of other presentations generated from the data in the resource. Not all the content has to be in the base language. The Resource.language should not be assumed to apply to the narrative automatically. If a language is specified, it should it also be specified on the div element in the html (see rules in HTML5 for information about the relationship between xml:lang and the html lang attribute.
#### Inherited from
`Parameters.language`

* * *
### meta?
> `optional` **meta** : `Meta`
The metadata about the resource. This is content that is maintained by the infrastructure. Changes to the content might not always be associated with version changes to the resource.
#### Inherited from
`Parameters.meta`

* * *
### parameter
> **parameter** : `OutputParamArray`
A parameter passed to or received from the operation.
#### Overrides
`Parameters.parameter`

* * *
### resourceType
> `readonly` **resourceType** : `"Parameters"`
Resource Type Name (for serialization)
#### Inherited from
`Parameters.resourceType`
```

--------------------------------

### use.switchPage()

Source: https://smartforms.csiro.au/docs/api/smart-forms-renderer/variables/useQuestionnaireStore

Switches the form view to a specified page.

```APIDOC
## use.switchPage()

### Description
Switches the form view to a specified page.

### Method
N/A (This is a hook)

### Endpoint
N/A (This is a hook)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```json
{
  "newPageIndex": 1
}
```

### Response
#### Success Response (200)
- **void** - This function does not return a value.

#### Response Example
N/A
```

--------------------------------

### SDC Populate Functions

Source: https://smartforms.csiro.au/docs/api/sdc-populate

Details the functions available in the @aehrc/sdc-populate package.

```APIDOC
## Functions

### isCanonicalParameter

- **Description**: Re-exports type predicate and population functions for SDC operations. Use these exports to access type guards and population logic from a single entry point.

### isContextParameter

- **Description**: Re-exports type predicate and population functions for SDC operations. Use these exports to access type guards and population logic from a single entry point.

### isInputParameters

- **Description**: Re-exports type predicate and population functions for SDC operations. Use these exports to access type guards and population logic from a single entry point.

### isOutputParameters

- **Description**: Re-exports type predicate and population functions for SDC operations. Use these exports to access type guards and population logic from a single entry point.

### isSubjectParameter

- **Description**: Re-exports type predicate and population functions for SDC operations. Use these exports to access type guards and population logic from a single entry point.

### populate

- **Description**: Executes the SDC Populate Questionnaire operation - $populate. Input and output specific parameters conformant to the SDC populate specification. Can be deployed as a $populate microservice.

### populateQuestionnaire

- **Description**: Performs an in-app population of the provided questionnaire. By in-app, it means that a callback function is provided to fetch resources instead of it calling to a $populate service. This function helps to you create a nice set of populate input parameters from the provided params. If you already have them, use https://github.com/aehrc/smart-forms/blob/main/packages/sdc-populate/src/SDCPopulateQuestionnaireOperation/utils/populate.ts#L842 instead.
```

--------------------------------

### use.qItemOverrideComponents()

Source: https://smartforms.csiro.au/docs/api/smart-forms-renderer/variables/useQuestionnaireStore

Provides access to override components for question items.

```APIDOC
## use.qItemOverrideComponents()

### Description
Provides access to override components for question items.

### Method
N/A (This is a hook)

### Endpoint
N/A (This is a hook)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
N/A

### Response
#### Success Response (200)
- **Record<string, ComponentType<QItemOverrideComponentProps>>** - An object mapping component keys to their types and props.

#### Response Example
```json
{
  "customComponent": {
    "component": "CustomInput",
    "props": {}
  }
}
```
```

--------------------------------

### Setting Renderer Configuration via Store Hook

Source: https://smartforms.csiro.au/docs/dev/storehooks/renderer-config-store

Demonstrates how to use the `setRendererConfig` hook to update the global renderer configuration. This is useful for applying consistent styling and behavior across multiple forms.

```javascript
import { setRendererConfig } from '@smartforms/renderer';

const config = {
  disableHeadingFocusOnTabSwitch: true,
  hideClearButton: false,
  requiredIndicatorPosition: 'end'
};

setRendererConfig(config);

```

--------------------------------

### use.pages()

Source: https://smartforms.csiro.au/docs/api/smart-forms-renderer/variables/useQuestionnaireStore

Retrieves information about the pages within the form.

```APIDOC
## use.pages()

### Description
Retrieves information about the pages within the form.

### Method
N/A (This is a hook)

### Endpoint
N/A (This is a hook)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
N/A

### Response
#### Success Response (200)
- **Pages** (object) - An object containing page information.

#### Response Example
```json
{
  "pages": [
    {
      "id": "page1",
      "name": "Page One"
    }
  ]
}
```
```

--------------------------------

### SmartForms Renderer with Pre-filled QuestionnaireResponse

Source: https://smartforms.csiro.au/docs/dev/renderer-overview

Shows how to render a form with pre-filled data by passing a QuestionnaireResponse object to the useBuildForm hook. This allows for rendering and displaying responses to a FHIR Questionnaire.

```typescript
import React from 'react';  
import {  
  BaseRenderer,  
  RendererThemeProvider,  
  useBuildForm,  
  useRendererQueryClient  
} from '@aehrc/smart-forms-renderer';  
import { QueryClientProvider } from '@tanstack/react-query';  
import { Questionnaire, QuestionnaireResponse } from 'fhir/r4';  
  
// Pass in your FHIR R4.Questionnaire  
interface YourBaseRendererWrapperProps {  
  questionnaire: Questionnaire;  
  questionnaireResponse?: QuestionnaireResponse;  
}  
  
function YourBaseRendererWrapper(props: YourBaseRendererWrapperProps) {  
  const { questionnaire, questionnaireResponse } = props;  
  
  // The renderer needs a query client to make API calls  
  const queryClient = useRendererQueryClient();  
  
  // This hook builds the form based on the questionnaire  
  const isBuilding = useBuildForm({ questionnaire, questionnaireResponse });  
  
  if (isBuilding) {  
    return <div>Loading...</div>;  
  }  
  
  return (  
    // The RendererThemeProvider provides the default renderer theme based on Material UI  
    <RendererThemeProvider>  
      <QueryClientProvider client={queryClient}>  
        <BaseRenderer />  
      </QueryClientProvider>  
    </RendererThemeProvider>  
  );  
}  

```

--------------------------------

### createInputParameters() Function

Source: https://smartforms.csiro.au/docs/api/sdc-template-extract/functions/createInputParameters

The createInputParameters function is used to prepare the necessary input parameters for the sdc-template-extract extract() function. It takes QuestionnaireResponse, an optional Questionnaire, and an optional comparisonSourceResponse as input.

```APIDOC
## Function: createInputParameters()

### Description
Creates input parameters to be passed to `sdc-template-extract` extract(). The Questionnaire parameter is optional. Refer to https://build.fhir.org/ig/HL7/sdc/OperationDefinition-QuestionnaireResponse-extract.html.

### Method
N/A (Function Definition)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
N/A

### Response
#### Success Response
- **InputParameters** (`InputParameters`) - The generated input parameters object.

#### Response Example
```json
{
  "questionnaireResponse": { ... },
  "questionnaire": { ... },
  "comparisonSourceResponse": { ... }
}
```
```

--------------------------------

### SDC Populate Operation - populate()

Source: https://smartforms.csiro.au/docs/api/sdc-populate/functions/populate

Executes the SDC Populate Questionnaire operation ($populate). This function expects a set of populate input parameters. If you do not have them, consider using the alternative utility function.

```APIDOC
## Function: populate()

### Description
Executes the SDC Populate Questionnaire operation - $populate. Input and output specific parameters conformant to the SDC populate specification. Can be deployed as a $populate microservice.

### Method
POST

### Endpoint
`/websites/smartforms_csiro_au/populate` (Assumed endpoint for the $populate operation)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **parameters** (*InputParameters*) - Required - The input parameters for the populate operation.
- **fetchResourceCallback** (*FetchResourceCallback*) - Required - A callback function to fetch resources.
- **fetchResourceRequestConfig** (*FetchResourceRequestConfig*) - Required - Configuration for fetching resources.
- **fetchTerminologyCallback?** (*FetchTerminologyCallback*) - Optional - A callback function to fetch terminology.
- **fetchTerminologyRequestConfig?** (*FetchTerminologyRequestConfig*) - Optional - Configuration for fetching terminology.

### Request Example
```json
{
  "parameters": { ... },
  "fetchResourceCallback": "function() { ... }",
  "fetchResourceRequestConfig": { ... },
  "fetchTerminologyCallback": "function() { ... }",
  "fetchTerminologyRequestConfig": { ... }
}
```

### Response
#### Success Response (200)
- **OperationOutcome** (*object*) - Contains details about the outcome of the operation.
- **OutputParameters** (*object*) - Contains the output parameters of the populate operation, including custom `populationContextResults` for visual and debugging purposes.

#### Response Example
```json
{
  "// Outcome": "Either OperationOutcome or OutputParameters are returned",
  "resourceType": "OperationOutcome",
  "issue": [
    {
      "severity": "information",
      "code": "informational",
      "details": {
        "text": "Populate operation completed successfully."
      }
    }
  ]
}
```

```json
{
  "// Outcome": "Either OperationOutcome or OutputParameters are returned",
  "outputParameters": {
    "populationContextResults": [
      {
        "parameterName": "exampleResult",
        "value": "exampleValue"
      }
    ],
    "// Other output parameters as defined by SDC populate"
  }
}
```

### See
https://hl7.org/fhir/uv/sdc/OperationDefinition-Questionnaire-populate.html
```

--------------------------------

### Define LaunchContext for Patient Pre-population (JSON)

Source: https://smartforms.csiro.au/docs/sdc/population

This JSON defines a launchContext extension to specify the patient in context for pre-populating a form. It includes the name 'patient', the type 'Patient', and a description.

```json
{
  "url": "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-launchContext",
  "extension": [
    {
      "url": "name",
      "valueCoding": {
        "system": "http://hl7.org/fhir/uv/sdc/CodeSystem/launchContext",
        "code": "patient"
      }
    },
    {
      "url": "type",
      "valueCode": "Patient"
    },
    {
      "url": "description",
      "valueString": "The patient that is to be used to pre-populate the form"
    }
  ]
}
```

--------------------------------

### React Component Using BuildFormButton

Source: https://smartforms.csiro.au/docs/dev/renderer-overview

This React component, `YourBaseRendererWrapperWithButton`, utilizes the `useBuildForm` hook and includes a `BuildFormButton` component. The `BuildFormButton` triggers the `buildForm` function upon click. It requires `questionnaire` and optionally accepts `questionnaireResponse` as props. Dependencies include React, `@aehrc/smart-forms-renderer`, `@tanstack/react-query`, and `fhir/r4` types.

```tsx
import React from 'react';  
import {  
  BaseRenderer,  
  RendererThemeProvider,  
  useBuildForm,  
  useRendererQueryClient  
} from '@aehrc/smart-forms-renderer';  
import { QueryClientProvider } from '@tanstack/react-query';  
import { Questionnaire, QuestionnaireResponse } from 'fhir/r4';  
import BuildFormButton from './BuildFormButton';  
  
// Pass in your FHIR R4.Questionnaire and optional FHIR R4.QuestionnaireResponse as props  
interface YourBaseRendererWrapperWithButtonProps {  
  questionnaire: Questionnaire;  
  questionnaireResponse?: QuestionnaireResponse;  
}

function YourBaseRendererWrapperWithButton(props: YourBaseRendererWrapperWithButtonProps) {  
  const { questionnaire, questionnaireResponse } = props;  
  
  const queryClient = useRendererQueryClient();  
  
  // This time, we are passing only the questionnaire in here to demonstrate the use of the buildForm function  
  const isBuilding = useBuildForm({ questionnaire });  
  
  if (isBuilding) {  
    return <div>Loading...</div>;  
  }

  return (  
    <RendererThemeProvider>  
      <QueryClientProvider client={queryClient}>  
        <>
          {/* Additional button here for building the form*//}
          <BuildFormButton  
            questionnaire={questionnaire}  
            questionnaireResponse={questionnaireResponse}  
          />  
          <BaseRenderer />  
        </>
      </QueryClientProvider>
    </RendererThemeProvider>
  );
}

```

--------------------------------

### PopulateQuestionnaireParams Interface

Source: https://smartforms.csiro.au/docs/api/sdc-populate/interfaces/PopulateQuestionnaireParams

Details the properties available for the PopulateQuestionnaireParams interface, used for configuring questionnaire population operations.

```APIDOC
## Interface: PopulateQuestionnaireParams

### Description
This interface defines the parameters required for populating a questionnaire, including FHIR resources, callback functions for fetching data, and configuration options.

### Properties

#### encounter
- **encounter** (Encounter) - Required - Encounter resource as encounter in context, optional.

#### fetchResourceCallback
- **fetchResourceCallback** (FetchResourceCallback) - Required - A callback function to fetch resources from your FHIR server.

#### fetchResourceRequestConfig
- **fetchResourceRequestConfig** (FetchResourceRequestConfig) - Required - Any request configuration to be passed to the fetchResourceCallback i.e. headers, auth etc.

#### fetchTerminologyCallback
- **fetchTerminologyCallback** (FetchTerminologyCallback) - Optional - A callback function to fetch terminology resources, optional.

#### fetchTerminologyRequestConfig
- **fetchTerminologyRequestConfig** (FetchTerminologyRequestConfig) - Optional - Any request configuration to be passed to the fetchTerminologyCallback i.e. headers, auth etc., optional.

#### fhirContext
- **fhirContext** (FhirContext[]) - Optional - An array of contextual resources within a launch. See https://build.fhir.org/ig/HL7/smart-app-launch/scopes-and-launch-context.html#fhircontext-exp

#### patient
- **patient** (Patient) - Required - Patient resource as patient in context.

#### questionnaire
- **questionnaire** (Questionnaire) - Required - Questionnaire to populate.

#### timeoutMs
- **timeoutMs** (number) - Optional - Timeout in milliseconds for the $populate operation, default is 10000ms (10 seconds).

#### user
- **user** (Practitioner) - Optional - Practitioner resource as user in context, optional.
```

--------------------------------

### InputParameters for $populate

Source: https://smartforms.csiro.au/docs/api/sdc-populate/interfaces/InputParameters

Details the properties of the InputParameters resource used with the $populate operation, extending the base FHIR Parameters resource.

```APIDOC
## InputParameters for $populate Operation

### Description
This resource defines the input parameters for the `$populate` operation on a Questionnaire resource. It extends the base FHIR `Parameters` resource and specifies the structure for passing data to populate a questionnaire.

### Method
POST (typically, as part of an operation)

### Endpoint
`/{Questionnaire}/{id}/$populate`

### Parameters
#### Path Parameters
* **id** (string) - Required - The ID of the Questionnaire resource.

#### Query Parameters
None defined for this operation.

#### Request Body
* **resourceType** (string) - Required - Must be set to `Parameters`.
* **parameter** (InputParamsArray) - Required - An array of parameters passed to the operation. This is the primary way to provide data for populating the questionnaire.
    * **name** (string) - Required - The name of the parameter. For $populate, this would typically be related to the data being provided.
    * **value[x]** (any) - Optional - The value of the parameter. Can be of various types, including `Resource`, `string`, `boolean`, etc., depending on the expected input.

### Request Example
```json
{
  "resourceType": "Parameters",
  "parameter": [
    {
      "name": "data",
      "resource": {
        "resourceType": "Observation",
        "code": {
          "coding": [
            {
              "system": "http://loinc.org",
              "code": "8310-5"
            }
          ]
        },
        "valueQuantity": {
          "value": 37.5,
          "unit": "C",
          "system": "http://unitsofmeasure.org",
              "code": "Cel"
        }
      }
    }
  ]
}
```

### Response
#### Success Response (200)
- **resourceType** (string) - Always `Parameters`.
- **parameter** (array) - An array of parameters. The response typically includes the populated `QuestionnaireResponse` or related information.

#### Response Example
```json
{
  "resourceType": "Parameters",
  "parameter": [
    {
      "name": "questionnaireResponse",
      "resource": {
        "resourceType": "QuestionnaireResponse",
        "questionnaire": "http://example.org/fhir/Questionnaire/f201",
        "status": "in-progress",
        "item": [
          {
            "linkId": "grouping1",
            "text": "History",
            "item": [
              {
                "linkId": "grouping1.1",
                "text": "Condition",
                "item": [
                  {
                    "linkId": "grouping1.1.1",
                    "text": "History of present illness",
                    "answer": [
                      {
                        "valueString": "Patient presents with cough and fever."
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    }
  ]
}
```

### Error Handling
- Standard FHIR OperationOutcome with appropriate error messages for invalid parameters or processing failures.
```

--------------------------------

### Questionnaire Assemble API

Source: https://smartforms.csiro.au/docs/api/sdc-assemble/functions/assemble

The $assemble operation is used to create a fully assembled questionnaire. It takes input parameters, a callback to fetch the questionnaire, and optional request configuration.

```APIDOC
## POST /websites/smartforms_csiro_au/$assemble

### Description
Assembles a fully questionnaire based on the provided input parameters and fetch Questionnaire callback.

### Method
POST

### Endpoint
/websites/smartforms_csiro_au/$assemble

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **parameters** (InputParameters) - Required - The input parameters for $assemble.
- **fetchQuestionnaireCallback** (FetchQuestionnaireCallback) - Required - A callback function defined by the implementer to fetch Questionnaire resources by a canonical url.
- **fetchQuestionnaireRequestConfig** (any) - Optional - A request configuration object to be passed to the callback function.

### Request Example
```json
{
  "parameters": {},
  "fetchQuestionnaireCallback": "function(canonicalUrl, requestConfig) { /* implementation */ }",
  "fetchQuestionnaireRequestConfig": {}
}
```

### Response
#### Success Response (200)
- **OperationOutcome** (object) - An operation outcome indicating errors or warnings.
- **Questionnaire** (object) - The fully assembled questionnaire.
- **OutputParameters** (object) - Output parameters from the assemble operation.

#### Response Example
```json
{
  "resourceType": "Questionnaire",
  "id": "example-questionnaire",
  "status": "draft",
  "item": [
    {
      "linkId": "1",
      "text": "Enter your name",
      "type": "string"
    }
  ]
}
```
```
Tokens:
Raw