#googlesheets #vuejs #forms #repeatableformgroups #buefy #appsscript
In today's video, I'll walk you through creating forms with repeatable form groups-think nested forms for more complex data structures. This is super handy for things like event management or, as I'll demonstrate, creating invoices with multiple items.
We'll use an Expense Entry form as an example, showcasing the repeatable feature. The form covers expense date, type, repeatable expense items with category and amount, payment methods, and notes. Dynamic computation of the sum total, conditional display of form elements, and even full form validation support are also part of the package.
But wait, there's more! In the second part of this tutorial, we'll make the table view look sleek and add action buttons for viewing, editing, and deleting entries.
Ready to dive in? I'll guide you step by step, starting from scratch. We'll deploy the script, add frameworks like Vue.js, Vue Formulate, and Buefy for a smoother development experience. You'll see the magic happen as we test deployments and tweak the HTML to incorporate these tools.
By the end, we'll have a fully functional form, sending data seamlessly to a spreadsheet. I'll explain how Tamotsu ORM makes read-write operations a breeze, with the added bonus of a test deployment URL for continuous updates.
Finally, we'll wrap up with a quick demo, showcasing the submitted data in a clean table view. I'll provide a code overview, detailing how the server-side and client-side code interact to make this happen.
Links & References:
Part-II
• Form with Repeatable G...
Demo Link:
script.google.com/macros/s/AK...
Spreadsheet Link:
docs.google.com/spreadsheets/...
Vue Formulate :
vueformulate.com/guide/#input...
Buefy Framework:
buefy.org/
Vue JS:
vuejs.org/
If you find this tutorial helpful, don't forget to subscribe for more content. Thanks for tuning in, and I'll catch you in the next one! 👩‍💻🚀