GSoC Journey: Week 03 of Coding Period
Hello folks,
Myself Senthil Athiban, a final year undergraduate student at Madras Institute of Technology. This blog represents a continuous series documenting my journey through GSoC. If you haven’t already read my previous blogs, I encourage you to check out my previous blogs here. I have been selected as a GSoC student at OpenMRS for the Validation Rule Builder for the Form Builder project. My primary mentor is Dennis Kigen, and my backup mentor is Hadijah Kyampeire.
Week 3: June 10 — June 15
This week, I focused on two main tasks:
- Developing user-friendly documentation for the validation rule builder.
- Creating a custom combo box component and developing a validation feature for disallowing future dates and decimal values in form fields.
Mentor Reviews
On June 10, 2024, I shared my progress with my mentor during our coffee break call. I demonstrated the documentation, which my mentor advised me to develop simultaneously with the feature, and discussed some blockers I was facing, along with my proposed solutions. The primary challenge was resolving the combo box component, crucial for the rule builder. The combo box needed to accept user input either by selecting a value from the dropdown or manually typing a value not present in the list. Utilizing the Carbon React design system, I found that the provided combo box component lacked the onInputChange functionality. After researching, I decided to develop a custom combo box component. My mentor acknowledged the complexity of my proposed solution and advised proceeding with it only if no simpler alternatives were available. He ended with positive feedback, encouraging me to keep up the good work.
Tasks Completed
- Documentation: I developed user-friendly documentation for the validation rule builder feature of the React Form Engine on our OpenMRS Wiki page, including code snippets and recordings.
- Custom Combo Box Component: I created the custom combo box component by combining the text-input box of the Carbon React design system with a dropdown select option, styled with custom CSS to match the design of the Carbon React dropdown component.
- Toggle Features: I developed a feature to allow or disallow future dates in date-form fields and disallow decimal values in number-based form fields.
Challenges Faced
Developing the Custom Combo Box Component:
My mentor highlighted the complexity of building a custom combo box aligned with the Carbon React design system. Designing the combo box to match the Carbon React system was tedious. I had to combine the text-input component with dropdown select options and implement features like onBlur, onChange, onFocus, and a debounced mechanism.
Lessons Learned
Writing User-Friendly Documentation:
This was my first time contributing documentation to an open-source project. With no prior experience, I aimed to create clear and understandable documentation for users. I approached it by imagining myself as a user with no knowledge of the feature, addressing questions like what the feature is, why it’s needed, how to use it, and how it simplifies tasks. This approach helped me create a template that included a feature overview, real-world examples, tutorial videos, user-friendly explanations, and code snippets. The positive feedback from my backup mentor confirmed the effectiveness of this method.
Developing a Custom Combo Box:
Initially, I struggled to implement a solution that met all requirements. After extensive research and multiple attempts, I developed a custom combo box that handled dynamic data, supported user input, and integrated seamlessly with the existing UI. This experience taught me that while the learning curve was steep, the actual implementation was more straightforward than anticipated.
Plans for Next Week
Implement Changes Based on Mentor Reviews: I will carefully review and incorporate the feedback provided by my mentor on my recent pull request.
Schema Integration: Next week will be crucial as I have to tackle one of the harder parts of my GSoC journey — developing a custom validation feature and integrating it into the schema. This will enable users to create custom validations for forms using the GUI.
About Me
I’m Senthil Athiban, a final-year undergrad from India. Days are for VS Code, nights for GitHub — a constant journey of coding and exploration, fueled by passion and curiosity.
GitHub: https://github.com/senthil-k8s
LinkedIn: https://www.linkedin.com/in/senthil-athiban-m/
Twitter: https://twitter.com/senthil_k8s
