Home QbForm Demos Downloads Quick start

Presentation

Note: This chapter describes how to use QbForm in a JavaScript project. If you use ReactJs or Vue.js, the logic remains the same. The specific changes to apply for a ReactJs or Vue.js project are explained here: ReactJs and vue.js.

In this chapter, we assume that we have a front-end project with the following directory structure:
+-- MyProject/
      +-- index.html

The content of index.html looks like: 
<html>
  <head>
  ...
  </head>
  <body>
    <div id="MyDiv"></div>
    <script>
      const data = {
        lastName: "DOE",
        firstName: "John",
        children: [
          { firstName:"Alice"  , age: 15 },
          { firstName:"Bob"    , age: 12 },
          { firstName:"Charlie", age:  9 }
        ]
      }
    </script>
    ...
  </body>
</html>

This chapter explains how we can use QbForm to display and edit the content of 'data' in 'MyDiv'.

Step 1: Installation

Download the zip file from this page: Download
Add a 'QbForm' directory to your project with all the js and css files extracted from the downloaded file.
In order to manage QbForn versioning, we recommend to create a symlink from QbForm to QbForm-<version> 
+-- MyProject/
      +-- QbForm-<version>/
          +-- QbForm.js
          +-- QbForm-table.js
          +-- QbForm-default.css
          +-- QbForm-compact.css
          +-- QbForm-dark.css
          +-- QbForm-table-default.css
          +-- QbForm-table-compact.css
          +-- QbForm-table-dark.css
      +-- QbForm -> QbForm-<version>
      +-- index.html

Note: QbForm is still in BETA version. It is not available as a NPM package, but the RELEASE version and the NPM package will be available by the end of 2023.


Step 2: Integration of js scripts and css in HTML code

Edit index.html and add links to QbForm/*.js and QbForm/*.css
Warning: Order matters (QbForm.js before QbForm-table.js)
<html>
  <head>
    ...
    <!-- QbForm -->
    <script src='./QbForm/QbForm.js'></script>
    <link rel="stylesheet" href="./QbForm/QbForm-default.css">
    <link rel="stylesheet" href="./QbForm/QbForm-compact.css">
    <link rel="stylesheet" href="./QbForm/QbForm-dark.css">
    <!-- QbForm-table -->
    <script src='./QbForm/QbForm-table.js'></script>
    <link rel="stylesheet" href="./QbForm/QbForm-table-default.css">
    <link rel="stylesheet" href="./QbForm/QbForm-table-compact.css">
    <link rel="stylesheet" href="./QbForm/QbForm-table-dark.css">
    ...
  </head>
  <body>
  ...
  </body>
</html>


Step 3: Build the JSON schema

For more details on this section, please refer to the JSON schema reference
https://json-schema.org/

In our case, the JSON schema is: 
const schema = {
  type: "object",
  properties: {
    lastName: { type: "string" },
    firstName: { type: "string" },
    children: { 
      type: "array",
      items: [
        type: "object",
        properties: {
          firstName: { type: "string" },
          age: { type: "integer" }
        }
      ]
    }
  }
}
This variable will be added in the script in 'index.php'

Step 4: Create a QbForm object, set the content (from 'data') and display it.

In index.php, add the following lines:
<html>
  <head>
    ...
  </head>
  <body>
  <div id="MyDiv"></div>
    <script>
      const data = { ... }
      const schema = { ... }
      const theme = "default"
      const qbForm = new QbForm(schema, theme)
      qbForm.setProperty("/", "value", data)
      qbForm.display(document.getElementById("MyDiv"))
    </script>
    ...
  </body>
</html>


Step 5: Result

Here is the resulting page: result
And the source code of the page: source

The form is editable, you can change the content of the fields, add/remove lines in the table, resize the width of the each column and sort the table by clicking on the header of a column.

Step 6: Add a button to get the new value of the form

In index.php, add the following lines:
<html>
  <head>
    ...
  </head>
  <body>
  <div id="MyDiv"></div>
    <script>
      ...
    </script>
    
    <button
      onClick="alert(JSON.stringify(qbForm.getProperty('/', 'value')))" >
      Get Value
    </button>
    ...
  </body>
</html>


Step 7: Customize the schema to beautify the display and add filters to table/

Note: schema parameters starting with an underscore ("_") are non-standard parameters.

Modify the JSON schema with the following changes:
const schema = {
  type: "object",
  properties: {
    lastName: { 
      type: "string",
      _label: "Last Name",
      _backgroundColor: "lemonchiffon",
      _frameRightText: "This field will be converted to uppercase.",
      _frameRightColor: "darkblue"
    },
    firstName: { 
      type: "string", 
      _label: "First Name",
      },
    children: { 
      type: "array",
      _label: "Children",
      _filter: yes,
      items: {
        type: "object",
        properties: {
          firstName: { type: "string" },
          age: { type: "integer" }
        }
      }
    }
  }
}


Step 8: Add a callback to convert 'lastName' to upperCase'.

In index.php, add the following lines:
<html>
  <head>
    ...
  </head>
  <body>
  <div id="MyDiv"></div>
    <script>
      ...
      
      function lastNameToUpperCase(elementPathAsList, eventName, parameters) {
        const value = qbForm.getProperty('/lastName', 'value')
        qbForm.setProperty('/lastName', 'value', value.toUpperCase())
      }
      qbForm.setCallback('/lastName', "onChange", lastNameToUpperCase )
      
    </script>
    ...
  </body>
</html>


Step 9: Final result

Here is the resulting page: result
And the source code of the page: source