Getting Started ​

This document will guide you through the process of installing the auto-renderer as an npm library and outline the prerequisites needed to successfully integrate it into your project.

Overview ​

1. Prerequisites
2. Installing the Visiontree Auto Renderer
3. Next Steps

1. Prerequisites ​

Before you can install and use the Visiontree Auto Renderer, ensure you have the following prerequisites in place:

• Node.js: You will need Node.js installed on your system. It is recommended to use the latest LTS (Long Term Support) version. You can download Node.js from the official website: https://nodejs.org/

• npm: The Node Package Manager (npm) is required to install the Visiontree Auto Renderer library. It is typically included with Node.js installations, but you can also download it separately from the npm website: https://www.npmjs.com/

• A JavaScript Project: The Visiontree Auto Renderer is designed to be integrated into JavaScript / TypeScript projects, such as those built using Vue, React, Angular, or even vanilla JavaScript. Ensure you have a compatible project set up and ready for integration.

2. Granting NPM Access ​

To install and use the Visiontree Auto Renderer library, you need to have access to the Visiontree NPM page.

If you do not currently have access, don't worry. We've made it simple for you to gain the required access. All you need to do is fill out a form on our website.

Follow the link to the form here:

• NPM Permissions Form

Once you've submitted the form, we'll process your request and grant you access to the Visiontree NPM page. This process typically takes a few hours. If you're granted access, you'll receive an email confirmation, after which you can proceed with installing the Visiontree Auto Renderer.

If you already have access, you can proceed directly to the next step: Installing the Visiontree Auto Renderer.

3. Installing the Visiontree Auto Renderer ​

With the prerequisites in place, you can now install the Visiontree Auto Renderer library. To do so, open a terminal or command prompt and navigate to your project's root directory. Then, run the following command:

$ npm install @visiontree/mfx-auto-renderer

$ pnpm add @visiontree/mfx-auto-renderer

$ yarn add @visiontree/mfx-auto-renderer

This will install the Auto Renderer library and add it as a dependency in your project's package.json file.

4. Configuration and Next Steps ​

To configure and use the Visiontree Auto Renderer in your application, you will be working with the EngineAPI interface. This interface provides several methods for loading configurations, processing resources, registering plugins, managing forms, and more.

export interface EngineAPI {
  /**
   * Applies a configuration to the Engine.
   * @param config - The configuration object to be applied.
   */
  loadConfig(config: EngineConfig): EngineAPI

  /**
   * Accepts a FHIR Questionnaire or QuestionnaireResponse, processes it, and stores it in the application.
   * @param resource - The resource to be loaded.
   */
  loadFhirResource(resource: r4.Resource): EngineAPI

  /**
   * Registers a plugin within the application.
   * @param plugin - The definition of the plugin to be registered.
   */
  loadPlugin(plugin: EnginePlugin): EngineAPI

  /**
   * Getter for the current working form.
   */
  activeForm: ComputedRef<Form | undefined>
  nextForm(): EngineAPI
  prevForm(): EngineAPI

  /**
   * Sets a value for a given linkId on the working form.
   * @param linkId - Question to answer
   * @param value - Answer to set
   */
  setAnswer(linkId: string, value: unknown): EngineAPI

  /**
   * Sets a prefilled values for a given linkId on the working form.
   * @param origin - The origin of the prefill request
   * @param linkId - Question to prefill
   * @param value - Answer to set
   */
  setPrefillAnswer(origin: string, linkId: string, value: unknown): EngineAPI

  /**
   * Sets a prefilled answerOption for a given linkId question on the working form.
   * Note: This is only applicable for questions with answerOptions.
   * @param origin - The origin of the prefill request
   * @param linkId - Question to prefill
   * @param index -  Index of the answerOption to set
   */
  setPrefillAnswerOptionIndex(
    origin: string,
    linkId: string,
    index: number
  ): EngineAPI

  /**
   * Saves the current working form.
   */
  save(status?: 'in-progress' | 'completed'): Promise<void>
}

5. Starting Auto Renderer ​

The Autorenderer can be started with just a few lines of code. Below you'll find a short snippet that gives you the power to try the Autorenderer for yourself

import { createMfxApp, FhirEngine } from '@visiontree/mfx-auto-renderer'
import questionnaire2 from './eq5d.json'

const engine = new FhirEngine({
  // array of FHIR resources in JSON format
  fhirResources: [questionnaire2],
})

createMfxApp(engine).mount('#app')

engine.init()

.root {
  width: 100vw;
  height: 100vh;
}

Congratulations on getting started with the Visiontree Auto Renderer! We hope you enjoy the flexibility, customization, and seamless integration that our framework has to offer.

Visual Tutorial ​