Streamlining Pharmacy Module UX in App Studio

Help
1

We’re working on an open source healthcare project designed specifically for non-profit and humanitarian work, providing vital services through charitable portable hospitals and medical caravans. This initiative was started by dedicated faculty of medicine students, who are still the main driving force behind its success, while also receiving valuable support from various organizations. We’re excited to announce that when completed, this project will be released open source for other non-profit and humanitarian healthcare efforts, so stay tuned!

To implement the pharmacy module, we use two main collections:

Medicines

  • code

  • name

  • type

  • quantity (disabled field in the app)

Pharmacy Pickup

  • type (in/out)

  • medicines

Each pickup (representing, for example, a patient prescription) can include multiple medicines with their respective quantities. Instead of a direct many-to-many relationship, we use an intermediate collection named Medicines_Prescribed:

  • Medicines_id (M2O to medicines)

  • Pharmacy_Pickup_id (M2O to pharmacy pickup)

  • quantity

A flow updates the stock in real-time as medicines are added or removed.

UX Issue: Too Many Clicks for Prescribing Medicines

Currently, users must:

  1. Click the add button for medicines

    1
    1597×198 4.88 KB

  2. Click “select an item”

    2
    2690×327 12 KB

  3. Search and select a medicine from the list

    3
    3693×400 19.4 KB

  4. Confirm selection with the “check” button

  5. Adjust the default quantity (usually 1, but users may edit)

  6. Press another “check”

  7. Repeat for each additional medicine (often 10 per patient)

This multi-step process is time-consuming, particularly given the typical prescription size.

To improve our workflow and user experience, I’m seeking advice from the community:

  • Has anyone implemented a more efficient workflow or batch-editing in Directus for similar use cases?

  • Has anyone built custom forms or extensions that allow entering multiple medicines (and their quantities) at once, perhaps using a single modal or inline table?

Extra question: Barcode Scanner Integration

Additionally, we’re keen to integrate a physical barcode scanner (the type found in supermarkets and pharmacies). Has anyone set up such a scanner with Directus App Studio to allow instant barcode entry after scanning. Any tips, best practices would be greatly appreciated!

2

Thanks to @Nik, I was able to build an interface extension that greatly simplifies the process. I implemented automatic detection of keystrokes specifically those triggered by the scanner or paste actions along with a a search field by name or barcode as well after that we storeed the data as an array of JSON objects containing:

  • medicine_id
  • quantity

This improvement led me to refactor the stock calculation flow to better align with the new approach. It feels like a more efficient and scalable solution for now.

Appreciate the help, thanks again!