Documentation
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:
$('#masterdata1').masterdata(datadefintion)
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
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:
localhost/get_datadefinition.php?table=k8components
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:
"formatterParams":{
"decimal":"GLOBALS_decimal_point",
"thousand":"GLOBALS_thousands_sep",
"precision":2
}
jsonform
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
Datadefinitions
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, 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