QbForm: Generate forms and tables from JSON schema

Let's take an example !

To illustrate how to use QbForm in a VuetJs 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 VueJs project is available here:
https://github.com/abaquesoftware/qbform-test-vuejs

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

+-- MyProject/
      +-- src/              // this directory contains the VueJs components
      |     +-- App.vue
      |
      +-- public/          // this directory contains index.html + required files (js, css,... )
      |     +-- index.html
      |
      + ... (other files like package.json, 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/
      +-- src/
      |     +-- main.tsx
      |
      +-- public/
      |     +-- 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>
      |     |
      |     +-- QbForm-vuejs-<version>/
      |     |     +-- QbForm-vuejs.js
      |     |     +-- QbForm-vuejs.min.js
      |     +-- QbForm-vuejs/ -> ./QbForm-vuejs-<version>
      |     |
      |     +-- index.html
      |
      + ... (other files like package.json, 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)

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <!-- VueJs -->
    <script src="https://unpkg.com/vue"></script>
    <!-- QbForm -->
    <script src='./QbForm-js/QbForm.js'></script>
    <link rel="stylesheet" href="./QbForm-js/QbForm-default.css">
    <link rel="stylesheet" href="./QbForm-js/QbForm-compact.css">
    <link rel="stylesheet" href="./QbForm-js/QbForm-dark.css">
    <!-- QbForm-table -->
    <script src='./QbForm-js-table/QbForm-table.js'></script>
    <link rel="stylesheet" href="./QbForm-js-table/QbForm-table-default.css">
    <link rel="stylesheet" href="./QbForm-js-table/QbForm-table-compact.css">
    <link rel="stylesheet" href="./QbForm-js-table/QbForm-table-dark.css"> 
    <!-- QbForm-vuejs -->
    <script src='./QbForm-vuejs/QbForm-vuejs.js'></script>
    ...
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Step 3: Create the App

Edit (or create) 'src/App.vue'

+-- MyProject/
      +-- src/
      |     +-- App.vue
      |
      +-- public/
      |
      + ... (other files like package.json, README, etc. )

App.vue

<template>
  <div id="app">
    <qb-form-vuejs ref="MyForm"
      schema='{
          "type": "object",
          "properties": {
            "field": { "type": "string" },
            "colorSwitcher": {
              "type": "boolean",
              "_display": "switch",
              "_frameTopText": "Switch the field color to yellow"
            }
          }
        }
      ' ></qb-form-vuejs>
     <button @click="submit">Submit</button>

  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

interface IComponent {
  vueComponent: any
}

@Component({
  components: {
  }
})

export default class App extends Vue {

  mounted () {
    const vueElement: any = this.$refs.MyForm as any
    vueElement.vueComponent.setCallback("/colorSwitcher", "onChange", this.changeFieldColor)
  }

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

  submit() {
    const vueElement: any = this.$refs.MyForm as any
    alert( JSON.stringify(vueElement.vueComponent.getProperty("/", "value")) )
  }

}
</script>

<style>
#app {
  border: 2px solid darkblue;
  text-align: center;
  width: 400px;
  padding: 20px;
}
</style>