Master data form


Download and install

  • Download
  • unzip
  • install: copy it in your php server folder

Setting the mysql connection

Open the file "masterdata/_mysql.php and set the connection parameter to your mysql-server: server, username, password and database.

SQL for item example

Masterdata/sql contains the sql script to create the example table: k8components.

Getting started

php Example

Open the file 'masterdata_form.php' in your root path with an editor. The file looks like this:

In the head and body the links to tabbulator, jsonform, bootstrap and masterdata are set.

The Master data form is displayed in the HTML element '#masterdata1'.

The function displayMasterData(selector,url) in the script loads the datadefintion with the "datadefID=1". "ProcessData.php" manages all requests and gives back the json datastructure of the datadefinition. After getting the datadefinition the following function is called:


and the master data form is displayed in '#masterdata1'.

The datadefinition[1] is my test definition. The data is stored in the session and is running without mysql. For all other definitions, you have to connect to your mysql server.

The datadefinition[2] is the items definition. The data is stored in the database. On this definition we will have a look for the changes and improvements.


ProcessData.php gets all url-request from Javascript for the record handling and the datadefinitions. Its includes the data access class and the _prep_definition.php. Here the definition is created on the fly.

Getting the basic datadefinition of your table

Requirement: primary key of the table
  • the Primary key has to consist of an single field
    • type: int
    • autoincrement

The primary key is a hidden field in the master data form. It can not be changed!

Here on my datadefinition page you can input the datadefID or the table. The important parts of the datadefinition is displayed.

In your installation you can start the "get_datadefinition.php" in your Browser. Add the tablename in your url like this:


Copy your datadefinition in masterdata/datadefintions.php. Choose an ID like [3]. Modify it until you are satisfied with the appearance of the master data form. You will get an example of the changes for the table 'k8components' in the chapter. Details for the configuration of the listing are on the tabulator page. Details for the form are explained in jsonform.

Improving the datadefinition: k8compponents

changes in the datadefinition with green background

The following changes are made:

  • general changes
    • the titles are changed, they are not marked!
  • Tabulator
    • the width is changed in the columns: componentnumber and salesunit
    • all column with exception of: componentnumber, text1 and salesunit are deleted
    • the column price is added, the formatter money allows to specify the "precision" (decimals)
  • jsonform
    • componentnumber: a pattern is added and it's an required field
    • text1: it's an required field
    • category, baseunit, salesunit and vatclass get an enum-array (enumeration)
    • price get the step property for the formatting of 2 decimals
    • form: this part was appended because the fields are displayed in 2 blocks. The textdimensions becomes a textarea.

Regard the locales

the relevant locale settings are:

  • decimal point
  • thousands separator
  • date format

The locale settings for html5 input fields depend on the web browser installation. The listing of tabulator configuration for decimal point and for the date need to be programmed by the php locale functions. Therefore the following placehloders are intended:

  • GLOBALS_decimal_point
  • GLOBALS_thousands_sep
  • GLOBALS_tabulatordateformat

Set the placeholders into the formatterParams of tabulator:



vertical / horizontal form

the formtype and the formclass are changend in 'jsonform_conf' (both need to be defined):

  • 0, form-inline
  • 1, form-vertical
  • 2, form-horizontal, default-setting in masterdata.js

by using horizontal form the following properties have to be set:

  • labelHtmlClass=label-control col-sm-3
    • add "label-left", if wished
  • fieldWrapClass=col-sm-9

form with 2 or more columns

If you like to have 2 blocks, you have to use the "type":"section" or "fieldset" in the "form"-area, example with "section":

form definition with 2 blocks

CSS, Changing the appearance

Choose the right CSS file for the area which you like to change:

  • masterdata for headline and footline
  • tabulator for the listing
  • jsonform, bootstrap for the form

Take the file names please out of our code example at the top!

The following elements are styled in masterdata.css:

  • the headline at the top of the form
  • the selected row in the listing
  • the handle between listing and form
  • jsonform, the bottom-margin of the input fields
  • the footline at the bottom of the form


Example of a datadefinition

Attention Json, please regard to enclose your collection keys in quotes. So you can easily check your json datastructure in jsonlint!

Signification of the properties:

  • name: displayed in the form headline
  • table: if columns is not defined, the table structure is read and stored in the columns array
  • key: Primary key field of the thable
  • objectclass: name of the data access class
  • requiredfile: php file of the objectclass
  • masterdata: url for the data access
  • columns: array of the table fields. The "column" part of the definition is important for the data access class. Only this fields are saved to the database
  • tabulator: definition for the recordset list in the header
    please change the listing here!
  • jsonform: definition for the fields in the form
    please change the form here!
  • jsonform_conf: configuration of vertical and horizontal form

tabulator, used properties:

  • ajaxFiltering":true
  • "height":205
  • "layout"=>"fitColumns", to spread the columns along the whole list width
  • columns
    • name
    • title
    • headerfilter (true ,false)
    • headerSort (default:true, false)
    • width (in px)
    • align (left|center|right)
    • formatter: money, date
    • formatterparams,
    • date (

jsonform, used schema properties:

  • name
  • title
  • type (string, number, integer, boolean, array, object)
  • step ("0.01" allows 2 decimal places)
  • required
  • maxLength
  • enum (for select,['value1','value2'])
  • readOnly
  • default