Using Bahmni Form-Controls

Software Bahmni
1

Hello all–

We are currently working on building a progressive web app (in React) that we intend to use to collect data POC on tablet devices as part of our PIH EMR distribution.

For data collection, we are going to React components to support collecting and viewing Obs, etc, and I looking around to see what had already been built and @darius pointed me to the bahmni-form-controls repo:

A couple questions:

Are these form controls meant to be used “stand alone” or are they only meant to be used in conjunction within the context of the Form Designer and a form renderer?

Just as I test, I was going to try use the component within our own code, but immediately ran into a error when I attempted to import the component into a file in our project. Specifically, after adding:

import { ObsControl } from “bahmni-form-controls”;

I’m seeing the error below… (I tried adding PropTypes as a dependency, because the underlying error was that PropTypes was not defined, but that didn’t solve the issue).

Any thoughts? Is this a route I should bother exploring at all?

Row.jsx:99 Uncaught TypeError: Cannot read property ‘bool’ of undefined at eval (Row.jsx:99) at Object. (bundle.js:71333) at webpack_require (bundle.js:71276) at eval (controlsParser.js:20) at Object. (bundle.js:71327) at webpack_require (bundle.js:71276) at eval (Container.jsx:16) at Object. (bundle.js:71315) at webpack_require (bundle.js:71276) at eval (index.jsx:8) at Object. (bundle.js:71309) at webpack_require (bundle.js:71276) at eval (multi_bundle:1) at Object. (bundle.js:71303) at webpack_require (bundle.js:71276) at bundle.js:71296 at bundle.js:71299 at webpackUniversalModuleDefinition (bundle.js:71249) at Object…/node_modules/bahmni-form-controls/dist/bundle.js (bundle.js:71256) at webpack_require (bundle.js:679) at fn (bundle.js:89) at Object…/src/components/pages/HomePage.jsx (bundle.js:132089) at webpack_require (bundle.js:679) at fn (bundle.js:89) at Object. (bundle.js:132007) at Object…/src/App.js (bundle.js:132074) at webpack_require (bundle.js:679) at fn (bundle.js:89) at Object…/src/index.js (bundle.js:132183) at webpack_require (bundle.js:679) at fn (bundle.js:89) at Object.0 (bundle.js:132467) at webpack_require (bundle.js:679) at …/…/contrib/reactcomponents/lib/actions/types.js.Object.defineProperty.value (bundle.js:725) at bundle.js:728

Take care, Mark

1 Like
2

Mark, Form 2.0 (Form controls) is our ongoing effort towards UI rearchitecture of Bahmni Apps. Our ideas for form

  1. Composed of independent and pluggable controls.

  2. A definition consisting of the controls (in order and layout in a grid) that can be expressed in a json format.

  3. of scripts that can be written to respond to an event. No skip logic! View relevant logic (minimal) can be coded in javascript. Forms do not mix up the data, view and logic! Strictly for view and pluggable scripts for logic!

  4. Form that can be versioned, fetched as a whole with all metadata (to reduce number of calls to the server)

  5. Form that is super fast to render!

  6. Visual designer for the implementers.

There are several things that we wished for

  1. Control - independent and sharable. must have a descriptor (properties and events). each control handles its own data and provides 2 basic apis (getData and setData). The control works over its data structure that would need to be documented. For transformation from other data structures (if different), a mapper can be registered. The controls that we have are all observation controls but it is not limited to obs. Right now, the data aware controls are all obs control but there are label controls or section controls (for visual grouping). The idea is that you do whatever you would want, as long as you support the basic apis. For example - a composite control which may return a obs tree (or not). or a control that returns a visit attribute. In future, we would like to have a diagnosis control, adverse reaction control etc etc.

  2. Form is the container - holds everything together, provides context, provides the basics for event notifications. The current usage of the form is for observations. We want to have “types” of forms! e.g. form as a purpose for intake or progress! Form has a URL that it can fetch information for and post data to! We kept the provision, although currently its works in conjunction with our abstraction for EMR api (on the frontend).

  3. Form builder - the designer part of it. You need to create a designer class for the control and register it.

So, all these are meant to be independent. Since our immediate requirements were primarily for observation forms, and progressively replace our current forms, we might not have exactly catered to all the design principles but we are not far from it. You can define a control independently, you can define (hand write) the json form definition and get it to render. If you define a designer class, then it can be plugged in the form designer as well. All these with intention to build a loosely coupled UI architecture consisting of reusable, sharable set of independent controls defined in a easy enough form definition.

Regarding your specific issue, if you can send me the bare bone code, I can try to figure out whats happening.

We would love to collaborate! Let us know how we can help.

3

Thanks @angshuonline, I will see if I can get you some bare-bones code later today… I’ll have to dig up my test, which I stashed.

To give you an broader overview of what we are thinking… we are currently building a ReactJS PWA that is designed to be somewhat stand-alone and interacts with our OpenMRS backend RESTfully. Our initial use case for this PWA is for it be used on tablets at screening stations throughout a health clinic . The two thoughts we had were:

  • Is it possible (and does it make sense) to use the form-control elements independent of an actual form/json definition? That is, if we were going to build some simple screens in React to connect a data point or two without an actual form, would using the form-control components provide any advantages?

  • If we did use the full forms, is there a path for easily rendering an existing form within our own custom PWA?

Take care, Mark

4

I think so. We already use the forms in our Connect (PWA), and we didn’t have to do anything special other than to customize store the data in localstorage if there is no connectivity! (we use a custom sync mechanism)

Regarding using just the controls, I am not sure any specific advantages unless we think of a reusable library in OpenMRS context.

  • if its only about obs Control (single obs or a set) - you should be able to use the controls and leverage the existing APIs for the controls. The control properties we might have to relook at, if you want to add additional properties. We have properties like - mandatory, abnormal, read-only, display type - as dropdown, as button, allow multiselect, allow addmore etc etc
  • one aspect might be standardization of types of control - libraries that others can use. Imagine, if we standardize on sets of controls, beyond just obs contros - e.g. chief complaints, diagnoses, allergies etc etc.
5

Sweet, thanks @angshuonline! Can you give me a pointer to where you use the forms in the Connect PWA as an example of how to leverage them?

Take care, Mark

6

Hi Mark, Please find some useful links below.

This is the API to render a form

You can follow the spec test from here

This is a directive that we use from the existing angular app (both online and Connect are on angular)

Example of how the forms are rendered (concept is observation list)

Hope these help.

Let us know if these are useable for you, or if we need to open up more or provide any extension.

7

Thanks @angshuonline! This is what I was looking for… I should be able to test this out in the next day or two… will keep you posted…

Take care, Mark

8

So @angshuonline I was able to play around with this, and I’m starting to get something sort-of working, but not quite sure if I’m close or far from really getting it working… :slight_smile:

I did the following:

  1. Imported bahmni-form-controls into our project using npm install
  2. Created a sample form using the Bahmni form design
  3. Create a sample page within our PWA that attempts to render the form

I’ve committed the sample page in a branch of our code and you can see it here:

When I do this just as-is, I get an error when I try to load the entire app… it looks like it is running into an error when it tries to import the bahmni-form-control because it can’t find “PropTypes”:

Screenshot from 2018-06-12 14-00-20
Screenshot from 2018-06-12 14-00-20985×769 107 KB

Screenshot from 2018-06-12 14-00-09
Screenshot from 2018-06-12 14-00-091056×737 78.6 KB

Interestingly, I got a little farther after I checked out the bahmni-form-controls project and linked it via “yarn link bahmni-form-controls”. In this case I think it’s compiling the bahmni-form-controls into our bundled app instead of just including the bahmni-form-controls bundle separately? In this case, I actually get the form to render when I load the page:

Screenshot from 2018-06-12 16-47-48

But I’m still getting lots of exceptions when I try to enter data into the Weight field… also, I don’t know how to render a submit button…

Screenshot from 2018-06-12 16-48-49
Screenshot from 2018-06-12 16-48-491635×457 124 KB

Any thoughts? I realize I’m kind of fumbling around without really understanding what I’m doing… Hopefully my explanation makes at least a little sense… :slight_smile:

Take care, Mark

9

Hi Mark, yes. thats what we do. we build form controls, and copy/link the bundle onto our other apps (online and connect). regarding the specific form fields and submission, I can work out an example. Would you be able to wait for few days (maybe till next week)? I am completely stuck this week :frowning:

10

Thanks @angshuonline!

Yes, would love to have your help when you are free… I don’t want to bang my head against this too much in case it’s an easy fix once you look at it. I’m going to work on some simple data entry components we can use in the short-term, but definitely want to keep exploring this!

Take care, Mark

11

@mogoodrich sorry I didn’t get much time to spend this week. I tried it quickly in the evening today. I couldn’t get your project working, I was getting GRID_TYPES in ‘patientSelectedReducer.js’ as undefined when I was trying that out.

i tried taking your sample form and was able to get it rendered on bahmniapps. I will try to work out a bare bone independent example. I did notice a few things that

  1. few missing props to the container, try setting them on the

validateForm:true, locale:en, patient:{}

(although the above does not explain your error)

There is no automatic save or post. The form def can provide what URL to post to. You can get the data by calling Container getValue() method. We subsequently use the emrapi encounter transaction api to post data.

12

@angshuonline… thanks! I will see if I can take a closer look next week.

Take care, Mark

13

I missed out the most obvious part. The form controls compliancy to react is 15.4.1+, and your project is using 16.4.1+

React proptypes and few other things have changed from 15 to 16, like usage of React.PropTypes, React.createClass etc. I will try to create an older react 15.4 project dependencies and check if i can get a basic form working.

14

@mogoodrich Was able to create a simple app with react 15.4.1 dependencies and was able to add ‘bahmni-form-controls’ as dependency and able to render the form.

 "dependencies": {
    "bahmni-form-controls": "^0.91.10",
    "moment": "^2.22.2",
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-moment": "^0.7.7",
    "react-scripts": "^0.9.1"
  }

and for the container control

   <Container
          collapse={ false }
          metadata={ formDetails }
          observations={[]}
          translations={{}}
          validate={ true }
          validateForm={ true }
          locale={ "en" } 
          patient={ {} }
         />

So, I am assuming the dependencies to react ^16.4.1 is the issue. We will have to upgrade the form controls to that, which will be covered (hopefully) soon in Bahmni 0.92. Bahmni 0.91 will still come with ^15.4 compliant, but we will try to upgrade it on master soon after we are done with release 0.91

15

Thanks so much @angshuonline! The next week or so for me may be rather busy, but I will definitely be checking this out.

Take care, Mark

16

Mark, I am trying to migrate form controls to react 16.4.1. I have pushed the changes to a branch “react-16.4-upgrade” and tested locally with a react 16.4.1 app (just did local linking using – npm install … ) I could get your sample form up and running. Maybe you want to try it out. The upgrade is not complete though, but you can do a yarn build

17

Great, thanks @angshuonline, that should be very helpful. I plan to get back into the forms stuff next week, and will try out the new branch.

Take care, Mark

18

I got back to this today and got it to render without error, thanks!

I need to continue to play around with it, including figuring out how to get it to submit, I’m sure I’ll have further questions as I move forward!

Take care, Mark

19

I was able to get access to the data via the Container getValue() message and this may be all I need… but is there an example of how I provide a URL of where to post to, and what it provides?

Thanks! Mark

20

@angshuonline… more good progress… using Redux-Saga I was able to create a relatively simplify saga to RESTfully save an encounter + obs using the basic OpenMRS REST API.

You can see an example of what I did here:

Here’s an example form with the form-control JSON embedded:

It extends this base component:

And here’s the saga that handles the submit action:

https://github.com/PIH/openmrs-pwa-workflow/blob/master/src/form/formSagas.js

This is certainly still a prototype and not sure if this is the best approach, so interested in any feedback you may have!

I am going to continue to explore the code and examples, but a few other questions just in case you have quick answers for me:

  • the current application we are working on is meant to be used on tablets, so with touchscreen input; have you built any “touchscreen-friendly” forms with form-controls and are there any styles specifically geared toward touchscreens?

  • Do you use forms to edit existing observations? If so, are there any examples of this you can point me to?

  • It is possible to set up the Bahmni form builder without setting up a full Bahmni instance?

Thanks so much for your help… really cool to be able to use this library within our Ref App-based application…

Take care, Mark

1 Like