O3 Request: Embedding "Attachments Widget" with Diagram Annotation Functionality in Forms

Hello OpenMRS community!

We are excited to propose an enhancement for the OpenMRS O3 framework that involves embedding the “Attachments Widget” within forms and incorporating diagram annotation functionality. Our goal is to empower users to annotate diagrams directly within forms, providing a comprehensive solution for capturing and managing complex observations.

Attachments Widget:

The Attachments Widget is a valuable component already existing within the OpenMRS ecosystem. It allows users to display and upload attachments associated with a patient. We aim to extend this widget’s capabilities by incorporating diagram annotation functionality, thus enhancing the functionality of forms.


The current form engines in O3 (Ampath Forms and OHRI Forms) focus primarily on capturing observational data but lack the ability to embed and annotate diagrams. By enabling the embedding of the Attachments Widget and incorporating diagram annotation functionality, we address this gap and provide a more comprehensive solution. This enhancement will benefit both form builders and form fillers, improving data capture and user experience.

Requirements for Embedding the Attachments Widget:

Embeddable Widget: We need a new form control that enables the embedding of diagrams and includes an annotation button. Diagram Annotation Functionality: Upon clicking the annotation button, users should be directed to an external application capable of annotating images. Complex Observation Submission: The annotated diagram should be submitted as a complex observation, replacing the original diagram.

Technical Flow:

  1. Embedding the Diagram: The custom control allows the embedding of a diagram within a form, providing a visual representation of the observation.
  2. Annotation Button: Users can click the annotation button to launch an external application specifically designed for image annotation.
  3. Annotating the Diagram: Within the external application, users have access to annotation tools to mark up and annotate the diagram as needed.
  4. Saving Annotated Image: Once the annotations are made, users can save the annotated image through the external application, replacing the original diagram.
  5. Complex Observation Submission: The annotated diagram is submitted as a complex observation within the form, ensuring the persistence of the annotated image.


Seamless Integration: By embedding the Attachments Widget within forms, users can conveniently manage diagrams without the need for separate applications or modules.

Enhanced Data Capture: The diagram annotation functionality allows for precise and visual representation of complex observations, improving data accuracy.

Improved User Experience: Users benefit from a unified interface for attaching files, annotating diagrams, and submitting complex observations, streamlining their workflow.

Technical Details:

Widget Repository: [link to the Attachments Widget GitHub repository]

Annotation Application: A suitable external application capable of diagram annotation, such as React Image Annotate or an alternative frontend library like the OHIF viewer a powerful complete image viewing and annotation Library. it could be run as a standalone service or an embedded React library.

Next Steps:

We kindly request feedback and guidance from the community administrators and developers regarding the technical feasibility and potential roadmap for embedding the Attachments Widget with Diagram Annotation functionality within forms. Your expertise and insights will be invaluable in shaping the implementation of this feature.


  1. Seeking Clarity and Guidance for Implementing the Unique o3-Draw-on-body-diagram app in OpenMRS 3.x

  2. O3 Feature: Draw on a body diagram

  3. GSoC 2023: O3: Draw on a body diagram - Resources - OpenMRS Wiki

  4. Slack

Let’s continue to collaborate to make OpenMRS forms more versatile and intuitive!

Thank you for your attention and support.

cc//@heshan @jayasanka @dennis @bistenes, @jdick, @mksd, @dkibet, @mayanja, @eudson, @grace @achachiez @samuel34 @ibacher @burke @mogoodrich @jesplana @dkayiwa @mozzy

Issue filed: [O3-2210] Create a new form control for embedding diagrams - OpenMRS Issues

PR: O3-2210:Create a new form control for embedding diagrams by jona42-ui · Pull Request #1 · enyachoke/afe-ref-custom-components · GitHub

serving the custom component at: http://localhost:8000

Need to update the proxy configuration file in the openmrs-ngx-formentry repository to specify the target URL for serving the custom component. I believe after setting up the serving of custom components, I can use them in the form definitions.

Any thoughts here??