Skip to content

JavaScript library for creating and modifiyng object editing forms

License

Notifications You must be signed in to change notification settings

tsv2013/form-builder

Repository files navigation

form-builder

JavaScript (TypeScript) form builder library. Allows tp create, modify and save layout for JSON object data.

Build Status

Sample usage

If 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);
    }
);

And you will get the following UI:

FormBuilder Form Screen

Basic functions

  • Create form from a JSON object
  • Modify and save layout to JSON
  • Apply existing JSON layout to a form
  • Built-in object editor
  • Built-in collection editor

Supported frameworks

  • KnockoutJS
  • something other in plans

Online demos

Demos and documentation

How to compile this repo

About

JavaScript library for creating and modifiyng object editing forms

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published