Recently, a dentist reached out to us with the need to modernize his digital workflow for recording odontograms. His previous software was rigid, unintuitive, and didn’t integrate with his patient management system built on Airtable. The challenge was clear: to create a robust, user-friendly, and extensible solution that respected his existing habits and integrated seamlessly with his current tools, including Softr.io.
Understanding the challenge
Our client, an active dentist, relied on digital odontograms for his daily practice but was frustrated by the limitations of his old software. His main requirements were:
- A familiar and intuitive interface
- Precise dental surface-level recording (based on FDI)
- Per-tooth notes and a dual-layer annotation system (existing and required)
- Simple export and direct integration with Airtable and Softr.io
We held several meetings to observe his workflow, identify pain points, and ensure the new app fit naturally into his daily routine without a learning curve.
Scope and integration context
It’s worth noting that the integration with Softr.io (a no-code platform for building frontends on top of Airtable) was already planned and managed by the client.
Our responsibility was solely to design and implement the odontogram web application, ensuring it could export and upload both images and structured data to Airtable, where Softr.io would handle visualization and record management.
What is FDI and why does it matter?
FDI stands for Fédération Dentaire Internationale (World Dental Federation). It’s a universal two-digit dental numbering system that identifies each tooth and its quadrant. This standard allows dental findings to be recorded and communicated accurately and internationally, improving interoperability among professionals and systems.
Technologies used
This project combined a complete and modern web stack:
- JavaScript (ES6+) – Core application logic, event handling, and data processing.
- jQuery – DOM manipulation, event delegation, and odontogram plugin integration.
- HTML5 Canvas – Odontogram rendering and generation of high-resolution PNG reports.
- CSS3 – Responsive styles and professional clinical design.
- jQuery Odontogram Plugin – Interactive odontogram engine (Adhiana46/jquery-odontogram), extended for our needs.
- JSON – Data structure for export and backend integration.
- Node.js & Express – Backend API to receive and store PNG/JSON files.
- Cloudinary API – Secure, scalable image upload and storage.
- Airtable API – Attaching images and structured data to patient records.
- Softr.io – No-code platform used by the client to build the frontend on Airtable and manage patient data.
- Browser APIs – File handling, image generation, and client-side processing.
FDI anatomical mapping: clinical precision
One of the main technical challenges was implementing FDI-based anatomical mapping. In dentistry, the same position on the canvas (e.g., “left”) can represent “mesial” or “distal” depending on the tooth quadrant.
We developed a system that translates canvas positions (top, bottom, left, right, center) into actual anatomical surfaces (buccal, palatal/lingual, mesial, distal, occlusal/incisal) according to the FDI quadrant—ensuring clinical accuracy and clear communication.
Dual-layer annotation: mirroring real clinical practice
The app supports two annotation layers:
- Pre-existing (red): Conditions or treatments already present
- Required (blue): Treatments to be performed
The dentist can switch between layers with a single click, and all annotations are color-coded for instant recognition—replicating real-world clinical workflows.
Per-tooth notes: simple clinical documentation
Each tooth allows adding specific notes, with auto-save and manual save/delete options. These notes are included in both the JSON export and the PNG report, ensuring complete clinical documentation.
Data export: structured JSON and professional PNG reports
- JSON Export: The app exports all odontogram data in a structured format, including date, patient name, annotated teeth, conditions, treatments, and notes.
- PNG Export: Generates a professional A4 report containing the odontogram, treatments, notes, patient name, and timestamp. The layout is optimized for clarity and clinical use.
Integration with Cloudinary and Airtable: frictionless workflow
A key aspect was integrating with Cloudinary and Airtable:
- When a PNG report is generated, the image is uploaded to Cloudinary via its API, ensuring secure and scalable storage.
- The backend (Node.js/Express) attaches the Cloudinary image URL and the structured JSON data to the corresponding patient record in Airtable using the Airtable API.
- As a result, all odontogram images and notes become instantly available within the patient’s record.
Softr.io: no-code frontend for the professional
The client already used Softr.io to build a no-code frontend on top of Airtable. This allows him to manage patient data, visualize odontogram images and notes, and interact with the system without technical barriers. Our app integrates seamlessly into this workflow, ensuring everything appears automatically in his Softr.io dashboard.
Maintaining familiarity: respecting user habits
Throughout development, we regularly shared progress with the dentist to ensure the app remained familiar and easy to use. We preserved his existing flow for selecting and annotating treatments while adding modern enhancements like auto-saving notes, color-coded layers, and professional document generation.
Lessons learned
- User-centered design is essential: Frequent feedback from the dentist kept the project aligned and ensured adoption.
- Innovate without losing familiarity: New features are valuable only if they remain usable for non-technical users.
- Integration is key: Adapting to the client’s existing tools (Airtable + Softr.io) made the app truly enhance productivity.
- Open source accelerates development: Building on a solid open-source foundation let us focus on real client needs.
Conclusion
The result is a modern, lightweight odontogram web application—powerful yet accessible. By listening to the client and leveraging a complete tech stack (JavaScript, jQuery, HTML5 Canvas, CSS3, Node.js, Express, Cloudinary API, Airtable API, Softr.io), we delivered a tool that integrates seamlessly into the dentist’s daily workflow, making clinical documentation faster, more accurate, and easier to manage.
Source code
Project repository:
https://github.com/zendev2112/odontograma
Open-source base:
https://github.com/Adhiana46/jquery-odontogram
Technologies used:
JavaScript (ES6+), jQuery, HTML5 Canvas, CSS3, jQuery Odontogram Plugin, JSON, Node.js, Express, Cloudinary API, Airtable API, Softr.io, Browser APIs.
If you’re building for real users, remember: listen first, then code!
Top comments (0)