is it possible to setData like formbuilder?

[guillermofr]

i dont find how to load a created form to edit it, is it possible to do with formeo?

[guillermofr]

i saw your post about setting a second parameter on constructor to load data. But this fails if you make a second call of formeo, the first time is OK

Uncaught (in promise) TypeError: Cannot set property 'innerHTML' of null

Im doing something like this this.formeo = new window.Formeo(this.formeo_options, this.saved_data);

any tip of load a second time?, i need to reset to defaults the form

[sheibeck]

You should be able to render a formeo form by calling:

var formeo = new Formeo(<formeoOptions>, <formeoFormJson>);
formeo.render(<containerToRenderFormTo>)

I use

JSON.stringify(JSON.parse(formeoObj.formData))

To save and the form data and I store it in a DB (this is what would go in above). So, you really are just passing around a JSON object.

I'm using formeo to run my website and it's simple and fast. You can view my code here if you want to take a look at how I implemented it (specifically you'll want to check out Scripts/tpn.charactersheet.js)

I just need to figure out how to add some custom options in the floating tool menu on the right. :)

[guillermofr]

can you call a second time the function tpn_charsheet.initFormeo, of your code @sheibeck, to check if formeo crashes to you too when you init formeo while a formeo instance is loaded?

i can load data perfectly first time, the problem is loading a second time to reset the form without reloading the page.

[sheibeck]

I hadn't tried reloading the form without reloading the page since that isn't part of the architecture I need at the moment. I'll give it a shot and let you know.

On Tue, Oct 3, 2017 at 7:14 AM Guillermo Fernández notifications@github.com wrote:

can you call a second time the function tpn_charsheet.initFormeo, of your code @sheibeck https://github.com/sheibeck, to check if formeo crashes to you too when you init formeo while a formeo instance is loaded?

i can load data perfectly first time, the problem is loading a second time to reset the form without reloading the page.

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/Draggable/formeo/issues/93#issuecomment-333811368, or mute the thread https://github.com/notifications/unsubscribe-auth/AHgoYKnyo5xX20XkqR9ebkO1LtFpEYcIks5sohcLgaJpZM4PkECu .

[sheibeck]

After the initial call to initFormeo(), if I call it again i get:

Uncaught (in promise) TypeError: Cannot set property 'innerHTML' of null
    at e.render (http://localhost:15895/Scripts/formeo.min.js:6:63513)

So, no, I'm not able to call it a second time. But, I also only have the minified version of formeo, so it's hard to tell if it's really an issue with formeo, or the way I have my architecture set up.

[guillermofr]

that is the issue xD

thanks to confirm the same error

[santosh-k1]

we can load the data on-page load by using below concepts

var formJSONData = {
    "id": "51100a54-1370-494a-8ad6-9d934c593623",
    "settings": {},
    "stages": {
        "6ded269e-27f5-441b-835f-8bb8751ba0e8": {
            "id": "6ded269e-27f5-441b-835f-8bb8751ba0e8",
            "settings": {},
            "rows": [
                "aae2d953-e7ec-44bf-ad0b-a5fbce738372"
            ]
        }
    },
    "rows": {
        "aae2d953-e7ec-44bf-ad0b-a5fbce738372": {
            "columns": [
                "3d4c10e2-5255-4051-8c8b-53bd048e2787",
                "3fe2f05c-754b-4cc7-8443-a67cc2e8fbc6"
            ],
            "id": "aae2d953-e7ec-44bf-ad0b-a5fbce738372",
            "config": {
                "fieldset": false,
                "legend": "",
                "inputGroup": false
            },
            "attrs": {
                "className": "f-row"
            }
        }
    },
    "columns": {
        "3d4c10e2-5255-4051-8c8b-53bd048e2787": {
            "fields": [
                "txtUserName"
            ],
            "id": "3d4c10e2-5255-4051-8c8b-53bd048e2787",
            "config": {
                "width": "50%"
            },
            "style": "width: 50%",
            "tag": "div",
            "content": [
                {
                    "tag": "input",
                    "attrs": {
                        "type": "text",
                        "className": "form-control"
                    },
                    "config": {
                        "label": "Santosh"
                    },
                    "meta": {
                        "group": "common",
                        "icon": "text-input"
                    },
                    "fMap": "attrs.value",
                    "id": "txtUserName"
                }
            ],
            "attrs": {
                "className": [
                    "f-render-column"
                ]
            }
        },
        "3fe2f05c-754b-4cc7-8443-a67cc2e8fbc6": {
            "fields": [
                "b811d59b-5191-4de7-baab-52d931317a09"
            ],
            "id": "3fe2f05c-754b-4cc7-8443-a67cc2e8fbc6",
            "config": {
                "width": "50%"
            },
            "style": "width: 50%",
            "tag": "div",
            "content": [
                {
                    "tag": "select",
                    "config": {
                        "label": "Project"
                    },
                    "attrs": {
                        "className": "form-control"
                    },
                    "meta": {
                        "group": "common",
                        "icon": "select",
                        "id": "select"
                    },
                    "options": [
                        {
                            "label": "select",
                            "value": "select",
                            "selected": true
                        },
                        {
                            "label": "Option 2",
                            "value": "option-2",
                            "selected": false
                        }
                    ],
                    "id": "b811d59b-5191-4de7-baab-52d931317a09"
                }
            ],
            "attrs": {
                "className": [
                    "f-render-column"
                ]
            }
        }
    },
    "fields": {
        "txtUserName": {
            "tag": "input",
            "attrs": {
                "type": "text",
                "className": "form-control"
            },
            "config": {
                "label": "Santosh"
            },
            "meta": {
                "group": "common",
                "icon": "text-input"
            },
            "fMap": "attrs.value",
            "id": "txtUserName"
        },
        "616c0063-e856-4dbe-8343-916bbf54f9e5": {
            "tag": "input",
            "attrs": {
                "type": "text",
                "className": "form-control",
                "id": "Santoshk1"
            },
            "config": {
                "label": "Santosh"
            },
            "meta": {
                "group": "common",
                "icon": "text-input"
            },
            "fMap": "attrs.value",
            "id": "Santoshk1"
        },
        "b811d59b-5191-4de7-baab-52d931317a09": {
            "tag": "select",
            "config": {
                "label": "Project"
            },
            "attrs": {
                "className": "form-control"
            },
            "meta": {
                "group": "common",
                "icon": "select",
                "id": "select"
            },
            "options": [
                {
                    "label": "select",
                    "value": "select",
                    "selected": true
                },
                {
                    "label": "Option 2",
                    "value": "option-2",
                    "selected": false
                }
            ],
            "id": "b811d59b-5191-4de7-baab-52d931317a09"
        }
    }
}

var formeoNew = new Formeo(formeoOpts, JSON.stringify(formJSONData));

[jonamariya]

@guillermofr @sheibeck did you guys found a way for reloading the editor without refreshing the page?

[ryleeferguson]

@jonamariya @sheibeck @guillermofr I ran into this issue yesterday and was able to get it working. It seems that somewhere in the code, the container property gets unset in the options object.

When parsing your options to Formeo, make sure you do a deep copy of the object - I personally use jQuery's extend functionality:

var     formeoOptions: {container: "#my-container"...},
    builder;

function loadNewData(jsonDataAsString){
    let opts = $.extend({},formeoOptions);
    builder = new Formeo(opts,jsonDataAsString);
}

loadNewData(myJsonString);

To set the builder to blank, it's best to capture the initial builder.formData

var     formeoOptions: {container: "#my-container"...},
    finit = false,
    blankjson,
    builder = new Formeo($.extend({},formeoOptions));

$(document).on('formeoLoaded',function(e){
    if(!finit){
        // Use JSON.parse() and .stringify() to remove white space characters
        // If not you'll get "\r\n" and "\t"'s in the formData, which will throw an error
        blankjson = JSON.stringify(JSON.parse(builder.formData));
        finit = true;
    }
});

function loadNewData(jsonDataAsString){
    let opts = $.extend({},formeoOptions);
    builder = new Formeo(opts,jsonDataAsString);
}

function clearData(){
    let opts = $.extend({},formeoOptions);
    builder = new Formeo(opts,blankjson);
}

[NomanAhmed6352]

I want to set json data from database as we would use in FormBuilder simple actions.setdata but there is no such option here..

I am experiencing error "Uncaught ReferenceError: Formeo is not defined".

Can someone guide me where i am lacking.

var formeo = new FormeoEditor(formeoOptions); var renderedForm = new FormeoRenderer({ renderContainer: '#formeo-render', }); function FormRender() { renderedForm.render(formeo.formData); } var formeo = new Formeo(formeoOptions, JSON.stringify(myJSONData));