The Form Designer project aims to create a versatile drag-and-drop interface builder that leverages existing web components from LibreHealth Toolkit and OpenMRS O3, enabling rapid development of healthcare forms and interfaces that interact with FHIR and LibreHealth REST APIs.
This application builds upon the existing ecosystem of web components, which provide standardized, reusable UI elements specifically designed for healthcare applications. The designer will allow healthcare organizations to create custom forms and interfaces without writing code, while maintaining compliance with healthcare data standards and workflows.
The form designer will integrate seamlessly with both FHIR-compliant systems and the LibreHealth REST API, supporting real-time data binding and form validation. The project will leverage modern web technologies to create a responsive, intuitive interface that can handle complex healthcare data structures while remaining accessible to non-technical users.
Key features of the designer will include:
- Dynamic component palette featuring all available web components from both LibreHealth Toolkit and O3
- Real-time preview of forms with live data binding capabilities
- Built-in templates for common healthcare workflows and forms
- Export functionality for created forms in standard formats
- Integration with existing authentication and authorization systems
- Support for complex validation rules and conditional logic
- Ability to save and share form templates across organizations
The deliverables of the project are as follows:
- Develop a drag-and-drop interface that supports all existing web components from LibreHealth Toolkit and O3
- Create a robust data binding system that can handle both FHIR resources and standard REST API endpoints
- Implement a template system for commonly used healthcare forms
- Build an export system that generates clean, maintainable code
- Develop comprehensive documentation and tutorials for form creation
- Create an extension system for adding custom components and validators
Preliminary tasks
- Create a prototype demonstrating basic drag-and-drop functionality with simple components
- Implement data binding with a sample FHIR resource
- Develop the core layout engine for the designer
- Create basic form templates for testing
A developer working on this project needs to have skills in:
- Modern JavaScript (ES6+) and TypeScript
- Web Components specifications and custom element creation
- Experience with drag-and-drop interfaces and layout engines
- Understanding of FHIR resources and healthcare data structures
- Knowledge of REST APIs and data binding patterns
- Familiarity with build tools and modern web development workflows
The project will significantly reduce the time and technical expertise required to create healthcare forms while ensuring standardization and interoperability across different healthcare systems. By leveraging existing web components, the designer will maintain consistency with the broader LibreHealth ecosystem while providing the flexibility needed for custom healthcare workflows.
Project Size: Large (~350 hours)
Mentors: @namratanehete and @parumenon1