Components

There may be situations where you might want to separate commonly-used form logic into separate reusable bits. In such cases, you can structure that logic as a component form. Components can therefore be thought of as reusable forms that carry domain-specific information. Imagine a situation where you're creating many forms for use in a Point of Care setting. You might find that multiple forms might need to have sections for collecting pre-clinic Review information. This pre-clinic Review information could include details such as:

Current HIV status
Whether a visit was scheduled or not
Reasons for a visit
Current visit type
Patient's insurance information

Now imagine having to define all of these sections and their accompanying questions in each of your forms. Components are the perfect tool for such situations.

Creating Components

To create a component, follow the same procedure of creating a form (opens in a new tab) with the exception being at the point of saving.

It is advisable to prefix the name of the component with component_. For example, if you're creating a component for pre-clinic review, you could name it component_pre-clinic-review.
From the dropdown of encounters, you MUST select the encounter type Component as shown below:

Save Component

After saving, the component will be available in the list of forms and you can filter forms if you only want to view saved components.

View Components

The resulting component json will be as shown below;

{
  "name": "component_pre-clinic-review",
  "uuid": "xxxx",
  "processor": "EncounterFormProcessor",
  "pages": [
    {
      "label": "Pre-clinic Review",
      "sections": [
        {
          "label": "Pre-clinic Review",
          "questions": [
            {
              "label": "Current HIV status",
              "id": "currentHivStatus",
              "type": "obs",
              "questionOptions": {
                "rendering": "select",
                "concept": "9e4d6436-4040-46a3-a0ae-6dbc0acfe593",
                "answers": [
                  {
                    "concept": "a896f3a6-1350-11df-a1f1-0026b9348838",
                    "label": "HIV positive"
                  },
                  {
                    "concept": "a896d2cc-1350-11df-a1f1-0026b9348838",
                    "label": "HIV negative"
                  },
                  {
                    "concept": "a899b50a-1350-11df-a1f1-0026b9348838",
                    "label": "Unknown"
                  }
                ]
              },
              "validators": []
            },
            {
              "label": "Was the visit scheduled?",
              "id": "wasVisitScheduled",
              "type": "obs",
              "questionOptions": {
                "rendering": "select",
                "concept": "a89c4220-1350-11df-a1f1-0026b9348838",
                "answers": [
                  {
                    "concept": "a899b35e-1350-11df-a1f1-0026b9348838",
                    "label": "Yes"
                  },
                  {
                    "concept": "a899b42e-1350-11df-a1f1-0026b9348838",
                    "label": "No"
                  }
                ]
              },
              "validators": []
            },
            ....
          ]
        }
      ]
    }
  ]
}

Referencing Components

You can reference components that have already been saved in the system by adding it the referencedForms key to your json form.

"referencedForms": [
  {
    "formName": "component_preclinic-review",
    "alias": "pcr"
  },
  {
    "formName": "component_art",
    "alias": "art"
  }
]

Available visual options

form : The alias of the referenced component form as defined in the referencedForms key
page : The page label of the referenced component form
section : The section label of the referenced component form to be displayed
excludeQuestions : An array of question id(s) to be excluded from the referenced section of component form

Example

Below is the complete json form with 2 components referenced;

{
  "name": "ART Enrollment Form",
  "uuid": "xxxx",
  "encounterType": "xxxx",
  "processor": "EncounterFormProcessor",
  "referencedForms": [
    {
      "formName": "component_preclinic-review",
      "alias": "pcr"
    },
    {
      "formName": "component_art",
      "alias": "art"
    }
  ],
  "pages": [
    {
      "label": "Pre-Clinic Review",
      "sections": [
        {
          "reference": {
            "form": "pcr",
            "page": "Pre-clinic Review",
            "section": "Pre-clinic Review"
          }
        }
      ]
    },
    {
      "label": "ART History",
      "sections": [
        {
          "reference": {
            "form": "art",
            "page": "ART ",
            "section": "ART History",
            "excludeQuestions": ["currentArtRegimen"]
          }
        }
      ]
    }
  ]
}

Questions Field Types Reference