Quick start

Below you can find guidance how to render a form with Form Renderer.

Configure

The following code illustrates a basic component configuration.

<form-renderer id="fr"></form-renderer>

let fr = document.getElementById("fr");

formMetadata = {
  name: 'my-form',
  version: '1.0.0'
};

credentials = {
  username: 'user',
  password: 'pwd'
};

fr.resourceUrl = 'https://better-ehr-server.com/rest/v1';
fr.formMetadata = formMetadata;
fr.credentials = credentials;

NOTE version in formMetadata is an optional parameter, if omitted the latest version of that form is used

Compositions and CompositionIds

Passing composition or compositionId to the form will fill the form with data from the composition.

• When you pass a composition to the form renderer, the form renderer will fill the form with the composition provided.
• When you pass a compositionId to the form renderer, the form renderer will fetch the composition from the server and fill the form with it.
• When you pass both compositionId and composition, the form renderer will ignore the provided composition and fetch the composition from the server using the compositionId.
• When you do not pass either compositionId or composition, the form renderer will render an empty form.
• When you pass a null value as compositionId, the form renderer will render an empty form.

Configurable form context parameters

We understand that each application has its own use cases and requirements, and we understand we can't cover all those needs without an extensive set of configuration options which you can configure for your needs. Below are instructions how to pass configuration (EhrFormContext object) to Form Renderer. For more details about options head to EhrFormContext.

<form-renderer id="fr"></form-renderer>

let fr = document.getElementById("fr");
// ...

context = {
  language: 'en',
  readonly: false,
  territory: 'SI',
  presentationMode: true,
  showAllPages: false,
  dateFormat: 'dd/MM/yyyy',
  autoPrefill: {
      enabled: true,
      mode: 'LATEST_COMPOSITION',
      customAqlView: "my-custom-aqlview-to-prefill-data"
  }
};

fr.context = context;

Credentials

There are two ways form renderer handles credentials:

• Basic Auth
• OAuth 2.0

Following are instructions to set up both cases  

Basic Auth

Basic auth is the simplest and most straight forward option, where you provide a credentials object to the renderer containing username and password combination:

let fr = document.getElementById("fr");
let resourceUrl = 'https://better-ehr-server.com/rest/v1';
let credentials = {
  username: 'user',
  password: 'pswd'
};

fr.credentials = credentials;
fr.resourceUrl = resourceUrl;

OAuth2.0

Form renderer also supports OAuth2.0, where it is possible to provide a renderer with an access token.

Instead of username and password, a credentials object with authType and token should be provided to renderer.

let fr = document.getElementById("fr");
let resourceUrl = 'https://better-ehr-server.com/rest/v1';
let credentials = {
  authType: 'oauth2',
  token: 'a2lkIiA6ICJfRjRVUENFYUg4Nmk5'
};

fr.credentials = credentials;
fr.resourceUrl = resourceUrl;

This example, however, is only the first step in configuring the renderer, because the token will eventually expire. If you do not provide a new token until then the renderer has a builtin fallback and will trigger an onRequestUpdatedToken event for which you can listen to.

fr.addEventListener('onRequestUpdatedToken', () => {
  // implement refresh token here
})

To update the token you can use the updateToken(token) method call. The token can be updated at any time, however the renderer does expect an updated token within 5000ms after emitting the onRequestUpdatedToken event. If a new token is not provided or an invalid token is passed, renderer will throw an error.

fr.updateToken('FTYXEyaDdnanFvWDZVIn0.eyJqdGkiOiIzMGU2OTc5ZS00ZTAz');

Alternatively to the above method you can also provide a renderer with a new credentials object, which will also trigger the updateToken(token) method call:

let updatedCredentials = {
  authType: 'oauth2',
  token: 'FTYXEyaDdnanFvWDZVIn0.eyJqdGkiOiIzMGU2OTc5ZS00ZTAz'
};

fr.credentials = updatedCredentials;