# ✍️ Submission & 🖍️ Annotation System — Built with Google Apps Script **URL:** \ **Category:** Project Showcase\ **Tags:** data-sync, actions\ **Created:** [June 10, 2025, 11:23am UTC](https://community.glideapps.com/t/submission-annotation-system-built-with-google-apps-script/82370 "2025-06-10T11:23:37Z")\ **Posts on this page:** 5\ **Page:** 1
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [June 10, 2025, 11:23am UTC](https://community.glideapps.com/t/submission-annotation-system-built-with-google-apps-script/82370/1 "2025-06-10T11:23:37Z")
**A while ago** , I shared a basic proof-of-concept for annotating images in Glide using WebView and AI components. It worked for light use cases but lacked structure and scalability. 🔗 **[Earlier post](https://community.glideapps.com/t/annotating-images-in-glide-free-draw-and-text-input/78410)** **Now** , I’m introducing a **full-featured image annotation app** built entirely with Google Apps Script. Designed to embed seamlessly into Glide via WebView, it provides a robust system to collect, review, and annotate image (and single-page PDF) submissions—powered by Google Drive. * * * ## 🚀 Key Features ### 🔧 **Tech Stack** > **View components** > > | ![Google Apps Script](https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_Apps_Script.svg) | **Google Apps Script** – Backend logic & automation | > | ![HTML5 Canvas](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/5/a55098323bc7c66b6fd1291b8528e6ace835a2be.png) | **HTML5 Canvas** – Native drawing layer for annotation | > | ![Fabric.js](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAE1ElEQVR4AcXVA5CjWRSG4X+9Y9u2bdu2bdu2bbfGttpI23YnzXDS8bvZsY2n6tQtn+9aeB3wJ9AcOApEABq+nQ6IAayATsA/wvsAuYD1QDI/jgzYDxR+X3MLwMTPcRso8qL5H8B6fr6jQAYBaA4k8vMpgf4CcJRf544AhPMWjfGnHQaF8L6r9lCczgofJRdiNXim6QmR63FN1iIy1/cOJvAesica5tvGkM0ijuyWYgpax5PtZAxlbeLwStHyOeQ6E5diNSxwl7HQLY3LkSqUOuPnBQBQazRsc40l18lIhMPRCIfM4/5w2l9PQKw28DGuqXraP5Tx96l4hIORCHtC+GdPIKNuxyLTGD4vAIBer8fKN55Sp0IRDoSbA4Tx294Qht8TI9UYeZ+bYh0lL6dQ+EwEwy77s+SWL92svPl3qxf/bHDH0ifl8wM8ZTJiG55IQ8ugpzMRdgfzx65ARt6NJ+mtlbiRYG5+KZluV8KwD4pGqVBg0GpITk1jhI05xDJHFt+M+IwA7xEiTmXIpUD+2e2PsN2f37b50uVSJAEpGgBuiHWUu5zEjAcRJKbKeNsVXwkFF9uy/U741wUAkCpUbH4UQpG93gibzbXRkypHAljmmESVyxKW2UeheqLmfU7ax1J/6SNEoUlfFkBvNKFINyBT61HrjOh1OuxD4uhu4UWWze78sVbEn2vcKLHDgwveYlTvOenuEVK6r3Ngg40nOv1nHkKJVIOFXSxTjvvQfaeI9jtEdD3gxYRzIRxyFZtDSJh8I5hsO3zItdaZjMudKLDGmc6HfVh+PZxjDnGcNteq80F0Wm3LoqNOJEsVn3cN7QNSGLTVmR5rHzBxny0TDtrRc4ctVdc8JvtSOzIvd6T0gQCKnJPQ90oYZ+z8GXfKhQab7Si3/BFlFz2k+uIHNF92n6FbHnH6jg9SufLzHiJRWBpd19ix3lpERKwYpVJhLiVJKal4BEex/YYn5fd6IhyJ5bfdIeTf5cOch7EEiaVEx0tw9A3nlksQ992C8A6KIiVNislo/LyXUJmuZ/gBT8YfckP5JJ33eRyvotyFBFqeC6XQdhHCBk9+2+xNbYtwrkepMJq+4Sl2DJNSapk9O22j3988UUflaymMexRPYpqcq16R1DrshbDVB2GbHzkOBLPcNQWZ1vh1AU6JJGRe5si4a5HoTbykNcKZyPSnj8yQuzEkyVU8hQmfmCTaWPgh7AxA2B3EH3tD6HNHTJhc/+UBLgemknG9iGw7fVnklMTDeDUXotUMtpeS3VrCqHvRSGRK3hYiSaOVVSDCnmCEfaFP/4x6lxJwStJ+WYA0tY7e54P5bZvf02f37yNR/HEijjwWsSx3iCFNoeJDfOJSqXEm+Gnzpx/XoShKnUvgYkw6pi/5juOlKlY/CKG1dQCNbEKYcDeCx+EStFotn3IzWEK+42EIhyP561gUvx2LIZe1hH2h6ehMHw6g4y0GvZ40mZxkqRydufHnMhgMHHGPYdWDYI66hLLHMZRZd0PofSOCy9GqDwaI5jsyGvSYzIXJBCbj098wJU2GWKZ631aoBcCSX8dOADoBUn6+dGC0APwD7OPnOw9kE/4HFAZu8fO4AOWF1wFFgKOAih9HA1x42vx9gIxAP+AuoPzO+20PjAayCa/5D3Kjchl473PiAAAAAElFTkSuQmCC) | **Fabric.js** – Drawing & annotation canvas | > | ![Tailwind CSS](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/b/ab5d4cbb821f21fd9ce6b6aef5b61d104d50d8e5.png) | **Tailwind CSS** – Responsive design | > | ![Google Drive](https://www.vectorlogo.zone/logos/google_drive/google_drive-icon.svg) | **Google Drive** – Centralized storage | ### 🔐 **Authentication & Workflow** - **Session-based authentication** – Uses `userID` and `userName`, with role-based access (`Admin`, `Reviewer`, `Uploader`). - **User whitelist** – Access is validated against the `"Registered Users"` sheet. - **Real-time sync** – Collaborators are notified when edits are saved. - **Multilanguage support** – Built-in translator for UI and content. ### 🎨 **Annotation Tools** - Freehand drawing, shapes (lines, arrows, rectangles, circles). - Text labels, magnifier, color/size adjustments. - Dark mode, export (download/print), and sharing. ### 📂 **File Management** - Supports **images** and **single-page PDFs** (auto-converted to images). - Organized Drive folders: 1. Uploads 2. Annotations 3. Final exports 4. User photos ### 🛠 **Admin Controls** - Toggle features via app or connected Google Sheet. - Set deadlines with date pickers. - **Roles** : Admin (full access), Reviewer (annotate/view), Uploader (own files). * * * ### 🏆 **Use Cases** **How Glide community can leverage this tool:** - **Field Surveyors** : Mark issues directly on-site photos for inspections or audits - **Education** : Grade image-based assignments with direct markup - **Healthcare** : Discuss medical scans with precise annotation tools - **Business** : Streamline design approvals from stakeholders * * * ## 📷 Preview #### Submission Manager ![CRUD Submission Manager Interface](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/5/954786ba586301b1fa4a84852135fd4f9b5c8d13.png) A clean role-based submission interface with full CRUD support. * * * #### Accordion Table ![Expandable CRUD Panel](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/2/82d83e46d77e5c4d1bb3cb891115205ada198891.jpeg) Expandable accordion with integrated image preview. Currently optimizing layout flow and transition performance. * * * #### Admin Panel ![System Overview & Access Control Panel](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/a/ba76d4b8fb9c760aacdb17473348e7a688073c65.jpeg) Centralized control for deadlines and user permissions * * * #### Annotation Canvas ![Annotation Canvas](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/a/7a9d26569063dd0f30b1219d905802803c59d5b4.jpeg) Real-time markup tools with draggable toolbar * * * #### Feature Control Panel ![Control Panel for Adjustable Features](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/e/4ee11f7bd8753330585ba6651e66267312307dbf.jpeg) Toggle annotation features per project requirements * * * ## 🔗 Try It Out Embed in Glide via **WebView** , or open directly: ### 👉 [Scrawlify Live Demo](https://script.google.com/macros/s/AKfycbwCXbydNkNjXZCWRcu-11vgOX6PpjTuDztXgU7okuqKUdrethhbB_j12d7gQZkYIXUO/exec) * * * ## 📌 Summary A **no-host-required** annotation solution for Glide, combining: ✔ Clean UI ✔ Role-based collaboration ✔ Native Drive integration ✔ Real-time sync _❗ Still collecting feedback for WebView performance—feel free to test and share thoughts!_ ---
**Author:** ![Mazen](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mazen/32/84042_2.png) [@Mazen](https://community.glideapps.com/u/Mazen)\ **Post date:** [June 10, 2025, 6:26pm UTC](https://community.glideapps.com/t/submission-annotation-system-built-with-google-apps-script/82370/2 "2025-06-10T18:26:20Z")
Wow that’s cool!. ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [June 10, 2025, 6:52pm UTC](https://community.glideapps.com/t/submission-annotation-system-built-with-google-apps-script/82370/3 "2025-06-10T18:52:36Z")
Thanks! Have you tried embedding it inside a webview element? You just need to paste the URL into the component. You might need a bit of custom CSS to make the iframe go full-screen. ---
**Author:** ![Mazen](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mazen/32/84042_2.png) [@Mazen](https://community.glideapps.com/u/Mazen)\ **Post date:** [June 10, 2025, 7:48pm UTC](https://community.glideapps.com/t/submission-annotation-system-built-with-google-apps-script/82370/4 "2025-06-10T19:48:02Z")
I did actually and it looks amazing, no need for the custom CSS ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/2/129ffcd9ff5510b5a715966f285a9535f27a0c01.jpeg) here’s the mobile view, which isn’t that good, too big for the small screen. ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/7/c7068c01a46d3e9305aaa794eed3ed9f937496b2.png) ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [June 11, 2025, 7:34am UTC](https://community.glideapps.com/t/submission-annotation-system-built-with-google-apps-script/82370/5 "2025-06-11T07:34:51Z")
> [@Mazen](#): > > here’s the mobile view, which isn’t that good, too big for the small screen. It seems that Glide has a global scaling setting for mobile view. Unfortunately, I can’t check it right now. If you open it directly through a browser, it might look like this: ![WhatsApp Image 2025-06-11 at 14.30.47](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/b/bbb26f166c2b6643f4a6d578cae5ea25b02a92a2.jpeg)