QbForm: Generate forms and tables from JSON schema

Presentation

The QbForm object is the entry to point to create, modify and access Forms, table and fields in a QbForm.

Methods

Constructor

Objective:
    Create a QbForm object.
JS syntax:
    new QbForm( <schema>, <theme>)
Parameters:
    <schema>: object containing the QbForm Schema.
    <theme>: name of the theme. Could be "default", "compact", "dark" or the name of a custom theme.
Example:

let qbForm = new QbForm({ type: "string" }, "default" )

QbForm.display

Objective:
    Build the form and implement it in an HTML element (usually a DIV).
JS syntax:
    <qbForm>.display(HtmlElement)
Parameters:
    <HtmlElement>: HTML element which contains the QbForm.
Example:

let qbForm = new QbForm({ type: "string" }, "default" )
qbForm.display(document.getElementById("myDivId"))

QbForm.setProperty

Objective:
    Set the value of a QbForm or a QbForm field.
JS syntax:
    <qbForm>.setProperty(<elementPath>, <propertyName>, <propertyValue>)
Parameters:
    <elementPath>: This field can be:
        - "/" -> refers to the entire QbForm
        - a string starting with "/" -> refers to QbForm field or a table cell (ex: "/MyObj/MyTable/1/col")
        - an array representing a field path (ex: ["MyObj", "MyTable", "1", "col"] )
    <propertyName>: Is a string. Its possible value are :
        - "value" -> represents the value of the QbForm or QbForm field.
        - a JSON Schema property (ex: "type", "format").
        - a non-standard parameter starting by "_" (ex: "_display", "_backgroundColor").
    <propertyValue>: Is a string, an array or an object.
Note: Properties for display customization are described here:
Example:

QbForm.getProperty

Objective:
    Get the value of a QbForm or a QbForm field.
JS syntax:
    <qbForm>.getProperty(<elementPath>, <propertyName>)
Parameters:
    <elementPath> and <propertyName> are described in the previous method (setProperty).
Example:

let qbForm = new QbForm(schema, "default" )
qbForm.setProperty("/", "value", { name: "DOE", firstName: "John", age: 35 } )
qbForm.setProperty("/name", "_backgroundColor", "yellow")
qbForm.display(document.getElementById("myDivId"))
const allFormAsJson = qbForm.getProperty("/", "value")
const fieldNameAsJson = qbForm.getProperty("/name", "value")
const nameBackgroundColor = qbForm.getProperty("/name", "_backgroundColor")

QbForm.setCallback

Objective:
    attach a callback when an event raised on a QbForm or its fields.
JS syntax:
    <qbForm>.setCallback(<elementPath>, <eventName>, <callbackFunction>)
Parameters:
    <elementPath>: String or list that identify the qbForm or one of its fields.
    <eventName>: type of event to be catched. Possible values are : "onChange", "onKeyUp", "onFocus", "onRowAppend", "onRowDeletion"
    <callbackFunction>: This function must have the following signature:

function callbackFunction( elementPath, eventName, parameters ) {
    // elementPath: list representing the QbForm field raising the event
    // eventName: type of event ("change", "keyUp", "focus", ...)
    // parameters: event parameters (can be an object or null)
    ...
    return true/false // event propagation
}

Note: if the callback returns 'false', the event propagation will be stopped. In particular, if a callback on 'onRowAppend' or 'onRowDeletion' replies 'false', the action on the table will be discarded.
Example:

let qbForm = new QbForm(schema, "default" )
qbForm.setCallback("/", "onChange", onChangeFunction)
qbForm.setCallback("/name", "onFocus", onFocusFunction)
qbForm.display(document.getElementById("myDivId"))

QbForm