Loading data into formbuilder.js

Question

I'm using the formbuilder.js library and am not sure if it is possible to load field data back into a formbuilder view to edit an existing form. I haven't used this library before, so I'm not familiar with what it can/cannot do.

I noticed that a new Formbuilder has the .fields attribute. If I load the fields into that before the Formbuilder view renders, will that load the fields?

NOTE: Is there an alternative (and better) node.js module or another js library that might be a little better and better maintained than this one?

Answer 1

I just started using Formbuilder myself, seems to work decent, although missing a few 'features' I think. But so far so good.

As for loading up the form back into the viewport, this is roughly the code you would need to display the fields.

Give this a shot, hopefully that helps.

<!-- REQUIRED: jquery ^, lodash, dust-linkedin -->
<script src="/components/formBuilder/js/libs.min.js"></script>
<script src="/components/formBuilder/js/formrunner.min.js"></script>
<link href="/components/formBuilder/css/formbuilder.css" media="screen" rel="stylesheet" />

<script>

    // On document ready
    $(function(){

        // IF you're loaded existing form data, it's up to you
        // how you want to load the JSON. In this example,
        // we pull it using ajax - all that form builder requires
        // is that you inject the JSON when calling `formrunner`
        $.getJSON( '/controller/cont.getFormJson.php',
            {
                userId:'<?= $data['userId'] ?>',
                formId:'<?= $data['formId'] ?>'
            },
            function(resp){

            var formRunner = new formrunner({
                // Provide a dom element the form will be built to
                // jQuery or simpleDOM elements required
                targets: $('.formrunner'),

                // ACTION FORM WHEN THE USER SUBMITS THE LIVE FORM BACK
                action: '', 

                // we loaded existing JSON, so we have a form_id.
                form_id: resp.form_id,

                // Pass in the model data
                model: resp.model

            });
        });
    });
</script>

<div class="formrunner"></div>