AOT Technologies

Patients can also use the app to make a range of appointments: a remote consultation by video chat or phone, or an in-person consultation either with their general physician or another doctor based on availability The app helps patients keep track of clinic visits and history as well as prescriptions, all of which are stored digitally

On the doctor’s side, the app is integrated with Oscar EMR, an open-source solution built by doctors for doctors, and popular throughout the Canadian healthcare system AOT’s app helps doctors manage patient appointments and records

A Low-code Platform to the Rescue

Because patients can book appointments for various reasons, the app we developed had to offer a variety of questionnaires to cover the condition and history of different kinds of patients Unfortunately, in the beginning the development team had to spend around 30 to 40 hours to program each questionnaire, and each questionnaire might later have to be modified, again requiring a lot of programming time and effort

Clearly a better solution would be one that took less time and effort, and even bypassed the need for developers when creating or revising these questionnaires The solution the AOT Technologies team took was to use a low-code approach that would allow questionnaires to be fully managed by office staff or by doctors themselves We decided the low-code platform engine we were developing should have the following features:

• Easy drag-and-drop form construction
• Options to add features such as data validation, default values, conditional display, and custom JavaScript code
• A minimum of coding not just for form construction but also form management
• Alignment of new forms with the existing healthcare app’s custom CSS and theme
• Custom components to meet the special requirements of doctors and clinic staff To solve the form-design challenge, the AOT Technologies team chose Form io, a low-code platform we were already familiar with, having integrated it into our open-source forms-and-workflow solution formsflow ai

The interface for building and managing forms was a central feature of our project We needed to let the business user see a list of all questionnaires and be able to edit the forms as requirements changed Patients would need to navigate through various questionnaires and steps depending on their medical situation, and be able to provide basic details and history Then the app would need to set up appointment times and provide the patient’s details to doctors at those appointments

At the start, incorporating all these features seemed like a mammoth task, but as Desmond Tutu once wisely said, “There is only one way to eat an elephant: a bite at a time ” So let’s go through the work step by step

Step 1: Building and Using the Form-design Interface

First the AOT team built a form-design interface so doctors and clinic staff could create the questionnaire forms For the basic view we selected just some of Form io’s Form Builder components so we could keep the drag-and-drop interface simple enough to not overwhelm the designer

If the designer requires more features, the form-design interface also offers an advanced view with more form components available including some tailor-made component interfaces

Whether using the basic or advanced interface, clinic staff and doctors can choose the app’s designer role in order to reach this interface and easily design forms on their own

Each component in the form can be customized using new CSS or existing themes provided by the app We also created some tailor-made components to make sure they too were available for drag-and-drop design In this example, we see the design interface for a text field, allowing us to work our way through options such as changing the component’s label and style, adding validation, and setting conditional rendering

A very useful feature of Form io is the ability to create a new component that can later be used in form design by extending the base class of a similar component, perhaps by first modifying the existing component’s default settings You can define custom logic by modifying the base class’s methods or by creating a new method To define a component it’s very important to understand the methods you can use Form io provides a useful page on custom components if you’d like more information

In our project we knew the client wanted a component that would convert a comma-separated list into what was essentially a group of checkboxes, as shown in this example: Once completed, this custom component could then be combined with other components, such as toggle switches, a text box, and another instance of the custom checkbox component, to allow patients to explain their reasons for the appointment and describe their symptoms:

Coding the Custom Component

Every custom component should be derived from the base class most similar in behavior to that of the component you wish to create You can then extend the component by using the Form io renderer (See a list of all of these components and their classes and Form io’s instructions for extending components ) In this case we started by defining our list component (called “List”): Although Form io offers extensive configuration options, we first reduced our tabs and fields to a minimum so we could more easily create our custom component We then specified the meta settings for the Form io component, including data validation and the use of custom options to allow multiple selections and comma-separated values: Once we created our custom component we registered it with the particular formio js package we used—in this case the angular-formio package: So we’ve seen how doctors and clinic staff can create their own forms, and how the AOT Technologies team customized components to use in such forms Next we’ll look at how the app lets doctors and clinic staff edit and view these forms

Step 2: List, Display, and Edit Forms

From a list of questionnaires already created staff can choose which ones to publish using an on/off radio-button interface They can also view each form from the patient’s perspective by clicking the view button (displayed as an eye icon) If changes are needed, the staff member can click an edit button to bring up the Form Builder UI Here’s a list of available questionnaires with the diabetes questionnaire previewed on the right-hand side of the screen: The process to edit a questionnaire is essentially the same as the process for creating a questionnaire, and uses the same interfaces, except that the initial view shows not the default design but the previously saved design Here we see the current design of a diabetes form ready to be modified: