tonytan4ever / Bootstrap-Form-Builder-V3V4

A bootstrap 3.0 form drag and drop builder, implemented in Jquery. Based on: https://github.com/minikomi/Bootstrap-Form-Builder
MIT License
74 stars 43 forks source link

How to put a select list in the form title popup #27

Open Saucisteve opened 4 years ago

Saucisteve commented 4 years ago

Hello, I am trying to edit app.js to add a select list along the name input in the form name popup, but whenever I change the "type" field to something else than input the form just disappear. How can I use a select list in this ? Here's a glimpse at what I edited in app.js

myform_view = new MyFormView( { title : "Original", columns : layout_number_of_columns, collection : new MyFormSnippetsCollection( [ { "title" : "Form Name", "fields" : { "name" : { "label" : "Enter form name", "type" : "input", "value" : "Form Name" }, // Add a list of options "category" : { "label" : "Options", "type" : "Select", "values" : [ { "label":"Setting", "value":"1", "selected":true }, { "label":"Audio", "value":"2", "selected":false }] } } } ]) });

isaacm commented 3 years ago

@Saucisteve @tonytan4ever try using the app's generated json data. Drag and drop some form elements then hit the "Save current form layout button". Inspect the downloaded txt file to see what the form loader expects. Then you can copy it into app.js

For exampel, the attached code below loads just fine when it's added app.js. Let us know if it works for you.

myform_view = new MyFormView({
    title: "Original",
    columns: layout_number_of_columns,
    collection: new MyFormSnippetsCollection([
        {
            "title": "Form Name",
            "fields": {
                "name": {
                    "label": "Form Name",
                    "type": "input",
                    "value": "TEST",
                    "name": "name"
                }
            }
        },
        {
            "title": "Select Basic",
            "fields": {
                "id": {
                    "label": "ID / Name",
                    "type": "input",
                    "value": "selectbasic",
                    "name": "id"
                },
                "label": {
                    "label": "Label Text",
                    "type": "input",
                    "value": "Select Basic",
                    "name": "label"
                },
                "options": {
                    "label": "Options",
                    "type": "textarea-split",
                    "value": [
                        "Option one",
                        "Option two"
                    ],
                    "name": "options"
                },
                "values": {
                    "label": "Values",
                    "type": "textarea-split",
                    "value": [
                        "1",
                        "2"
                    ],
                    "name": "values"
                },
                "inputsize": {
                    "label": "Input Size",
                    "type": "select",
                    "value": [
                        {
                            "value": "col-md-1",
                            "label": "Mini",
                            "selected": false
                        },
                        {
                            "value": "col-md-2",
                            "label": "Small",
                            "selected": false
                        },
                        {
                            "value": "col-md-4",
                            "label": "Medium",
                            "selected": false
                        },
                        {
                            "value": "col-md-5",
                            "label": "Large",
                            "selected": true
                        },
                        {
                            "value": "col-md-6",
                            "label": "Xlarge",
                            "selected": false
                        },
                        {
                            "value": "col-md-8",
                            "label": "Xxlarge",
                            "selected": false
                        }
                    ],
                    "name": "inputsize"
                }
            }
        }
    ])
});