Form Designer

[iang0ld]

I am looking to integrate vue-form-designer with VDDL (http://hejx.space/vddl-demo/#/nested) to create a drag and drop designer for vue-form-generator. Is anyone interested in working on this or has someone already done something like this.

[lionel-bijaoui]

This is a really great idea and something I wanted to do since a long time (but never took the time). It would be incredibly useful !

We have the v3 coming soon, better you start with it. Could you wait a bit ? You can test the v3 with the tag next

npm i --save vue-form-generator@next

If you have any question I can help you. Keep us posted !

[iang0ld]

I am learning Vue now. I’ve been programming in Javascript for 20 years though. I’ll start with what we have to get a prototype together and keep you updated. I’m a little time poor so it will take time anyway.

From: Lionel Bijaoui notifications@github.com Sent: Wednesday, 3 October 2018 10:46 PM To: vue-generators/vue-form-generator vue-form-generator@noreply.github.com Cc: Ian Gold Ian@order2invoice.com; Author author@noreply.github.com Subject: Re: [vue-generators/vue-form-generator] Form Designer (#503)

This is a really great idea and something I wanted to do since a long time (but never took the time). It would be incredibly useful !

We have the v3 coming soon, better you start with it. Could you wait a bit ? You can test the v3 with the tag next

npm i --save vue-form-generator@next

If you have any question I can help you. Keep us posted !

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/vue-generators/vue-form-generator/issues/503#issuecomment-426624345, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AISu7qDzIU2mcziAJb5vvf0nC9yji4CZks5uhLGhgaJpZM4XF119.

[lionel-bijaoui]

Thank you for your time !

[DelfsEngineering]

@iang0ld I would be interested in helping with this. My app ( www.fmbetterforms.com ) is based on VFG and it would be a great addition.

[dtorres-sf]

@iang0ld I have been working on something similar with formeo. I have basically written a converter from formeo schema to VFG schema and back. There are still some kinks I am working out, but I do have something that is working for the schema we use. There would be a little bit more work to get this working for a generic VFG schema.

[dtorres-sf]

I have posted a tool that demonstrates the builder approach that we use. Like I mentioned it is basically a converter back and forth between formeo and VFG. To get around VFG not supporting rows we use multiple VFG instances, each instance is a row. They all share a common object so form submission is pretty much the same.

We use this in a bootstrap environment. Column widths are snapped to bootstrap grid so you can resize columns using Formeo and they will set the group classes in VFG schema.

The tool is located here. You can start a new form or paste in an existing, however the format needs to be in Surefyre's schema which is as follows:

{
  "rows": [
    {
       "schema": <VFG Schema>
    }
  ]
}

You can make edits and click Preview which will render the form using VFG. You can click Convert to see the schema in the above format (which fundamentally is a collection of VFG schemas).

Here is the example from the VFG documentation (converted to our format that can be used in the tool):

{
    "rows": [
        {
            "schema": {
                "fields": [
                    {
                        "disabled": true,
                        "featured": false,
                        "inputType": "text",
                        "label": "ID",
                        "model": "id",
                        "readonly": true,
                        "type": "input"
                    },
                    {
                        "disabled": false,
                        "featured": true,
                        "inputType": "text",
                        "label": "Name",
                        "model": "name",
                        "placeholder": "User's name",
                        "readonly": false,
                        "required": true,
                        "type": "input"
                    },
                    {
                        "hint": "Minimum 6 characters",
                        "inputType": "password",
                        "label": "Password",
                        "min": 6,
                        "model": "password",
                        "required": true,
                        "type": "input"
                    },
                    {
                        "inputType": "number",
                        "label": "Age",
                        "min": 18,
                        "model": "age",
                        "type": "input"
                    },
                    {
                        "inputType": "email",
                        "label": "E-mail",
                        "model": "email",
                        "placeholder": "User's e-mail address",
                        "type": "input"
                    },
                    {
                        "label": "Skills",
                        "model": "skills",
                        "multi": true,
                        "multiSelect": true,
                        "required": true,
                        "type": "select",
                        "values": [
                            "HTML5",
                            "Javascript",
                            "CSS3",
                            "CoffeeScript",
                            "AngularJS",
                            "ReactJS",
                            "VueJS"
                        ]
                    },
                    {
                        "default": true,
                        "disabled": false,
                        "featured": false,
                        "label": "Status",
                        "model": "status",
                        "multi": true,
                        "readonly": false,
                        "textOff": "Inactive",
                        "textOn": "Active",
                        "type": "switch"
                    }
                ]
            }
        }
    ]
}

This is very much in an alpha state and not all VFG types have been implemented. However, Formeo is easily extensible in the passed in config to add new fields without modifying code. I am working with the creator of Formeo to add more VFG features such as building on visibility dependencies directly from the tool.

This is using VFG v2 and the soon to be released Formeo v1.0.0.

If this is a direction anyone wants to go I am happy to share more code and ideas.

[zoul0813]

@dtorres-sf, if it works well, we can include a link in the docs and perhaps an example in the updated v3 samples that uses it.

[zoul0813]

What did you mean by VFG doesn’t support rows though?

You can create different groups, and the group can have a bootstrap “row” class assigned to it.

[dtorres-sf]

I use groups as columns by styling them with "col-X" and then added rows on top of that using multiple VFG instances. I see there are nested groups in V3, so that might be a better way moving forward. But I have been using VFG in production for about 6 months using this approach of multiple VFG instances.

[iang0ld]

I think all that is needed to at add ‘class’ and ‘style’ as an attribute to each container and let the user decide how they want them to behave.

From: dtorres-sf notifications@github.com Sent: Wednesday, 10 October 2018 6:01 AM To: vue-generators/vue-form-generator vue-form-generator@noreply.github.com Cc: Ian Gold Ian@order2invoice.com; Mention mention@noreply.github.com Subject: Re: [vue-generators/vue-form-generator] Form Designer (#503)

I use groups as columns by styling them with "col-X" and then added rows on top of that using multiple VFG instances. I see there are nested groups in V3, so that might be a better way moving forward. But I have been using VFG in production for about 6 months using this approach of multiple VFG instances.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/vue-generators/vue-form-generator/issues/503#issuecomment-428311312, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AISu7r2q22wHKPuLCQwGhfPqKmyk0pn1ks5ujPKEgaJpZM4XF119.

[PeterC66]

I am interested in this issue - see my #569. I am happy to help, but have limited Vue.js experience.

[vesper8]

Also interested in this issue.. however in my case I really just want to create a tool that lets a non-developer use create a VFG-compatible schema that will then be rendered on my website. So really I'm looking for / to make a VFG-interactive-schema-builder Tool

If anyone has something like this or knows of something similar to this please let me know. Depending on how content I am with what I create I may add it on Github

[redoc123]

I started from scratch and got something like this working for element-ui. Did nt do it properly with proper abstraction (with vue-form-generator) but it seems to do the job for me. Let me know if you are interested in integrating with vue-form-generator.

https://drive.google.com/file/d/1y5txgjbWIrMNWCdMrWdeUSIXOgaIoPQC/view

[fazzomurata]

It looks very good!  

Viele Grüße / best regards

Henning Reineke  

   

Gesendet: Donnerstag, 03. Januar 2019 um 11:52 Uhr Von: redoc-n notifications@github.com An: vue-generators/vue-form-generator vue-form-generator@noreply.github.com Cc: Subscribed subscribed@noreply.github.com Betreff: Re: [vue-generators/vue-form-generator] Form Designer (#503)

I started from scratch and got something like this working. Did nt do it properly with proper abstraction (with vue-form-generator) but it seems to do the job for me. Let me know if you are interested in integrating with vue-form-generator.

https://drive.google.com/file/d/1y5txgjbWIrMNWCdMrWdeUSIXOgaIoPQC/view

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[vesper8]

@redoc123 this looks really nice!

I've actually been spending all my free time building a vfg schema generator based on the V3 version. It doesn't look nice like yours does but then again I'm not aiming to build a form designer as much as I'm aiming to build a schema builder that allows to export the json but also import it. It supports most V3 fields plus some custom ones I'm working on. The fields are nicely configurable based on V3 options layout. And you can create groups and move fields to/from groups or between groups (this was a pain in the ass to get right). It's almost ready for sharing now.

I think I've done a good job of abstracting VFG. I think if we were to combine your work with mine we could end up with the most kickass modern open source form designer/schema manager based on this awesome library!

Will share a video of where I'm at within 1-2 days

[redoc123]

@vesper8 Surething.. Keep me posted

[vesper8]

Here it is.. here's what I've been spending way too much time developing over the past week

It's built on top of VFG-V3. It supports grouping (only one level deep for now). You can drag'n'drop fields around but currently can't drag them in and out of groups, you have to use the dropdown for that. You can import/export both the schema and model independently. It supports the core fields I wanted to use and some custom fields based on:

https://github.com/NightCatSama/vue-slider-component (range slider) https://github.com/euvl/vue-js-toggle-button (switch) https://github.com/nathanreyes/v-calendar (datepicker and dual pane calendar)

I prefer to use these in place of old and non-vue dependencies that are currently part of the core

As I explained above, my goal in making this was to build a schema-builder since I have a special use case where I want to allow my website users to build forms that are then used by the rest of the users, as opposed to just letting a user build a form that they can then import and use for their own use.

The interface is obviously geared towards developers at the moment. Here's a video of it in action

https://www.dropbox.com/s/oor4g7jriowty8d/vue-form-schema-generator.mp4?dl=0

What do guys think @redoc123 @lionel-bijaoui @zoul0813

I think this could be useful in promoting this package and as a tool for easing its adoption. It could also become a truly kickass form designer/schema builder if combined with the efforts of other collaborators

[dtorres-sf]

My team has also been working on this. One requirement we have is multi-step forms which we use vue-form-wizard to accomplish. The builder itself is using formeo. The designer can build single page forms (as seen in the first few seconds) or entire wizards with multi step. I have integrated Froala editor to do wysiwyg HTML.

Multi row and multi column is accomplished with multiple VFG instances on a single page. They all share a model object and it works quite well. Happy to share more if anyone is interested. Demo video:

https://www.useloom.com/share/34940e6d4020449eb057834f814ca062

[vesper8]

added a live demo

also figured out how to allow fields to be draggable between groups

this UI is really only meant for Desktop

http://github.vue.vfg-schema-builder.cbass.dev/

[hightechguy]

@dtorres-sf I'd love to take it to the test drive

[sarmadbokhari]

@vesper8 I'm interested in helping contribute. I'm also developing a tool for non-developers to use to create a VFG-compatible schema. Would you mind sharing access to the codebase for your solution?

Here's a screenshot of what I've been working on, would be happy to share with you:

[vesper8]

hey @sarmadbokhari ! Thanks for the interest!

Your interface looks pretty cool too!

I just published my work on Github. This is my first time doing this : )

Here's the link: https://github.com/vesper8/vue-form-generator-builder-ui

PRs and collaboration is most welcome!

[dtorres-sf]

@hightechguy I have posted a demo here: https://mgmt.surefyre.co/pages/formbuilder/

I threw this demo together really quickly so may be a few issues. It allows for creating a multiple step wizard or a flat form and you have to pick one or the other. When you save the schema is logged to console. You will notice a difference from VFG schema and that is because this supports multi-column and multi-row (where each row can have different amount of columns). It is a very loose data structure that sits on top of the VFG schema. When rendered each row is a VFG instance that all share a single model. I have no problem open sourcing this but it would take a bit of cleanup to rip out our product specific modifications out of.

@sarmadbokhari and @vesper8 your solutions look great. I would be happy to switch over to another builder if it makes sense and I (and my team) can help contribute. Two must haves for us is easily extend additional fields (we have a variety of fields we have created for our uses) and multi row and multi column support. If this is something that we can add and extend I would be happy to give it a shot. Having a single VFG designer that we all share and contribute too could be a great addition to the community using VFG.

[hightechguy]

Thanks, @dtorres-sf Yes, it needs some clean-up, but the concept itself is very promising

[eyleron]

I started from scratch and got something like this working for element-ui. Did nt do it properly with proper abstraction (with vue-form-generator) but it seems to do the job for me. Let me know if you are interested in integrating with vue-form-generator.

https://drive.google.com/file/d/1y5txgjbWIrMNWCdMrWdeUSIXOgaIoPQC/view

This UI looks the best so far, in my opinion.

[juventus18]

I am looking to integrate vue-form-designer with VDDL (http://hejx.space/vddl-demo/#/nested) to create a drag and drop designer for vue-form-generator. Is anyone interested in working on this or has someone already done something like this.

this link lands on what appears to be malware. BEWARE!

[PeterC66]

Hi,

Sorry but I am no longer doing anything with Vue. I am now too old!

Bonne Chance.

Peter Cooper

---- On Tue, 17 Jan 2023 20:52:23 +0000 juventus18 @.***> wrote ---

I am looking to integrate vue-form-designer with VDDL (http://hejx.space/vddl-demo/#/nested) to create a drag and drop designer for vue-form-generator. Is anyone interested in working on this or has someone already done something like this.

this link lands on what appears to be malware. BEWARE!

— Reply to this email directly, https://github.com/vue-generators/vue-form-generator/issues/503#issuecomment-1386035818, or https://github.com/notifications/unsubscribe-auth/AEAG64ACG5ZE5LDB2OM4MQDWS4BAPANCNFSM4FYXLV6Q. You are receiving this because you commented.

[DelfsEngineering]

I am interested in this and happy to show you what we have done in www.fmbetterforms.com. Feel free to DM me cdelfs@delfsengineering.ca

[goatandsheep]

@PeterC66 Are you looking for maintainers?