QbForm: Generate forms and tables from JSON schema

Let's take an example !

To illustrate how to use QbForm in a ReactJs project, this chapter explains how to generate this component:
(this is a non-clickable picture)

"field" and "colorSwitch" are generated by QbForm.
"Submit" is a standard HTML button
To shows interactivity integration:
- when the user clicks on "colorSwitch" the background color of fiels turns to yellow
- when the user clicks on "submit", the QbForm data are displayd in an 'alert' box

Note: The whole React project is available here:
https://github.com/abaquesoftware/qbform-test-reactjs

In this chapter, we assume that we have a ReactJs/Typescript project with the following directory structure:

+-- MyProject/
      +-- src/              // this directory contains the React components
      |     +-- main.tsx
      |
      +-- website/          // this directory contains index.html + required files (js, css,... )
      |     +-- react/
      |     |     +-- react.js
      |     |     +-- react-dom.js
      |     +-- index.html
      |
      + ... (other files like package.json, webpack.config.js, README, etc. )

Step 1: Installation

Download the zip file from this page: Download
Add 'QbForm-react' directory to your project and 'QbForm' in project/website (with all the js and css files extracted from the downloaded file).
In order to manage QbForn versioning, we recommend to create symlinks from QbForm-... to QbForm-...-<version>

+-- MyProject/
      +-- QbForm-react-<version>/
      |     +-- QbForm-reactjs.js
      |     +-- QbForm-reactjs.js.map
      |     +-- QbForm-reactjs.d.ts
      |     +-- QbForm-reactjs.d.ts.map
      |
      +-- QbForm-reactjs/ -> ./QbForm-reactjs-<version>
      |
      +-- src/
      |     +-- main.tsx
      |
      +-- website/
      |     +-- 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>
      |     |
      |     +-- react/
      |     |     +-- react.js
      |     |     +-- react-dom.js
      |     +-- index.html
      |
      + ... (other files like package.json, webpack.config.js, README, etc. )

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

Edit index.php 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">
     
    <script src="./react/react.js"><script>
    <script src="./react/react-dom.js"></script>
    ...
  </head>
  ...
  </body>
</html>

Step 3: Create the app (main) and the component (MyForm)

Edit (or create) 2 files: 'main.tsx' and 'MyForm.tsx'

+-- MyProject/
      +-- QbForm-reactjs-<version>/
      +-- QbForm-reactjs/ -> ./QbForm-reactjs-<version>
      +-- src/
      |     +-- main.tsx
      |     +-- MyForm.tsx
      |
      +-- website/
      |
      + ... (other files like package.json, webpack.config.js, README, etc. )

main.tsx

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import MyForm from './MyForm'

ReactDOM.render(
      <MyForm />,
      document.getElementById('root') as Element
    )

MyForm.tsx

import * as React from 'react'
import QbForm from '../QbForm-reactjs/QbForm-reactjs'

type MyFormProps = { }
type MyFormState = { }

export default class MyForm extends React.Component<MyFormProps,MyFormState> {

  qbForm: QbForm

  static schema: Object = {
    type: 'object',
    properties: {
      field: {
        type: 'string'
      },
      colorSwitcher: {
        type: 'boolean',
        _display: 'switch',
        _frameTopText: 'Switch the field color to yellow',
        _border: "solid 2px red"
      }
    }
  }

  constructor (props: MyFormProps) {
    super(props)
    this.qbForm = new QbForm({ Schema: MyForm.schema })
    this.qbForm.setCallback('/colorSwitcher', 'onChange', this.changeFieldColor.bind(this))
  }

  changeFieldColor (elementPath: string[], cbName: string, input: object | null): boolean {
    if (input) {
      const newValue = input['newValue' as keyof typeof input]
      if (newValue === 1) {
        this.qbForm.setProperty('/field','_backgroundColor','yellow')
      } else {
        this.qbForm.setProperty('/field','_backgroundColor','#fafaf8')
      }
    }
    return true
  }

  submit (): void {
    alert(JSON.stringify(this.qbForm.getProperty('/', 'value')))
  }

  render () {
    return (
      <div style={ {
        border: 'solid 2px darkblue',
        textAlign: 'center',
        width: '400px',
        padding: '20px' } }>
        { this.qbForm.render() }
        <button onClick={this.submit.bind(this)}>Submit</button>
      </div>)
  }
}