JsonFormBuilder Documentation

HTML Section

You will need the following snippet to integrate this JsonFormBuilder in your HTML

<nav class="nav jfb-selector-nav">
</nav>
<table class="table jfb-table" id="BuildThisForm">
  <thead>
    <tr class="titles">
    </tr>
    <tr class="buttons">
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

It needs a Bootstrap nav and a Bootstrap table to work. The library automatically uses a nav with class .jfb-selector-nav as the nav and a table with class .jfb-table as the table to render on the screen.

Make sure to include bootstrap stylesheet on the header and "jquery", "popper" and "bootstrap" javascripts in the body. Include the script "jquery.JsonFormBuilder.dev.js" only after including all the other javascripts. Please refer to the index.html file for example usage.

JavaScript Section

<script src="dist/jquery/dist/jquery.min.js"></script>
<script src="dist/popper/dist/umd/popper.min.js"></script>
<script src="dist/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="dist/js/jquery.JsonFormBuilder.dev.js"></script>
<script>
  window.formBuilder = new JsonFormBuilder(products_2, {
    price_multiplier: "10",
    price_multiplier_mode: "fixed", // fixed or multiply
    compare_multiplier: "10",
    compare_multiplier_mode: "fixed", // fixed or multiply
  });
</script>

As you can see, you have to include jquery, popper.js, bootstrap and jquery.JsonFormBuilder.dev.js sequencially in order to call the object.

Then, to generate the form, you have to call new JsonFormBuilder(JSON, OPTIONS) with the JSON and Options.

The JSON should follow the exact format that you sent me.

Options is a JavaScript object. This object provides necessary information to the library such as price_multiplier, price_multiplier_mode etc.

Change Shipping Method Function

You can put the changeShippingFunction as a property of the OPTIONS object that you give to the class.

For example:-

window.formBuilder = new JsonFormBuilder(products_2, {
  price_multiplier: "10",
  price_multiplier_mode: "fixed", // fixed or multiply
  compare_multiplier: "10",
  compare_multiplier_mode: "fixed", // fixed or multiply
  changeShippingFunction: function(callback, data){
    // show modal and get user contents here
    // existing data.country and data.option is available
    console.log(data.country, data.option);

    // on submit, call the callback function with 3 values: shipping price, country, shipping option
    callback(2.33, "Bangladesh", "Pathao");
  };
});

The comments should tell you everything on how to use it. Still, ask me if you need further clarification.

Export the generated JSON

Once the table/form has been updated by the user, you can export the new JSON from the object method generateExportData()

For example:-

// Since we've put the Form Builder instance as window.formBuilder.
// We can call this method on this instance
var generatedJSON = window.formBuilder.generateExportData();
console.log(generatedJSON);

Thank you.