Master data form

Fundamentals

Tabulator, the datatable

the tabulator datastructure

The initialization of tabulator is done by setting the html element to the tabulator library and transfering a configuration object. The object has the following parts:

  • many different configuration parameters
  • columns: the cloumn structure describe the layout of the columns
  • data: the data of the table
  • event functions

How I use tabulator

I load the data by Ajax and use the setdata() function:

tableTab.setData(url_readfilter,data_readfilter);

All coloumns get a headerfilter. All data columns are sortable. The first column is a html-column for the delete function. The formatter property allows to insert html-data.

The data is loaded after initialization or by entering a key in the header filter. With each key a request is send to the server. The actual filter is transmitted in the filter array:

  • filter
    • [0]
      • field
      • type
      • value

The filter is build up in php and the fitting records are send back to the browser.

Tabulator website: tabulator.info

For more details about Tabulator, please have a look to:

Example for the datastructure

jsonform on github

the jsonform datastructure

The initialization of tabulator is done by setting the html element to the jsonform library and transfering a configuration object. The object has the following parts:

  • schema: list of field objects with name, type, title, ...
  • form: array of the layout description
  • event functions

jsonform, how I use it

  • horizontal form
  • label-left
  • schema
    • change the title
    • required
    • enum for select fields
    • using step for decimal fields
  • form
    • change appearance of the fields, like:
      • textarea, radio
    • sections to get multiple blocks
    • action for buttons

Attention, I modified the jsonform.js. A documentation is following later. Please use only the jsonform.js in this "download".

Look at the html of the form

The HTML result of the form can be displayed in the inspector of the browser (F12). There you also can mark and Copy / outer html. By pasting it in an editor, its all in one line. So take the htmlformatter to get a good-looking overview.

jsonform website

Please, have a look to

example for jsonform

Bootstrap, the famous css

bootstrap form, how I use it

Additional class for horizontal forms:

  • Add class .form-horizontal to the <form> element
  • Add class .control-label to all <label> elements

In regard to jsonform I am using Bootstrap 3 (v3.3.7).

more links to bootstrap forms:

example for horizonal form

Master data form, frontend and backend

Frontend, jQuery Plugin masterdata

The Master data Plugin builds up the Html structure for the master data form, joins the tabulator to the list and jsonform to the form.

You declare a "div" on your website and and call the function "displayMasterData" with the "id-selector" and the url for your form:

Backend, PHP data access

ProcessData.php

ProcessData.php gets all url-request from Javascript for the record handling and the datadefinitions.

PHP JSON: datadefinitions.php

The datadefinitions is declared in "BasicFunctions.php". You can call the datadefinition with the table name and the definition is created on the fly. The "column" part of the definition is important for the data access class.

BasicFunctions.php

The datadefinitions is declared in "BasicFunctions.php". You can call the datadefinition with the table name and the definition is created on the fly. The "column" part of the definition is important for the data access class.

PHP data access class

The data access class has the following methods:

  • __construct($datadefinition)
  • init()
  • bexist($ID)
  • bload($ID)
  • getEntries($clause)
  • bvalidate($postfields)
  • save()
  • add()
  • update()
  • delete($ID)