This abstract has been accepted at the 2024 DHIS2 Annual Conference
Autogen Forms: Quick and Easy Creation of Custom React-based DHIS2 Data Entry Forms
Autogen Forms tool is a powerful solution designed for the swift and uncomplicated creation of custom React-based DHIS2 Data Entry forms. Aimed at enhancing user experience, the tool seamlessly integrates with the standard data entry app, offering a streamlined approach to form development. Utilizing React, the tool leverages material UI components, ensuring an aesthetically pleasing and user-friendly interface. Its main versatility lies in its ability to generate a HTML code that can be pasted directly into the “source” option of the “Design data entry form” data set functionality and then make any changes by saving values to the datastore. The configuration process is simple and potent, offering various view modes such as grids, tables, multiple sections with tab-based navigation, and the flexibility for more intricate custom views like period views. One notable feature is the ability to display data set categories in a table format, facilitating easy and efficient data input. The tool also incorporates functionality for implementing simple rules stored in the data store. These rules enable showing or hiding specific components based on user input and providing some user interaction similar to some uses of program rules in Tracker or Event Program. The upcoming release will include parsing of validation rules, and a notification system for failing rules bridging native DHIS2 validation rules with Autogen Forms interface. All configuration information is stored on the datastore in JSON format but to streamline the user experience, we provide a dedicated DHIS2 app for editing autogen forms options. This app not only facilitates the creation of entries in the data store but also incorporates autocomplete and validation features for ease of use. Once the data set data entry form is set to the exported react html code all configuration can be done through this app or directly in the data store. Is it also possible to use Autogen Forms as a part of a react app to display Tracker Program and Event Program forms. EST and WHO’s MAL EPI have used Autogen forms successfully to display multiple forms of the Malaria Epidemiology program used by close to a hundred countries in the world to report Malaria aggregated data. Autogen Forms is already a very potent tool to supplement DHIS2 Data Entry forms while using native DHIS2 functionality and it has a great potential to grow from that.
Primary Author: Miquel Adell Borràs
Keywords:
Data Entry, Data Sets, React, Validation Rules, Custom data entry form, Material UI
Very interesting! We created a similar tool for the PEPFAR instance of DHIS2 that we use for HTML data entry form creation in the native app. I would love to learn more about your react-based approach
We would also love to know more about the tool you developed.
By default, our current solution reads metadata from the dataset and displays it in a tabular configuration not so different to how the default data entry tables are presented.
The power of the tool really comes from the ability to use a custom datastore configuration to display different types of sections, to hide some data elements, or even provide some rules like toggling visibility for some elements based on others.
This is detailed a bit more in our wiki:
@ifoche would be at the DHIS2 conference so please come and say hi if you’ll also be attending and he will be able to explain more.