Getting started

1. Download the library and unzip its contents into a folder in your project. This folder will be referred as PATH througout the examples.

2. Basic code: In a typical application using EasyJsonForm, you'll see 3 blocks. One (1) that contains the element where the form or the builder will be rendered, another one (2) where you load the library and another one (3) where you put the initialize and run EasyJsonForm.

<!-- 1. Defining where the EasyJsonForm component will be placed -->
<div id="my-container"></div>

<!-- 2. Loading EasyJsonForm library -->
<script src="PATH/easyjsonform.js"></script>

<!-- 3. Executing EasyJsonForm code -->
<script>
var myContainer = document.getElementById('my-container');
var ejf = new EasyJsonForm('my-form');
myContainer.appendChild(ejf.formGet());
</script>

The `EasyJsonForm`constructor takes four parameters, but just the first is mandatory. It is the id of the form, which can be any string that uniquely identifies your form. When the form is rendered to the user the id of the enclosing div or form will have this value.

3. To create a form builder on your page, we use the `builderGet()` method.

<div id="my-container"></div>
...
<script src="PATH/easyjsonform.js"></script>

<script>

// Initializing form on the page
var myContainer = document.getElementById('my-container');
var ejf = new EasyJsonForm('my-form');

myContainer.appendChild(ejf.builderGet());

</script>

4. After the form is created on the screen, you'll want to have in your hands the corresponding JSON form structure. For that, we use the `structureExport()` method.

<div id="my-container"></div>
<button onclick="saveForm()">Save Form</button>
...
<script src="PATH/easyjsonform.js"></script>

<script>

// Initializing form on the page
var ejf = new EasyJsonForm('my-form');
document.getElementById('my-container').appendChild(ejf.builderGet());

// Save method when user click on Save form button
function saveForm() {
    // structure is a javascript object. It can be used to recreate the form
    // using a EasyJsonForm object or can be saved in your database. For that,
    // the object needs to be converted as a json string using JSON.stringify

    let structure = ejf.structureExport();
    let jsonStructure = JSON.stringify(structure);
    
    // Replace console.log by your API call to save jsonStructure into your db
    console.log(jsonStructure);
    
    // If you want to update an input field (usually a hidden field) with the
    // JSON representation of this form, you must provide a callback function.
    // This is explained when we present the options (4th) argument.
}

</script>

5. If you want to load a previously saved structure into your builder, you need to pass the structure as the second argument of the EasyJsonForm constructor.

<div id="my-container"></div>
...
<script src="PATH/easyjsonform.js"></script>

<script>

// Loading the structure. In real life, the structure would be retrieved from
// the database. In this example, we are just passing a hardcoded structure.
let jsonStructure = `[
    {
        "type": "text",
        "label": "New Text 1",
        "customattribute": "",
        "mandatory": false,
        "properties": {
            "lengthmeasurement": "no",
            "lengthmax": 0,
            "lengthmin": 0,
            "multiline": false
        },
		"value": ""
    }
]`;

// The JSON needs to be converted to an object before it is passed to EasyJsonForm
let structure = JSON.parse(jsonStructure);

// Creating the EasyJsonForm, now with the structure of the saved form
var ejf = new EasyJsonForm('my-form', structure);

// Initializing the form builder on the page
document.getElementById('my-container').appendChild(ejf.builderGet());

</script>

You don't need to pass a structure as argument, you can simply not use the second argument at all. But if you need to pass the third or fourth arguments (see below), you will need to or pass `null` or an empty array `[]` as the second argument of the `EasyJsonForm` constructor.

6. If you want to display the form (not the form builder) in your page, you'll need to use the method `formGet()` (instead of `builderGet()`). The rest remain pretty much the same as the previous item. But, for this, a previously created structure is necessary.

<div id="my-container"></div>
...
<script src="PATH/easyjsonform.js"></script>

<script>

// Loading the structure. In real life, the structure would be retrieved from
// the database. In this example, we are just passing a hardcoded structure.
let jsonStructure = `[
    {
        "type": "text",
        "label": "New Text 1",
        "customattribute": "",
        "mandatory": false,
        "properties": {
            "lengthmeasurement": "no",
            "lengthmax": 0,
            "lengthmin": 0,
            "multiline": false
        },
		"value": ""
    }
]`;

// The JSON needs to be converted to an object, before it is passed to EasyJsonForm
let structure = JSON.parse(jsonStructure);

// Creating the EasyJsonForm, now with the structure of the saved form
var ejf = new EasyJsonForm('my-form', structure);

// Initializing the form the page
document.getElementById('my-container').appendChild(ejf.formGet());

</script>

7. Styling. To style your builder and your forms, you can pass, as the third parameter of EasyJsonForm, an object which specifies which parts of the form will be styled and how. We provide a sample formatter to be used with Boostrap5: `easyjsonform-bootstrap.js`.

<div id="my-container"></div>
...
<script src="PATH/easyjsonform-bootstrap.js"></script>
<script src="PATH/easyjsonform.js"></script>

<script>

// Initializing form on the page with bootstrap styling
// The variable ejfBootstrapStyle is located at easyjsonform-bootstrap.js
var ejf = new EasyJsonForm('my-form', null, ejfBootstrapStyle);
document.getElementById('my-container').appendChild(ejf.builderGet());

</script>