Object data form



My example for the fundamentals in this project is the invoice. The datastructure of the invoice is well know by everybody.

mysql tables


  • docID
  • clientID
  • doctypeID
  • docnumber
  • docdate
  • accountID
  • partnernumber
  • name1
  • name2
  • title
  • firstname
  • lastname
  • street
  • country
  • code
  • city


  • itemID
  • clientID
  • docID
  • position
  • componentID
  • componentnumber
  • text1
  • quantity
  • salesunit
  • pricesingle
  • pricetotal

All tables in object data form need to have a primary key consisting of 1 field with autoincrement.

php Array


html input

The name of the form element is written like this:

javascript object


json object

The json declaration look like this:

Local formats

The internal format for the decimal point is ".", of a date is: YYYY-mm-dd. The number format and date format should regard the local formats. I use the html 5 data and number field. The format of this fields depends on the web browser. The format in the record list with tabulator is defined with placeholders:

  • GLOBALS_decimal_point
  • GLOBALS_thousands_sep
  • GLOBALS_tabulatordateformat
  • GLOBALS_tabulator_datetime_fp

The basic format is english. In BasicFunctions.php in the function mylocale() is the german format defined. All other formats have to be implemented by yourself.

php methods and data access


The object_data_form.php is the template for loading the object data form.


For the basic datadefintion have a look to Master data.

The datadefinition contains the html frontend and refers the php classes of the object. In the website you have to add stylesheet and javascript and load the object.

Example for object datadefintion[x]:

  • rightcheck
  • json/form html container
  • masterdata
    • save_mode=1
    • record=!!!
    • rightuser_create=true/false
    • rights
      • create
        • 0:public=1
        • 1:admin=1
        • 2:superuser=2
        • 3:member=3
      • read
      • update
      • delete
  • childs, array for child tables
    • child table definition 1
      • child table definition 1.1
      • child table definition 1.2
    • child table definition 2
  • js_rec_record
    • objectname 1: html template 1
    • objectname 2: html template 2

the configuration of the data access class with child classes:

Each of my tables has 1 primary key. The table, the key and the data class are the most important terms. The "child" array can contain any number of children and can be nested. Additional you must set the master key, the column which contains the parentkey. Rightmode=3 turns off the right checking in the child table. fieldname is the column name of the array.


ProcessData.php contains the following methods:

  • GetObject
  • ReadFilter
  • Save
  • Delete / Del

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)

The data access class support child classes. For each child in the datadefintion a new child class object is declared.

data access rights

Access rights can only implemented by using login and php sessions. It is activated in the datadefinition by setting "rightcheck=1". Each user in my example can be member in only 1 single usergroup. By opening the website the user will be member in the usergroup "public". For each table / object, for each data access method (create, read, update, delete) and usergroup an access check method is implemented.

0publicuser not logged in
1adminall rights in a client
2superuserall rights in the table / object
3memberlogged in user
xotherscreate by yourself
methods for access check
0no rights
1access permission in this client: table.clientID=$_SESSION[clientID]
2permission granted
3user logged in: $_SESSION[userID]<>0
100check by parent table (not implemented)
...programm your own check
access matrix, cell=method number

This are the standard rights in the data access class. Rights from the datadefinition overwrite this standard.

data access class, sql methods
sql / methodreturn value
insert (create)true / false
refer also to frontend dialog
select (read)clause
column rightuser_update: true/false
column rightuser_delete: true/false
updatetrue / false
deletetrue / false


Master data form

the list and main form ist created with the master data form (tabulator and jsonform). In jsonform the arrays are added by an htmlsnippet.

structure for array forms

The Arrays in the form have the following structure:

  • class=js_rec_container
    tags: data-rec_indexmax, data-rec_object
    • class=js_rec_head
      • click class=js_rec_new
    • class=js_rec_records
      • class=js_rec_record,
        tags: data-rec_index
        • click class=js_rec_delete
    • class=js_rec_foot

Each Array consist of 2 html snippets:

  • the array-container
  • the record

In datadefinitions.php the array-container is inserted in the datadefinition as html snippet:

The html snippet of the record is inserted in the datadefintion in the js_rec_record tree. The ARRAY_NAME correspond to the datadefinition: childs[0]fieldname=ARRAY_NAME.

json form configuration

  • form element 1
  • form element 2
  • subdata element, fieldtype: 44, class=js_rec_container
    data-rec_indexmax, data-rec_object, data-rec_nest
    • head, fieldtype: 31, class=js_rec_head flex-row
      • recordmarker, fieldtype: 31, class=recordmarker
        • click, fieldtype: 17, class=js_click_new
      • div, fieldtype: 31
        • title line or fields
    • body, "fieldtype": 31, class=js_rec_records
      • items, "fieldtype": 31, class=js_rec_record flex-row
        • recordmarker, "fieldtype": 31, class=recordmarker
          • click class=js_click_delete
        • div, "fieldtype": 31,
          • form element items[index][text]
          • form element items[index][quantity]
          • form element items[index][price]
    • foot, "fieldtype": 31, class=js_rec_foot
      • line with sum


Example for container (js_rec_container):

Example for a record (js_rec_record)

In the datadefinition of the child the array name is defined with the property "fieldname". This is the name of the array. In the example above the index field is named "index_items". The term is created like this: "index_<fieldname>". This is a placeholder for the record-index.


css basics

Let us 1st have a look on our css basics:

  • bootstrap
    • form-control for input
      • height: 34px
      • padding: 6px 12px
    • control-label
      • media>768px {padding-top: 6px;}
  • .masterdata
    • form {padding: 6px}
  • changes
    • .form-control {padding-left: 6px; padding-right: 6px}

css of an array

the array container has the following css classes:

  • rec_container
    • rec_headline
    • rec_records
    • rec_footline


I arrange the form elements of an array in a table. I use the flexbox to create this table:

javascript, masterdata.js

windows.onload / init

with the command:


the form is loaded and displayed.

Right Handling

this parameters determine the right handling:

  • form
    • masterdata/brights=true/false
    • masterdata/rightuser_create=true/false
  • record:
    • rightuser_update=true/false
    • rightuser_delete=true/false

New, initform()

The New-Button calls the function initform(). Fields and array-container are emptyed.

Display recordset

By clicking on a recordset in the record list the record is displayed in the form. In a master data form the field values are set by the recordset columns. In the object data form the array container with the records have to build up corresponding to the object structure. For a record in the array a html template is defined:

  • js_rec_record[object1]=html_file_object1
  • js_rec_record[object2]=html_file_object2
  • js_rec_record[objectx]=html_file_objectx

The object is looped by main methods to display the function: "gObject2FormBuild(...)" and the records are inserted by "addhtmlrecord(el_rec_container)":

  • gObject2FormBuild(form,el_object,obj,name)
    • Loop object: “prop“
      • If(typeof(obj[prop])=='object'))
        • object=prop / getobjectfromstr(namestr)
        • addhtmlrecord(el_rec_container)
        • gObject2FormBuild(form,el_objectsub, obj[prop],name)
      • else
        • get input element by name
        • set element.value
  • addhtmlrecord(el_rec_container)
    • inserts a new "record" el_rec_records
    • inserts IDs of the object structure
    • HtmlTemplate for object-record

new position

The control element for a new position can be placed everywhere inside the object-container. By looking up the parents elements the first "js_rec_container" is fetched:

add position

the html of the record is appended to the record container. The index of the form elements is replaced with the "data-rec_index". by nested containers all indexes are replaced.

delete position

The control element for a new position can be placed everywhere inside the object-record:


the name of the form element is divided into 2 parts:

  • name: "items[5][pricesingle]
  • name_main, "items[5]"
  • name_col:, "items.pricesingle


The plugin "jquery.serializejson.js" allows to create an javascript object from all form elements.

var obj = $("form[name='formname']").serializeJSON();

This object is send to the server and the ID of the primary key is sended back. Return '0' was not successful and the error message is displayed.

callback functions

this are the implemented callback functions:

  • dataLoad(el_form,data)
  • dataNew(el_form,data)
  • dataChange(el_form,inputfield)
  • dataSave(el_form,data)

el_form is the javascript form element, data contains the field value pairs of all form elements.