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.
Comments
Post a Comment