Versions Compared

Old Version 1

changes.mady.by.user Grace Potma

Saved on

compared with

New Version Current

changes.mady.by.user Pius Rubangakene

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Updates checkbox
Table of Contents
minLevel1
maxLevel6
outlinefalse
stylenone
typelist
printabletrue

Field Types

The OpenMRS Form Engine leverages what has sometimes been called “The React Form Engine (RFE)”. This project committed to the schema used by the previous Angular-based Form Engine, and as such, there is a high level of compatibility. The OpenMRS Form Engine supports almost all the field types from the JSON schema with a few extensions. The most commonly used fields include text, textarea, number, date and select.

Field types are defined in the questionOptions definition of a question using the following syntax:

Code Block
languagejsx
{
  "questionOptions": {
    "rendering": "" // field type goes here
  }
}

text

Renders a text input.

Code Block
languagejsx
{
  "label":"What Identification Number was issued to the client?",
  "type":"obs",
  "questionOptions":{
    "rendering":"text",
    "concept":"162576AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"
  },
  "id":"patientIdentificationNumber"
}

Renders:

...

number

Renders a number input

Code Block
languagejsx
{
  "label":"Number of pregnancies delivered (parity)",
  "type":"obs",
  "id":"noDelivery",
  "questionOptions":{
    "concept":"a899a920-1350-11df-a1f1-0026b9348838",
    "rendering":"number"
  },
  "validators":[
 
  ]
}

Renders:

...

select

Renders as a dropdown list

Code Block
languagejsx
{
  "label":"What is the reason for conducting the HIV test?",
  "type":"obs",
  "questionOptions":{
    "rendering":"select",
    "concept":"ce3816e7-082d-496b-890b-a2b169922c22",
    "answers":[
      {
        "concept":"7398c91a-8db8-480d-8130-1a92cc208ded",
        "label":"Inconclusive HIV Result"
      },
      {
        "concept":"a6ad599d-2bc4-47b7-81fe-a38e88867c1d",
        "label":"Self Initiative"
      },
      {
        "concept":"0e65e5fd-a1d8-4730-a991-75a1d703cba6",
        "label":"HIV Self Test Positive"
      },
      {
        "concept":"6e768c50-a239-45ff-9920-2c6a9352320e",
        "label":"Index Client Testing"
      },
      {
        "concept":"cb099534-b609-4561-9d4c-dd2fc74cedaf",
        "label":"Assisted Partner Notification (APN)"
      },
      {
        "concept":"5622AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
        "label":"Other"
      }
    ]
  },
  "id":"reasonForTesting"
}

Renders:

...

date

Renders as date input. When clicked, the input reveals a date picker with current date as the default value.

Code Block
languagejsx
{
  "label":"When was the HIV test conducted?",
  "type":"obs",
  "questionOptions":{
    "rendering":"date",
    "concept":"164400AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
    "weeksList":""
  },
  "validators":[
    {
      "type":"date",
      "allowFutureDates":"false"
    },
    {
      "type":"js_expression",
      "failsWhenExpression":"myValue < '1/1/1980'"
    }
  ],
  "id":"dateTestPerformed"
}

Renders:

...

datetime

Renders the date input with a time picker beside it. When clicked, the input will reveal a time picker with the current time as the default value. The time picker is disabled only until a date is provided

Code Block
languagejsx
{
  "label": "Order date",
  "type": "obs",
  "questionOptions": {
    "rendering": "datetime",
    "concept": "162078AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
    "weeksList": "",
    "conceptMappings": [
      {
        "type": "CIEL",
        "value": "162078"
      }
    ]
  },
  "id": "orderDate"
}

Renders:

image-20240418-155718.pngImage Added

checkbox

Renders like a multi-choice select field. This kind of field lets you select more that one option.

Code Block
languagejsx
{
  "label":"Is the client experiencing any of the following TB symptoms?",
  "type":"obs",
  "questionOptions":{
    "rendering":"checkbox",
    "concept":"159800AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
    "answers":[
      {
        "concept":"1494AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
        "label":"Fever lasting more than 3 weeks"
      },
      {
        "concept":"159799AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
        "label":"Cough lasting more than 2 weeks"
      },
      {
        "concept":"138905AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
        "label":"Hemoptysis"
      },
      {
        "concept":"133027AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
        "label":"Night sweats"
      }
    ]
  },
  "id":"tbSymptoms"
}

Renders:

...

You also have an option to display all the answers inline that will render all answers for easier selection by including the "inlineMultiCheckbox": true at the question level

Code Block
{
  "label":"Inline MultiCheckbox Question",
  "type":"obs",
  "inlineMultiCheckbox": true,
  "questionOptions":{
    "rendering":"checkbox",
    "concept":"159800AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
    "answers":[...]
  },
  "id":"multicheckboxQn"
}

Demo:

...

textarea

Renders a textarea input. By default, the textarea will be 4 rows tall. You can configure the number of visible text lines for the input by providing a number to the rows property in your questionOptions definition.

Code Block
languagejsx
{
  "label":"Notes",
  "type":"obs",
  "questionOptions":{
    "rendering":"textarea",
    "concept":"161011AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
    "rows":"5"
  },
  "id":"notes"
}

Renders:

...

radio

Renders a radio input. A radio input allows users to select an option from a list. All options are displayed at the same time and only one option from the available choices can be selected.

Code Block
languagejsx
{
  "label":"Has the client ever been tested for HIV?",
  "type":"obs",
  "questionOptions":{
    "rendering":"radio",
    "concept":"1492AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
    "answers":[
      {
        "label":"Yes",
        "concept":"cf82933b-3f3f-45e7-a5ab-5d31aaee3da3"
      },
      {
        "label":"No",
        "concept":"488b58ff-64f5-4f8a-8979-fa79940b1594"
      },
      {
        "concept":"1067AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
        "label":"Unknown"
      }
    ]
  },
  "id":"everTestedForHIV"
}

Renders:

...

toggle

Renders a toggle input. This type of control is suitable for collecting boolean values. By default, it’s set to false

Code Block
languagejsx
{
  "label":"Was consent provided?",
  "type":"obs",
  "questionOptions":{
    "rendering":"toggle",
    "concept":"976ca997-fb2b-4bef-a299-f7c9e16b50a8",
    "toggleOptions":{
      "labelTrue":"Yes",
      "labelFalse":"No"
    },
    "conceptMappings":[
 
    ],
    "answers":[
      {
        "label":"Yes",
        "concept":"cf82933b-3f3f-45e7-a5ab-5d31aaee3da3"
      },
      {
        "label":"No",
        "concept":"488b58ff-64f5-4f8a-8979-fa79940b1594"
      }
    ]
  },
  "id":"recencyTestingConsent"
}

Renders:

...

content-switcher

This is a custom single select control from Carbon.

Code Block
languagejsx
{
  "label":"Has the client ever been tested for HIV?",
  "type":"obs",
  "questionOptions":{
    "rendering":"content-switcher",
    "concept":"1492AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
    "answers":[
      {
        "label":"Yes",
        "concept":"cf82933b-3f3f-45e7-a5ab-5d31aaee3da3"
      },
      {
        "label":"No",
        "concept":"488b58ff-64f5-4f8a-8979-fa79940b1594"
      },
      {
        "concept":"1067AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
        "label":"Unknown"
      }
    ]
  },
  "id":"everTestedForHIV"
}

Renders:

...

fixed-value

Think of this as a hidden HTML input. In some cases, a form needs to persist a predefined non-mutable value on submission.

This happens for example on instances where multiple forms operate on the same encounter, and where the status of that encounter changes based on the form submitted — for example a lab encounter. A lab request form would set its status to Pending, and when a result comes in, the status becomes Complete.

Code Block
languagejsx
{
  "label":"Status",
  "type":"obs",
  "questionOptions":{
    "rendering":"fixed-value",
    "concept":"6681366c-2174-489a-b951-13a1404935bf",
    "answers":[
      {
        "concept":"162866AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
        "label":"Pending status"
      },
      // ...
    ]
  },
  "id":"status",
  "behaviours":[
    {
      "intent":"*",
      "hide":{
        "hideWhenExpression":"false"
      },
      "value":"162866AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"
    },
    {
      "intent":"COVID_LAB_ORDER_EMBED",
      "hide":{
        "hideWhenExpression":"true"
      }
    }
  ]
}

The value is driven by form behaviour which is defined by user intent. The default (*) behaviour sets the value to 162866AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA (Pending status). When this form is loaded with the COVID_LAB_ORDER_EMBED intent, no observation will be created because the field is evaluated as isHidden.

group

Used to create an obsGroup. This is used when you need to link multiple questions together.

Code Block
languagejsx
{
  "label":"Test Obs group",
  "type":"obsGroup",
  "questionOptions":{
    "rendering":"group",
    "concept":"8acba1d1-67cc-422c-961e-86d6b47bc45b"
  },
  "id":"testObsGroup",
  "questions":[
    {
      "label":"Patient Identification Number",
      "type":"obs",
      "questionOptions":{
        "rendering":"text",
        "concept":"d3205b6a-7192-461f-9ea8-a1ac8af38964"
      },
      "id":"patientClinicIdentificationNumberGroup"
    },
    {
      "label":"Was client linked to care?",
      "type":"obs",
      "questionOptions":{
        "rendering":"select",
        "concept":"e8e8fe71-adbb-48e7-b531-589985094d30",
        "answers":[
          {
            "concept":"cf82933b-3f3f-45e7-a5ab-5d31aaee3da3",
            "label":"Yes"
          },
          {
            "concept":"488b58ff-64f5-4f8a-8979-fa79940b1594",
            "label":"No"
          },
          {
            "concept":"1067AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
            "label":"Unknown"
          }
        ]
      },
      "id":"linkedToCareGroup"
    }
  ]
}

Renders:

...

repeating

Renders a repeating group field.

Code Block
languagejsx
{
  "label":"Test Obs group",
  "type":"obsGroup",
  "questionOptions":{
    "rendering":"repeating",
    "concept":"8acba1d1-67cc-422c-961e-86d6b47bc45b",
    "repeatOptions": {
      "limitExpression": "useFieldValue('groups_count')"
    },
  },
  "id":"testObsGroup",
  "questions":[
    {
      "label":"Patient Identification Number",
      "type":"obs",
      "questionOptions":{
        "rendering":"text",
        "concept":"d3205b6a-7192-461f-9ea8-a1ac8af38964"
      },
      "id":"patientClinicIdentificationNumberGroup"
    },
    {
      "label":"Was client linked to care?",
      "type":"obs",
      "questionOptions":{
        "rendering":"select",
        "concept":"e8e8fe71-adbb-48e7-b531-589985094d30",
        "answers":[
          {
            "concept":"cf82933b-3f3f-45e7-a5ab-5d31aaee3da3",
            "label":"Yes"
          },
          {
            "concept":"488b58ff-64f5-4f8a-8979-fa79940b1594",
            "label":"No"
          },
          {
            "concept":"1067AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
            "label":"Unknown"
          }
        ]
      },
      "id":"linkedToCareGroup"
    }
  ]
}

Renders:

...

The required number of repeatable groups is inferred from the value obtained from the limitExpression property in the repeatOptions object.

Code Block
languagejsx
  "repeatOptions": {
      "limitExpression": "useFieldValue('groups_count')"
    }

If the number of repeated groups in the form does not match the required number specified for the field, a validation error will be thrown.

...

file

Renders a file input control. This allows you to upload files such as images and PDFs. It has options to upload files from computer storage of via camera capture.

Code Block
languagejsx
{
  "label": "Patient Image",
  "type": "obs",
  "questionOptions": {
    "rendering": "file",
    "concept": "7db0c435-5696-4aac-aa78-0ef9941de72b"
  },
  "id": "patient_image"
},

Renders:

...

ui-select-extended

The ui-select-extended is a searchable combo box used to load values from a data source. It works with both inbuilt datasources and custom datasources.

The currently inbuilt datasources are:

  • location_datasource - A LocationDataSource component that fetches Location entities with name matching search term entered in the combo box

  • drug_datasource - A ConceptDataSource component that fetches drug Concept entities with name matching search term entered in the combo box

  • problem_datasource - A ConceptDataSource component that fetches diagnosis & symptom Concept entities with name matching search term entered in the combo box

Code Block
languagejsx
{
  "label": "Location where it occurred (ui-select-extended illustration)",
  "type": "obs",
  "required": false,
  "id": "ui-select-extended-location-illustration",
  "questionOptions": {
    "rendering": "ui-select-extended",
    "datasource": {
      "name": "location_datasource",
      "config": {
        "tag": "e065fcd0-f3a5-432e-8fd6-33d24864d64f"
      }
    },
    "concept": "161011AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"
  }
}

Renders:

image-20240418-160319.pngImage Added

Under datasource, you pass the datasource name and optionally you can pass a config parameter. For the case of location, in the config, we pass the tag.

The ui-select-extended also has 2 flavours (preloaded and searchable)

searchable means we don't preload the data but instead call the api after the user starts to search. For searchable, you would add an extra parameter in the schema - "isSearchable": "true"

problem

This will render a dropdown list that is hooked up to a Problem DataSource. This field will have answers that have class Diagnosis, Problem or Symptom For example: Reason for hospitalisation: answers such as malaria, fever utilising the ui-select-extended control to render concepts of class Diagnosis and Symptom.

Code Block
languagejson
{
	"label": "Adverse Drug Reaction",
	"type": "obs",
	"questionOptions": {
		"rendering": "problem",
		"concept": "162297AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"
	},
	"id": "problemID"
}

Renders:

...

drug

This Rendering type is used for capturing a drug as an observation. Behind the scenes this is done by introducing the drug data source and utilising functionality of the ui-select-extended control.

Code Block
languagejson
{
  "label": "Select a drug",
  "type": "obs",
  "questionOptions": {
    "rendering": "drug",
    "concept": "8d490dfc-c2cc-11de-8d13-0010c6dffd0f"
  },
  "id": "drug_select"
},

Renders:

...