Object Data Exercise

Invoices are well known. Everybody gets invoices; many companies and independents write invoices. This is only an easy example to explain the master detail form; so some necessary fields for an invoice are missing. The data is stored in 2 tables:

• Invoice-Head: k8documents
• Positions: k8documentitems

create the tables

Create the tables with: mysql/object_invoice.sql

Preparations

Datadefinition 33 defines this invoice. The steps to create this exercise are the following:

Create the projectfolder: kitsamples

In the masterdata/_init.php, property=domain_datadeffiles add _datadefinition_kit.php:

... $GLOBALS['domain_datadeffiles']=array("myproject/_datadefinition_myproject.php","kitsamples/_datadefinition_kit.php"); ...

In the kitsamples/_datadefinition_kit.php the html snippets are loaded into the datadefintion:

<?php switch($datadefID){ case 33: $temp=gsread_file(str_repeat('../',$GLOBALS['script_depth']).'kitsamples/object_invoice_33.json'); $datadefinitions[$datadefID]=json_decode(gsReplaceFromArray($ph_datadef, $temp),true); $datadefinitions[$datadefID]['jsonform']['form'][11]['value']=gsread_file(str_repeat('../',$GLOBALS['script_depth']).'kitsamples/object_invoice_container.html'); $datadefinitions[$datadefID]['js_rec_record']['items']=gsread_file(str_repeat('../',$GLOBALS['script_depth']).'kitsamples/object_invoice_record_33.html'); }

html templates for the form

For the main fields I use jsonform. For the child records I need 2 html snippets:

• container snippet
• record snippet

the container snippet kitsamples/object_invoice_container.html:

the recordset snippet kitsamples/object_invoice_record_33.html:

css file for items elements

The main fields are formatted with bootstrap. The CSS cares for this:

• min height for container
• headline and footline
• flexbox for the items table
• input fields like bootstrap with smaller padding
• position for sum

css/object_invoice.css:

JavaScript for calculation

js/object_invoice_33.js
In each line the total of quantity and price has to be calculated. The Sum of quantity and price has to be displayed in the document foot.
Here for the javascritpt file: object_invoice_33.js is created. insert article

the datadefinition

kitsamples/object_invoice_33.json

Special settings in the datadefinition:

"masterdata":{ "object_mode":1, "add_empty_rec":1, ... }, "jsonform":{ ... "form":[ "*", { "type": "htmlsnippet", "value": "placeholder for the items container: object_invoice_container.html" } ] }, "childs":[ /* this definition loads and save the items */ { "objectclass":"data_accessclass", "table": "k8documentitems", "key":"itemID", "fieldname":"items", "rightcheck":0, "masterkey":"docID" } ]

PDF

kitsamples/pdf_invoice.json

localhost: index.php?datadefID=33&page=masterdata

check it out: example invoice

this is the table structure:

• er_customer
  • er_employee
  • er_deliveryaddress

create the tables

Create the tables with: mysql/object_customer.sql

datadefinition

datadefID=20

kitsamples/object_customer.json

html snippet for the container

kitsamples/object_customer_container.html

html snippet for the arrays

kitsamples/object_customer_employee_record.html

kitsamples/object_customer_da_record.html

CSS

Formatting for the arrays (css/object_areas.css):

localhost: index.php?datadefID=20&page=masterdata

check it out: example customer

Our invoice example will be extended with 2 searchboxes:

• customer, datadefID=20
• item, datadefID=k8components

Changes

Attention, instead of using datadefinition 33 we use datadefinition 3.

in datadefinition kitsamples/object_invoice_3.json

define the datadefinition for customer and items as "settingsadditional"

"settingssdditional":["k8components","20"],

in the section jsonform.form exchange '"partnernumber",' with:

{ "type":"htmlsnippet", "value": "<div class='form-group'> <label class='control-label col-sm-3 label-left' for='partnernumber'>partnernumber:</label> <div class='col-sm-9'> <div class='js_searchbox_group input-group' data-fieldlist='partnernumber=accountnumber,name1,name2,street,country,code,city'> <span class='js_rec_control input-group-addon k8-input-group-addon' onclick='searchBox_delete(this);'><i class='glyphicon glyphicon-remove'></i></span> <input type='text' class='form-control' id='partnernumber' name='partnernumber'> <input type='hidden' name='accountID'> <span class='js_rec_control input-group-addon k8-input-group-addon' onclick='searchBox_open(this,20);'><i class='glyphicon glyphicon-search'></i></span> </div> </div> </div>" },

in HTML kitsamples/object_invoice_record_33.html

exchange the container of componentnumber with the input as input-group with the magnifying glass:

<div class="k8-flex-100 input-group js_searchbox_group"><!--classwrap--> <input type="text" class="k8-form-control-left" name="items[index_items][componentnumber]"> <input type="hidden" name="items[index_items][componentID]"> <!--<img class="js_rec_control" src="masterdata/pic/icon_search.png" onclick="item_search(this);">--> <span class="js_rec_control input-group-addon k8-input-group-small k8-input-group-addon k8-flex-glyph" onclick="item_search(this);"><i class="glyphicon glyphicon-search"></i></span> </div>

in Javascript js/object_invoice_33.js

function onchange(): add the 2 fields in the switch statement:

case 'partnernumber': searchbox_search(el,20,undefined,settings20); break; case 'items.componentnumber': searchbox_search(el,"k8components",insertComponent,settingsk8components); break;

item_search and insertComponent

function item_search(el){ // GLOBALS_script_depth if(!$(el).hasClass('js_disabled')){ // getting parent record var form=$(el).parents('form')[0]; var el_rec_record=$(el).parents('.js_rec_record')[0]; var index=Number(el_rec_record.dataset.rec_index); var url='../'.repeat(GLOBALS_script_depth)+'masterdata/ProcessData.php?process_action=GetObject&datadefID=2'; var obj={"function_name":"insertComponent","index":index,"form":form}; displaySearchBox(url,obj,{"masterdata":{"script_depth":GLOBALS_script_depth}}); } } function insertComponent(obj){ var namestr="items["+obj.js_return.index+"]"; var form=obj.js_return.form; var name="items.pricesingle"; form.elements.namedItem(namestr+'[position]').value=obj.js_return.index+1; form.elements.namedItem(namestr+'[componentID]').value=obj.data.componentID; form.elements.namedItem(namestr+'[componentnumber]').value=obj.data.componentnumber; form.elements.namedItem(namestr+'[text1]').value=obj.data.text1; form.elements.namedItem(namestr+'[quantity]').value=1; form.elements.namedItem(namestr+'[salesunit]').value=obj.data.salesunit; form.elements.namedItem(namestr+'[pricesingle]').value=obj.data.price; onchange(form,namestr,name); }

new Files

kitsamples/object_invoice_3.json

the recordset snippet kitsamples/object_invoice_record.html:

js/object_invoice_3.js

localhost: index.php?datadefID=3&page=masterdata

check it out: example invoice searchbox

the area objext consist of 4 tables:

• TPprojects
• TPareas
• TPsurfaces
• TPpoints

create the tables

Create the tables with: mysql/object_area.sql

datadefinition

datadefID=10

object_area.json

the json configuration:

html snippet for the container

the following html snippets are necessary:

• object_area_container.html
• object_area_record.html
• object_area_surface_record.html
• object_area_point_record.html

kitsamples/object_area_container.html

html snippet for the arrays

kitsamples/object_area_record.html

kitsamples/object_area_surface_record.html

kitsamples/object_area_point_record.html

css file for items elements

Formatting for the arrays (css/object_areas.css):