How to show a form for an existing object with the pre-defined layout using FormBuilder

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",
    }
}
                    

And you have designed the following form layout:

var layout = {
  "partclass": "layoutRow",
  "cssClasses": "row test-form",
  "parts": [
    {
      "partclass": "layoutColumn",
      "cssClasses": "column",
      "parts": [
        {
          "partclass": "layoutItem",
          "cssClasses": "item test-item test-group",
          "parts": [
            {
              "partclass": "label",
              "cssClasses": "test-label",
              "text": "Name"
            },
            {
              "partclass": "input",
              "cssClasses": "test-input",
              "data": "name"
            }
          ]
        },
        {
          "partclass": "layoutItem",
          "cssClasses": "item test-item test-group",
          "parts": [
            {
              "partclass": "label",
              "cssClasses": "test-label",
              "text": "Surname"
            },
            {
              "partclass": "input",
              "cssClasses": "test-input",
              "data": "surname"
            }
          ]
        },
        {
          "partclass": "layoutItem",
          "cssClasses": "item test-item test-group",
          "parts": [
            {
              "partclass": "label",
              "cssClasses": "test-label",
              "text": "Phone"
            },
            {
              "partclass": "input",
              "cssClasses": "test-input",
              "data": "phone"
            }
          ]
        },
        {
          "partclass": "panel",
          "cssClasses": "panel",
          "parts": [
            {
              "partclass": "layoutColumn",
              "cssClasses": "column",
              "parts": [
                {
                  "partclass": "layoutItem",
                  "cssClasses": "item test-item test-group",
                  "parts": [
                    {
                      "partclass": "label",
                      "cssClasses": "test-label",
                      "text": "Zipcode"
                    },
                    {
                      "partclass": "input",
                      "cssClasses": "test-input",
                      "data": "zipcode"
                    }
                  ]
                },
                {
                  "partclass": "layoutItem",
                  "cssClasses": "item test-item test-group",
                  "parts": [
                    {
                      "partclass": "label",
                      "cssClasses": "test-label",
                      "text": "City"
                    },
                    {
                      "partclass": "input",
                      "cssClasses": "test-input",
                      "data": "city"
                    }
                  ]
                },
                {
                  "partclass": "layoutItem",
                  "cssClasses": "item test-item test-group",
                  "parts": [
                    {
                      "partclass": "label",
                      "cssClasses": "test-label",
                      "text": "Street"
                    },
                    {
                      "partclass": "input",
                      "cssClasses": "test-input",
                      "data": "address"
                    }
                  ]
                }
              ]
            }
          ],
          "text": "Address"
        }
      ]
    }
  ]
}
                    

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

var model = FormBuilder.Form.show(object, layout, 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);
    }
);
                    

You will get the object changes notifications in the callback function.

Editing object content

Here you can see the changes in the content object:

Form layout JSON

Here you can see the current form layout JSON: