K8 Web Kit
Download Web Kit bootstrap 5

Examples Master Data

Docu

Master Data, Listing and Form

Docu

To edit data, please login.

The master data form consist out of 2 sections which are created by the functionality of a JavaScript / jQuery library:

  • the listing with the tabulator library
  • the form with the jsonform library

You can checkout the functionality without data access restriction. The changes of the persons list are only saved in your session.

An other data access class for MySQL checks the rights for create, read, update and delete.

HTML and JavaScript

Declare the master data element

The datadefinition is read by PHP and tranfsrered to JavaScript with the function: getDatadefinition(datadefID). The id "masterdata" is the container for the master data form. In JavaScript the variable "settings1" is filled with the datadefinition "1". In the next line the plugin "masterdata" is joined to the id="masterdata" for displaying the master data form. With the masterdata plugin the list is creaed by tabulator and the form is generated by jsonform.

Master Data, Form only

Docu

the "Form only" can be implented in a page or called on a new page. The keyvalue has to be set. if the keyvalue=0, then a new record is initialized, otherwise the record ist displayed. Depending on the edittype the buttons Save and Cancel are set to different actions.

Together with a catalog element, its allows different manners of editing the data, edittype:

  • 0 no controls
  • 1 insert with reload
  • 2 overlay
  • 3 innerHTML
  • 4 new tab
  • 5 new window
  • 6 line edit

HTML and JavaScript

Introduction

The id="masterdata" is the container for the master data form. The variable "settings2" is filled with the datadefinition. In the next line the plugin "masterdata" is set to the element id="masterdata".

Keyvalue is the main parameter:

  • keyvaule not set or =0: New record
  • keyvaule is set: Edit the record

If a new window is called for edit the parameter returnflag is set: returnflag=edittype.

Master Data, Complex Objects

Docu

A master data form with a complex object allows you to create forms like invoices, containig the invoice header and an items array.

Thanks to the data access class and the datadefinition the CRUD functions are completly supported.

The list is displayed by tabulator. The form is created by jsonform with a htmlsnippet for the items array. The items part has to be defined with html by your own.

tcpdf

Check out the PDF in the dropdown menu!

HTML and JavaScript

differences in the datadefinition

The datadefinition is extended in this sections:

In the "masterdata/_datadefintion.php the html is loaded into the datadefintion:

Look for more examples at:

Additional scripts for the items table

jsonform is extended with HTML to display the special datastructure of an objects. For the items the HTML-container and HTML-record are created. For the calculation the JavaScript file: object_invoice is added.

the container snippet kitsamples/object_invoice_container.html:

the recordset snippet kitsamples/object_invoice_record.html:

object_invoice_3.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.
The javascritpt file: object_invoice_3.js:

The calculation

this are the functions for the calculation:

  • an item line:
    • calc(form,namestr,name)
  • the sum for the "pricetotal":
    • calculateSum(form,'items','pricetotal')

it has to be implemented in this events:

  • changement of quantity or price
    • $("*").on("change",...)
  • insert of a new item with function:
    • insertComponent(obj)
  • deletetion of an item line by call back:
    • masterdata.ondelete=function(){...}

Master Detail

Docu

The customer form is extended by an invoice list. By a click on the customer line the invoices are listed too. This example consist out of 2 elements:

  • master data element
  • listing element

Both are connedted by a call back function.

Initializing datadefinition and appending a listing in Detail area

Using call back functions

First the datadefinitions "settings_invoices" and "settings_customer" are initialized.

Master: settings_customer, here are 2 callback functions used:

  • dataLoad
  • dataNew

Both callback function call the function "setInvoices".

Detail: settings_invoices

the function SetArrayAll(object,property,value) is used to turn off the headerfilter.

setInvoices(clause)

setInvoices appends a container to the bottom of the masterform. This conainer is empty by a new record. The key "accountID" is transfered as SQL-clause. When a record is selected. The invoice list will be filled.