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 GitHub<#503 (comment)>, or mute the thread<https://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 GitHub<#503 (comment)>, or mute the thread<https://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