Questionnaire Implementation ​

In this tutorial, we'll walk you through the detailed process of loading a questionnaire into the Visiontree Auto Renderer when integrating with a React application.

Table of Contents ​

1. Introduction
2. Preparing the Questionnaire Configuration
3. Loading the Configuration into Visiontree Auto Renderer

Introduction ​

Loading a questionnaire correctly into the Visiontree Auto Renderer ensures a seamless experience for users. Given the framework's compatibility with React, we'll also highlight how to set this up in a React environment.

Preparing the Questionnaire Configuration ​

The questionnaire should be formatted as a FHIR resource. Ensure:

• Your questionnaire adheres to the FHIR r4.Resource format.
• All questions and related details are defined.

{
  "resourceType": "Questionnaire",
  "id": "your-questionnaire-id",
  "status": "active",
  "subjectType": ["Patient"],
  "date": "2023-09-27",
  "item": [
    {
      "linkId": "1",
      "text": "Question text here",
      "type": "string",
      // other question attributes
    },
    // additional questions
  ]
}

Loading the Configuration into Visiontree Auto Renderer ​

Integrating with a React application adds an extra layer of configuration. Below is a step-by-step guide tailored for a React environment:

1. Import the necessary modules:

import { Core } from '@visiontree/mfx-auto-renderer'
import React from 'react'

2. Define the FHIR resources with your questionnaire:

const questionnaireConfig = {
  fhirResources: [
    {
      "resourceType": "Questionnaire",
      // ... your questionnaire details
    }
  ]
}

3. Load the configuration:

Core.loadConfig(questionnaireConfig)

4. If you're integrating with a React application, make sure to mount the Visiontree Auto Renderer correctly:

import { createMfxApp } from '@visiontree/mfx-auto-renderer'

function App() {
  // ... other code ...

  useEffect(() => {
    createMfxApp().mount('.mfx-form')
  })

  return (
    <div className="host-app">
      <div className="host-app-header">
        -- Header
      </div>
      <div className="mfx-form" />
      <div className="host-app-footer">
        -- Footer
      </div>
    </div>
  )
}