Form with Repeatable Group using Vue JS and Google Sheets | Part-I

Поділитися
Вставка
  • Опубліковано 5 вер 2024
  • #googlesheets #vuejs #forms #appsscript #dynamicform
    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....
    Spreadsheet Link:
    docs.google.co...
    Vue Formulate :
    vueformulate.c...
    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! 👩‍💻🚀

КОМЕНТАРІ • 10

  • @zohairdilawar116
    @zohairdilawar116 6 місяців тому

    Good job, just can't wait for the next video

  • @zohairdilawar116
    @zohairdilawar116 6 місяців тому

    Good job, just can't wait for the next video . Hope it has CRUD features.

  • @user-hk2jb2js4v
    @user-hk2jb2js4v 5 місяців тому

    Good work

    • @tech-lever
      @tech-lever  5 місяців тому

      Thank you so much 😀

  • @hic1802
    @hic1802 6 місяців тому

    thêm phần đơn giá và tổng tiền nữa thì tuyệt vời

  • @user-sk7ci3sr8d
    @user-sk7ci3sr8d 6 місяців тому +1

    Great 👍 Hope u will add delete action button with password
    And if possible admin and user login❤

  • @sarathkumar-gu7zx
    @sarathkumar-gu7zx Місяць тому

    Please share how to hide the "the application was created by a google appscript user"

  • @bloggerkickstart9060
    @bloggerkickstart9060 5 місяців тому

    please share access public

  • @user-qz7lw1ip3b
    @user-qz7lw1ip3b 3 місяці тому

    give me code

  • @arjunshakya1396
    @arjunshakya1396 6 місяців тому

    Source code provide pls