Custom Render & Validation Logic ​

In Visiontree Auto Renderer, certain form fields can be conditionally displayed or validated based on specific criteria. This tutorial guides you through the "enableWhen" property for custom rendering and the use of custom validation logic in your JSON configuration.

Prerequisites ​

• Basic knowledge of Vue 3's Composition API.
• An understanding of the Visiontree Auto Renderer system.

1. Custom Rendering with "enableWhen" in the JSON File ​

In your .json configuration, you can add the "enableWhen" property to dictate when a particular form item should be displayed:

{
  ...
  "linkId": "eprd_surgery_type",
  "enableWhen": [
    {
      "answerCoding": {
        "code": "a.eprd_surgery_joint::eprd_surgery_joint_knee",
        "system": "https://fhir.brainlab.com/code-systems/v0.2"
      },
      "operator": "=",
      "question": "eprd_surgery_joint"
    }
  ],
  ...
}

This configuration will show the "eprd_surgery_type" question when the answer to the "eprd_surgery_joint" question equals the specified code.

2. Custom Validation with Constraints in the JSON File ​

With Visiontree Auto Renderer, you can also impose custom validations on form fields. The following example illustrates how to enforce a regex pattern to validate an input for numbers only:

{
  "linkId": "regex-test",
  "text": "Regex Test (Numbers Only)",
  "type": "text",
  "extension": [
    {
      "url": "http://hl7.org/fhir/StructureDefinition/questionnaire-constraint",
      "extension": [
        {
          "url": "key",
          "valueId": "regex"
        },
        {
          "url": "severity",
          "valueCode": "error"
        },
        {
          "url": "human",
          "valueString": "Only numbers allowed"
        },
        {
          "url": "expression",
          "valueString": "value.matches('^d+$')"
        }
      ]
    }
  ]
}

In this example:

• The key is set to regex.
• The severity is an error, indicating the type of feedback to present.
• The human field provides a user-friendly error message.
• The expression employs a regex pattern to ensure that only numbers are entered.

By integrating the constraint into your JSON file, the Visiontree Auto Renderer can validate the user input based on your custom rules.

This combination of custom rendering and validation logic provides a powerful toolkit for creating adaptive and robust forms in Visiontree Auto Renderer.