under construction



Master data form on the fly: Call it with your table and get automatically a master data form!

Generate a datadefinition and configure the list columns and the form with JSON to get it functionally and good looking!

Listing record functions:

  • List
  • Sort
  • Filter

Crud functions:

  • Create, New record
  • Read, Load record
  • Update, Save record
  • Delete record

Table requirement: primary key of the table

A table for master data has to fullfill the following rules:

  • 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!

Masterdata form on the fly

Checkout the generation of a masterdata form on the fly:

Attention, generate a table is only allowed on this demonstration page. This functionality is normally turned off!

Generate a new datadefinition for k8components

The datadefinition contains details for reading, saving and displaying a recordset. For more informations look: datadefinition.

The following steps are necessary to create your own datadefinition:

  • create your table: k8components
  • generate your datadefinition
    • here, have a look to:
      new datadefintion
    • in your developement:
  • save the datadefinition in your folder myproject with the name "k8components_111" as json file.
  • add your datadefintion in myproject/_datadefinitions.php with a datadefID.
  • look in your browser:

the container snippet myproject/k8components_111.json:


your 1st master data form: item master data

Optimize your datadefinition

This are the main parts of your datadefintion which we want to extend:

  • displaycolumn
  • displaydescription
  • headertitle
  • headerdescription
  • masterdata
    • filters_catalog
    • sql_derived
    • rights
  • tabulator
    • change visibilty
    • add column: username
  • jsonform
    • change layout to display 2 blocks
    • remove unnecessary fields

Display your definition as masterdata form in the browser:

  • index.php?page=masterdata&datadefID=111
    (you only can insert data, when you are registered and logged in!)

the container snippet myproject/k8components_111.json:

later we use this item list for administration overview

result after optimizing: optimzed item form


vertical / horizontal form

In the masterdata plugnin is this is the default configuration of jsonform:

It can be changed in the datadefinition.

This are the possible settings for formtype and formclass (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 table
  • 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, http://tabulator.info/docs/4.4/format#format-builtin)
    • date (http://tabulator.info/docs/4.1/format)

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

Try out the jsonform playground