Skip to main content

Externally defined variables

Externally defined variables are part of the Form environment and enables a way to provide values from external applications to a Form Renderer.

basic
Form Renderer will use variable only if it is used on the form.

Set initial values​

You can pass the variable values to Form Renderer via formEnvironment input in Angular applications or set a formEnvironment directly on a Form Renderer instance in VanillaJS applications.

<!-- Angular way -->
<form-renderer [formEnvironment]="environment"></form-renderer>

<!-- VanillaJS way -->
<form-renderer id="fr"></form-renderer>
// Angular
environment = {
  variables: [
    {
      name: 'ehrId',
      value: '000-92ac-4bf6-bfed-f0d4b9f6'
    },
    {
      name: 'unit-system',
      value: 'metric'
    }
  ]
}

// VanillaJS
const fr = document.getElementById('fr');
fr.formEnvironment = environment;

Change variable value in runtime​

Most of the time in a real world scenarios you will have many variables and creating a new instance of a form environment each time you want to update one variable is cumbersome. More convenient way to update a variable value is to use ScriptApi.setVariableValue().

VanillaJS​

<form-renderer id="fr"></form-renderer>
updateVariable() {
  let scriptApi = fr.getScriptApi();
  scriptApi.setVariableValue('unit-system', 'imperial');
}

Angular​

<form-renderer #fr></form-renderer>
export class MyComponent {
  @ViewChild('fr') private formRenderer: ElementRef;
  // ...

  updateVariable() {
    const scriptApi = this.formRenderer.nativeElement.getScriptApi();
    scriptApi.setVariableValue('unit-system', 'imperial');
  }
}