Create a new form

Introduction

The OpenMRS Form Builder platform simplifies and partially automates the process of generating user interface forms in OpenMRS 3.

Links and ideas that are important to this text:

• Core concepts

• Validating fields

• Field types

• Developer Guide

What is the Form Builder?

The Form Builder is found at this address:

• Reference Application: https://dev3.openmrs.org/openmrs/spa/form-builder(opens in a new tab)

The Form Builder is an automation tool/website for auto-generating form schema JSON files which can be later loaded into the Form Engine to auto-create micro-frontend user interface forms.

This means the UI/UX developer does not have to manually create the user interface forms. And any technical/or non-technical person can use the form builder to generate these form JSON files.

How to use the Form Builder

Requirements:

• Make sure the Google Chrome browse is installed. Any other browser can also be used.

In the address bar, enter the form builder URL: https://dev3.openmrs.org/openmrs/spa/form-builder(opens in a new tab)

The main login form will open:

Open

After the login form is loaded, enter all the required details in the inputs:

• OpenMRS server URL: This is the OpenMRS backend server installation where your concepts are stored.

• Username: Use the default i.e. admin

• Password: Use the default i.e. Admin123

Once the correct details are entered, the platform will authenticate your login and direct you to the dashboard as depicted below.

Open

To initiate the creation of a new form, click on Create New Form located at the top right. This action will start the process of creating a new Form schema.

Clicking the Create New Form + button will lead you to the interface displayed below. Take note of the preview and the Interactive Builder tabs available.

To start building a form, select the Interactive Builder tab to access the builder page as displayed below:

Click on the Start building text link. A popup window requesting the form details will appear as shown below:

Provide the form name and the form description within the respective fields.

Choose create form button to initiate the form creation process.

The next step is to add a page within a form. Click on the Add page text link as shown below to incorporate a page into your form.

Enter the page name in the pop-up textbox that appears.

After entering the page name, click on the Save button to successfully save the page and proceed.

Next, click on the Add section text link to add a section to your form.

Enter the section name in the provided pop-up text box.

Select Save to save the section added to the form.

Next, add a question to your form by clicking on the Add question text link. Simply select the Add question text link.

Note that a question has several metadata fields that you need to fill out on the pop-up form entry. These fields include:

• Label

• Question ID: Must be unique

• Check if the field is Optional or Required

• Question type

• Field Type

• Backing Concept

• Mappings: Auto generate from concept selected

Here is an example of date field type question:

Here is an example of multi-check field type question:

Here is an example of multi-check field type question displaying all the concept answers selected:

Once you have filled out all the details for the question, click on Save to save it.

You can now navigate to the Preview Form tab to preview how the form will appear when rendered.

Once finish building the form, click on Save to save your final form. A popup will appear prompting you to enter details such as:

• Form name

• Version

• Encounter Type

• Description

Finally, the form is ready for adding to the backend for rendering.