@aojwang it isn’t really documented particularly well - the best documentation is really just looking at the code.
The basic principle is that there is a single page (controller + gsp) that renders a “mastercard”. A mastercard contains 2 basic constructs:
-
A single header (represented by an htmlform) that can be filled out exactly once (it may be edited, but not repeated) and is on the top of the page. This generally contains demographic details and information collected at enrollment into a program.
-
One or more flowsheets, each represented by an htmlform that renders a header row and a data row for each encounter associated with that form. Typically these forms are configured with both a “view” and an “entry” section, so that it is optimized for entry/edit and view differently as needed.
A specific flowsheet is simply an instance of the “mastercard” page with parameters passed in to specific what the header form, mastercard forms, and specified patient are.
Most of the code is in single jQuery-based javascript file that is responsible for loading, rendering, and submitting the htmlforms asynchronously, as well as doing some built-in validation. The lions share of all of this is generic, though there will be a few things in the code that is specific to our Malawi implementation, that would need to be extracted.
A few screenshots:
Entering the initial header encounter
Viewing the initial header encounter, link available to enter flowsheet encounters
Entering a flowsheet encounter
Viewing a mastercard after 2 flowsheet encounters entered
I’ve had on my wish list for a while to try to port this over to a more generic module - like htmlformentryui perhaps. It really wouldn’t be a lot of work - there are only a handful of classes and they are mostly already generic. But I just never found the time to prioritize it. Let me know if you are interested in giving it a shot! 
Best, Mike