Case Study - One to Many Grid Form Design on Joget Workflow Form Builder

This post is a follow up from an earlier posting of Joget Workflow Form Builder - More than Just Workflow, in our quest to explore different kinds of form designs. Technical aspects discussed in this posting requires slight elevation of technical know-how, such as database table design and ERD (entity relationship diagram).

In this case study, we shall use the default Expenses Claims App that comes bundled by default with every Joget Workflow installation, so that this article can double as a how-to guide for everyone to try it out. Let’s begin!

When submitting a new claim, there’s a spreadsheet element to facilitate the entry of claim items.

The spreadsheet element is a grid element where it establishes a one-to-many entity relationship between the claim and claim entry entities.

Through the use of “Multirow Form Binder”, the claim form would be able to save the multirow data of spreadsheet into the “Expense Claim Entry” form table. “claim” is the foreign key that stores the parent ID.

As what we can see in the figure below, in the spreadsheet, there’s a dropdown selection for each claim item. With just 11 items in this screenshot, it’s pretty manageable. Now imagine having 100 items now. This would not be so manageable anymore isn’t it?

With some improvements made to the original “Multirow Form Binder”, we are now able to selectively load/store records based on the entry’s category. This new plugin is known as “Multirow Condition Form Binder”.

As shown in the figure above, we now have “Extra Filter Condition” at our disposal to facilitate the loading and storing of rows based on the conditions set. With this new feature, this is how we can visualize the one-to-many relationship again in an ERD diagram.

All in all, with the use of the new “Multirow Condition Form Binder” in this case, we can now create category specific spreadsheet element in the form. In the figure below, we have dedicated spreadsheet entries for Travel, Staff Welfare and General.

We can take this further by removing the category column in each of the spreadsheet element, since the category is already fixated for each of the spreadsheet element. In the figure below, we have removed the now redundant “category” column.

The plugin is now available in the Joget Marketplace. You can download it by going to this link.