Using Bahmni Form-Controls

mogoodrich · July 12, 2018, 7:42pm

@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:

github.com

PIH/openmrs-pwa-workflow/blob/master/src/screening/bloodPressure/BloodPressureForm.jsx

import React from "react";
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import BahmniForm from '../../bahmniform/BahmniForm';
import { ENCOUNTER_TYPES, CONCEPTS } from "../../constants";

let BloodPressureForm = props => {

  const formDetails = {

    "name": "Blood Pressure Form",
    "id": 2,
    "uuid": "b57712e7-f89b-43a4-8a27-3a626e0785ba",
    "defaultLocale": "en",
    "controls": [{
      "translationKey": "LABEL_1",
      "type": "label",
      "value": "Blood Pressure Form",
      "properties": { "location": { "column": 0, "row": 0 } },
      "id": "1"

This file has been truncated. show original

It extends this base component:

github.com

PIH/openmrs-pwa-workflow/blob/master/src/form/Form.jsx

import React from 'react';
import PropTypes from 'prop-types';
import { Button, Label } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import { push } from 'connected-react-router';
import { connect } from 'react-redux';
import { OpenMRSForm } from '@openmrs/react-components';
import { actions as toastrActions } from 'react-redux-toastr';

let Form = (props) => {

  // https://github.com/diegoddox/react-redux-toastr
  const formSubmittedActionCreators = [
    () => toastrActions.add({ title: "Data Saved", type: "success" }),
    () => push(props.afterSubmitLink)
  ];


  return (
    <div>

This file has been truncated. show original

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