Gsoc 2024 : Validation rule builder for the form builder
- Christopher Lumu
- senthilathiban
Primary mentor | @Dennis Kigen |
Backup mentor | @Hadijah Kyampeire |
Assigned to | @senthilathiban |
Abstract
The form engine and builder currently support JavaScript expression-based validation. However, this can be challenging when creating complex validations and may potentially lead to errors. In most cases, form creation is done by BAs who may not have experience with writing JavaScript expressions. The proposed solution is to introduce a UI-based validation rule builder to the form builder, something similar to https://tally.so/help/conditional-form-logic
Project Overview
Primary Goal:
Develop a user-friendly rule builder integrated with a form builder.
Purpose:
Help users create conditional logic for forms, streamlining workflow and enhancing form functionality.
Target Users:
• Beneficial for users with no experience in writing JavaScript expressions.
• Users who need to create dynamic, responsive forms.
Key Features:
• Provides an intuitive, graphical interface.
• Supports building complex form rules.
Main Advantage:
Simplifies the process of adding conditional logic without requiring manual coding.
Project Objective
Reduce Manual Effort:
Eliminate the need for users to manually write JavaScript expressions for form logic.
Provide a streamlined, automated approach to building conditional logic for forms.
Empower Users:
Allow users with minimal technical knowledge to create complex form rules.
Offer a user-friendly, graphical interface that simplifies the process of adding conditional logic.
Key Features:
Pre-Built Conditions:
Provide a library of common conditions that users can select and customize to fit their needs.
Real-Time Validation:
Ensure that the logic being created is valid and functional as users build it, preventing errors and saving time.
Goals:
Enhance User Productivity:
Speed up the process of creating dynamic forms, allowing users to focus on other tasks.
Reduce Errors:
Minimize mistakes by providing real-time feedback and pre-built components, ensuring that the form logic works as intended.
Increase Efficiency:
Make the form-building process more efficient by providing tools that simplify the creation of complex rules.
Improve User Experience:
Offer a seamless and intuitive interface that makes the form-building process enjoyable and accessible for all users.
Required Skills
React,
TypeScript
Project Rating and Length
Medium
175 hours
Weekly Meeting Notes:
Meeting 01:
Participants: @Dennis Kigen, @Hadijah Kyampeire
Key Notes:
We discussed the UI/UX design of the rule builder and the optimal placement of the rule builder within the form builder.
Dennis advised me to attend the UI/UX team call to get feedback from the UI/UX team.
Cleared technical doubts regarding the project, such as real-time schema changes.
Meeting 02:
Participants: @Dennis Kigen
Key Notes:
Shared the week 01 progress with the mentors, and a demo of adding multiple conditional logic for the same form field
Dennis advised me to start writing documentation for the validation rule builder
Meeting 03:
Participants: @Dennis Kigen
Key Notes:
Shared the week 02 progress with the mentors, and blockers.
Asked my primary mentor to review the documentation.
Shared the proposed solution for the blockers.
Meeting 04:
Participants: @Dennis Kigen
Key Notes:
Shared week 03 progress with the mentors.
My mentor asked me to go through some sample schemas for additional helper functions and logic to integrate into validation rule builder
Asked my mentor to review the PR.
Meeting 06:
Participants: @Dennis Kigen
Key Notes:
Shared the GSoC work update.
My mentor reviewed my PR, suggested some minor changes.
Weekly Blog Posts
Resources
Proposal: https://drive.google.com/file/d/1RxJ3Y9U1zlrQ5m0q7j3CULiaWWwUioOd/view
Figma Design: https://www.figma.com/design/ugQiiRmK3gIJxvcR0c3CWn/Untitled?node-id=0-1&t=xiP39ef7X0LYpkKr-0
Talk Thread: https://talk.openmrs.org/t/gsoc-2024-validation-rule-builder-for-the-form-builder-progress-update/42683/5
Ampath Form: https://ampath-forms.vercel.app/docs/validation/js-expression-based-validation
Project's Repo:
Form-builder: https://github.com/openmrs/openmrs-esm-form-builder
Validation Rule Builder UI Code Workflow:
