No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Dynamically Render Form Fields

    Show & Tell
    4
    8
    1995
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Graypes
      Graypes last edited by

      This is the greatest thing I’ve built in months. So stoked and thank you to @metalsadman for helping me get it the last mile. This completely changes how I will manage my data models going forward!

      General idea is that you define your form fields as schema. Your Form component will iterate these field definitions and the Field component will render the specified UI component with all the settings specified. It’s beautiful in action. You can use ANY UI component you want.

      You will need to include any UI component you render this way in the components section of your quasar.conf file. Even if you have importStrategy set to ‘auto’. That only works when the components are visible in the template when being rendered. Since this is dynamic that no longer works

      Gist

      qyloxe dobbel 2 Replies Last reply Reply Quote 3
      • qyloxe
        qyloxe @Graypes last edited by

        @Graypes look also here:

        https://quasar-easy-forms.web.app/

        https://quasar-easy-tables.web.app/

        More of these here:

        https://github.com/quasarframework/quasar-awesome

        1 Reply Last reply Reply Quote 1
        • dobbel
          dobbel @Graypes last edited by dobbel

          @Graypes Great work!

          Some questions/ideas :

          • How do you deal with validation?
          • Integration with vuex-orm classes would be awesome
          • branching (for example: if this.qfield.selectedValue= ‘foo’ then add/enable question x ) Like a survey build tool! 🙂
          1 Reply Last reply Reply Quote 0
          • Graypes
            Graypes last edited by

            Great ideas, @dobbel ! For now my focus has been on the rendering and, since this post, I’ve been able to add more complex use cases. Now I can handle rendering of nested components, all dynamically. This was actually my ultimate goal. I’ll be posting a full story on it soon.

            @qyloxe There are many good solutions for rendering forms but none that I found met my criteria. The big one was being able to render simple AND nested components completely dynamically. In other words, I don’t need to build a component template and pass in props. The whole thing is dynamically generated!

            qyloxe 1 Reply Last reply Reply Quote 0
            • qyloxe
              qyloxe @Graypes last edited by

              @Graypes said in Dynamically Render Form Fields:

              The whole thing is dynamically generated!

              Cool! The next obvious step is to integrate with some drag and drop.

              1 Reply Last reply Reply Quote 0
              • Graypes
                Graypes last edited by

                The write up I promised!

                https://medium.com/@graypes/add-dynamic-forms-to-your-vue-app-609de4005a2b

                dobbel 1 Reply Last reply Reply Quote 0
                • Q
                  QuaSam last edited by

                  The article written by Graypes is very good and deserves attention by forum users, but for someone not familiar with using render functions in a Quasar app, it is very difficult to implement. Is there a Render Functions 101 example which shows what is minimally required to get started with Render Functions in Quasar? Thanks (again) for the Medium article.

                  1 Reply Last reply Reply Quote 0
                  • dobbel
                    dobbel @Graypes last edited by

                    @Graypes

                    Very nice article. In vue 3 there will be no more mixins in favor of the composition api. Do you see a way to migrate your dynamic rendering of forums to Vue3?

                    1 Reply Last reply Reply Quote 0
                    • First post
                      Last post