Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Form Designer #503

Open
iang0ld opened this issue Oct 3, 2018 · 29 comments
Open

Form Designer #503

iang0ld opened this issue Oct 3, 2018 · 29 comments
Labels
enhancement

Comments

@iang0ld
Copy link

iang0ld commented Oct 3, 2018

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
Copy link
Member

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
Copy link
Author

iang0ld commented Oct 3, 2018 via email

@lionel-bijaoui
Copy link
Member

Thank you for your time !

@DelfsEngineering
Copy link

@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
Copy link

dtorres-sf commented Oct 8, 2018 •
edited
Loading

@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
Copy link

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
Copy link
Member

zoul0813 commented Oct 9, 2018

@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
Copy link
Member

zoul0813 commented Oct 9, 2018

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
Copy link

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
Copy link
Author

iang0ld commented Oct 10, 2018 via email

@DelfsEngineering DelfsEngineering mentioned this issue Dec 20, 2018
Closed
@PeterC66
Copy link

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

@vesper8
Copy link

vesper8 commented Dec 30, 2018

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
Copy link

redoc123 commented Jan 3, 2019 •
edited
Loading

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
Copy link

fazzomurata commented Jan 3, 2019 via email

@vesper8
Copy link

vesper8 commented Jan 4, 2019

@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
Copy link

redoc123 commented Jan 4, 2019

@vesper8 Surething.. Keep me posted

@vesper8
Copy link

vesper8 commented Jan 4, 2019

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
Copy link

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
Copy link

vesper8 commented Jan 12, 2019 •
edited
Loading

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
Copy link

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

@sarmadbokhari
Copy link

sarmadbokhari commented Feb 2, 2019 •
edited
Loading

@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:
screen shot 2019-02-01 at 11 20 49 pm

screen shot 2019-02-01 at 11 24 58 pm

@vesper8
Copy link

vesper8 commented Feb 2, 2019 •
edited
Loading

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
Copy link

@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
Copy link

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

@eyleron
Copy link

eyleron commented Feb 26, 2019

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.

@serhii-f8 serhii-f8 mentioned this issue Aug 11, 2021
Open
@juventus18
Copy link

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
Copy link

PeterC66 commented Jan 17, 2023 via email

@DelfsEngineering
Copy link

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
Copy link

@PeterC66 Are you looking for maintainers?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests