How to create a form for an existing object with the FormBuilder

This is a ready to use form

If you edit values you will see changes in the content. Click the "Design" button to change the form layout.

Source code

Let's say you have the following plain JavaScript object obtained from a database:

var object = {
    name: "Tom",
    surname: "Young",
    zipcode: "103844",
    city: "Kanzas",
    address: "Mountain drive, 754",
    phone: "2-300-765-11-22",
    data: {
        first_name: "Bob",
        last_name: "Sallivan",
        email: "bob@sallivan-family.org",
    }
}

You can pass this object, the DOM element and the update callback function to the Form.show() method:

var model = FormBuilder.Form.show(object, null, document.getElementById("form-builder-container"),
    function(object, json) {
        document.getElementById("form-builder-model-container").value = json;
    },
    function(layout) {
        document.getElementById("form-builder-layout-container").value = JSON.stringify(layout, null, 4);
    }
);

It builds the form and shows the given HTML element. You will get the object changes notifications in the callback function.

Editing object content

Here you can see the changes in the content object:

Auto-generated form layout JSON

Here you can see the current form layout JSON: