Masterdata

Connect a master data element to your table and get automatically a master data form!

Configure the list columns and the form with JSON to get it functionally and good looking!

The data access rights are easily configured in the backend and displayed in the master data form.

User manual

Listing record functions:

List
Sort
Filter

Crud functions:

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

Export functions:

CSV export
Excel export
PEF export

Configuration functions:

Column order
Column width
Column selection
Data read limit

The form is devided into two parts. In the top is the record list with filter and sorting. In the bottom the record is displayed and can be edited in the form. You can drag the line between to enlarge or shrink the listing.

Listing Functions

Sort

Actually you can sort the displayed records. A callback for the server will be installed later.

Header filter

this are the filters:

like (default)
=
>= or >
<= or <
!=

Column Order

With drap & drop in the column header you can move the colum to the desired position.

Column Width

Set the cursor between the columns. The Cursor changes to: <->By drag & drop you can adjust the column width.

List

Each record ist displayed in 1 line. The columns are defined in the datadefintion of tabulator. The following symbols display the rights of the user:

edit
delete
blocked

Functions for the form

New

New empties the form. In future default values for the fields will be supported.

Edit (by Click in the List)

By clicking on the line the recordset is displayed in the form and can be edited. Independent from the displayed columns in tabulator the whole record already loaded in the row. A new load from the server is not necessary.

Cancel

Cancel undos the changes and displays the original record.

Save

Before saving the data a validation by jsonform is done. If its failed you first have to correct the values. In future the data-access-class will do a validation check for the fieldtype and the user rights. Other checks have to be progammed by yourself.

Delete (X click in the List)

The user rights are implemented. If the ban is displayed, deletion is not allowed. After a confirmation question, the record will be deleted. The form displays an empty record.

Dropdown Menu

Options:

utf-8 CSV Export
Excel Export
PDF Export
Set read limit
Choose columns
Save configuration
Reset configuration
Multi select, set on

Utf-8 CSV Export, Excel Export, PDF Export

You can download the displayed data in the desired format. If not all lines are displayed, please change the record read limit.

Set read limit

You can change the record read limit to an arbitrary value. The read limit is valid until you load a new page.

Choose columns

The Choose colmns dialog allows you to choose the displayed columns.

Save configuration

With "Save configuration" you save (only available when loogged in):

the choosen columns, the order of the columns and the the column width.
the filter
the height of the tabulator list

Reset configuration

(only available when loogged in)

By reseting the configuration the default columns, its order and with is set to default.

Multi select on

For some special functions the selection of 1 line can be changed to multi line selection.

Developer

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 a single field
- INT, autoincrement
creatorID (by using the data access rights )
- INT

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:

Customer table on the fly:
index.php?table=er_customer&page=masterdata
Item table on the fly:
index.php?table=k8components&page=masterdata

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

Open data definition as page

you can open the datadefintion as:

masterdata form:
index.php?datadefID=customer&page=masterdata
list:
index.php?datadefID=customer&page=list
form:
index.php?datadefID=customer&page=form

Create a data definition out of your table

The data definition contains details for reading, saving and displaying a recordset.

The following steps are necessary to create your own data definition:

er_customer, if not exist create it with "k8examples.sql"
generate your data definition
- table: er_customer
- datadefID: mycustomer
- get_data definition.php?datadefID=mycustomer&table=er_customer
folder <myproject> create a folder: mycustomer
save the data definition in your folder mycustomer with the name "mycustomer" as json file.
look in your browser:
index.php?datadefID=mycustomer&page=masterdata

kitsamples/customerbasic/customerbasic.json:

Place a masterdata plugin element on your page

The masterdata plugin offers this elements:

master data form
list with optional edit functions
form only

To add an edit function to the list, please look for the "edittype" beneath.

Master data

List (tabulator)

Form only

The return values of "masterdata" are:

Datadefinition

Properties and sections:

name: the displayed name
key: necessary for edit
rightcheck: with RBAC, look to the explanation
columns: the definition of the table columns
masterdata: the main parameters
tabulator: the list, please have a look to: tabulator.info
k8form: the form, please have a look to: k8form
html: the html snippets
data: for form only

To change the look of your masterdata form, please configure tabulator (list at the top) and k8form (form at the bottom)

JSON structure:

key

The key column is used for edit functions. If the key value is zero, it's a new record.

rightcheck=1

The backend adds automatically:

settings.masterdata:

right_usercreate: "0" or "1"

recordset

right_userupdate: "0" or "1"
right_userdelete: "0" or "1"

add JavaScript to your datadefinition (optional)

add JavaScript files:

head[]

This tags are added in the head of the web page. Here you can declare additional libraries or files.

head_end[]

The tags are placed behind the declaration of your datadefinition. Here you can add JavaScript function to your datadefinition.

foot[]

This are inserted after your web page is displayed. Use it to add JavaScript events to HTML tag.

foot_nodefault: true/false

Normally the "js/example.js is called to add your defined element to the web page. If "foot[]" is declared, this file is not called. If you still want to call example.js, please set:

foot_nodefault: false

tabulator, basics

This is a part of the customer tabulator definition (string columns):

The most often used column properties are:

title - Required This is the title that will be displayed in the header for this column
field - Required (not required in icon/button columns) this is the key for this column in the data array
headerfilter - true for more details look in the tabulator documentation
visible - (boolean, default - true) determines if the column is visible
hozAlign - sets the horizontal text alignment for this column (left|center|right)
headerHozAlign - sets the horizontal text alignment for this columns header title (left|center|right)
width - sets the width of this column, this can be set in pixels or as a percentage of total table width (if not set the system will determine the best)
formatter - Tabulator offers a wide range of formatters for strings, numbers, dates, ...
formatterParams - additional parameters you can pass to the formatter

For more details look to:

tabulator

Columns can easily removed or added. if desired you change the order of the columns. If you extend the sql-statement, you can easily add the columns here.

tabulator, local formatting

Example for date and number:

The formatting of dates and numbers depends on the settings of the clients web browser. K8 Web Kit reads this on the first page request and sets it in the session variables. This are the corresponding JavaScript variables:

GLOBALS_decimal_point
GLOBALS_thousands_sep
GLOBALS_tabulatordateformat
GLOBALS_tabulatordatetimeformat
GLOBALS_tabulatortimeformat

The date and time formats follow the luxon syntax, date time format:

'dd.MM.yyyy HH:mm'

tabulator, initial sort

example for a status field:

The basic sort declaration can also be made in masterdata sql_orderby. When it's made in tabulator, the sort icon is bold.

sortMode

Without a declaration the sorting is processed local:

local (default)
remote, by each sort the sort array is added to the data request:
- sort[0][field]=name1&sort[0][dir]=asc

initialSort[]

column
dir:
- asc
- desc

tabulator, select

example for a status field:

headerFilter: list

This defines a select field in the header filter.

headerFilterParams

The headeFilterParams define the values, which can be selected.

formatter:#function#k8tabulatorformatter

The k8tabulatorformatter allows to define values, which are displayed with the "text".

formatterParams

The value list contains the "text" property, which is displayed.

tabulator, add a control button to the row

add a button column to your JavaScript file:

formatter()

With the formatter function the HTML is defined. It's a button with the bootstrap icon: "bi-display".

cellClick()

By a click on the buttion this function is executed

With cell.getData() the data of the row is set to "dat".
"window.location.href" open the given url.
The query parameter "displayvalue" is set to "dat.coursenumber".

k8form

This is an part of the customer k8form definition:

{
  "k8form": {
      "selector": ".js_dataform",
      "templatetype": "masterform",
      "fields": [
          {
              "name": "accountID",
              "type": "hidden",
              "label": "accountID"
          },
          {
              "name": "accountnumber",
              "type": "text",
              "label": "accountnumber",
              "required":true,
              "maxLength": 50
          },
          {
              "name": "name1",
              "type": "text",
              "label": "name1",
              "required":true,
              "maxLength": 50
          },
          {
              "name": "name2",
              "type": "text",
              "label": "name2",
              "maxLength": 50
          },
          {
              "name": "street",
              "type": "text",
              "label": "street",
              "maxLength": 50
          },
           {
              "name": "country",
              "tagName": "select",
              "label": "country",
              "options": ["","DE","IT","FR"]
          },
          {
            "inputgroup":
            {
              "label": "code / city",
              "fields":[
              {
                  "name": "code",
                  "fieldclass":"form-control k8-flex-100-fix",
                  "type": "text",
                  "label": "code",
                  "maxLength": 10
              },
              {
                  "name": "city",
                  "type": "text",
                  "label": "city",
                  "fieldclass":"form-control k8-flex-300",
                  "maxLength": 50
                }
              ]
            }
          },
          {
              "name": "phone",
              "type": "text",
              "label": "phone",
              "maxLength": 50
          },
          {
              "name": "mobile",
              "type": "text",
              "label": "mobile",
              "maxLength": 50
          },
          {
              "name": "email",
              "type": "email",
              "label": "email",
              "maxLength": 250
          },
          {
              "name": "website",
              "type": "text",
              "label": "website",
              "maxLength": 100
          },
          {
              "name": "categoryID",
              "tagName": "select",
              "label": "categoryID",
              "dataoptions":{
                "datadefID":"k8groups",
                "mode":1,
                "emptytext":"standard",
                "defaultclause":"type='customer_group'"
              }
          },
          {
              "name": "representativeID",
              "type": "hidden",
              "label": "representativeID"
          },
          {
            "name": "representativename",
            "type": "text",
            "label": "representative",
            "attributes":{
              "list": "representativename_datalist",
              "autocomplete": "OFF"
            },
            "datalist":{
              "datadefID":"k8searchuser",
              "IDfield":"representativeID",
              "onlyoptions":true
            }
          }
      ]
  }
}

The most often used column properties are:

tagName - default: input This is the tag of the form element. Other supported tags are:
- select
- textarea
- button
type - for input, button most of the HTML5 input types are supported
name - Required This is the name of the database column
label - the label of the form element
decimals - the decimals by type=number
attributes{} - additional attributes for the field
- maxlength - the maximum allowed charaters of the field
required - defines if an form element is required
disabled - defines if an form element is disabled
inputgroup - declares an inputgroup, a bootstrap 5 element, consist multiple elements
options - for select defines the options of a select element

For more details look to:

k8form

Thanks to the container property of k8form HTML layout can be managed and fieldsets or multiple block can be displayed.

k8form, 2 blocks

masterdata/templates/datadefinition_k8form_2blocks.json:

Bootstrap needs 3 containers to create 2 blocks:

class: row
- class: col-sm-6
- class: col-sm-6

k8form, datalist (example: employee)

datalist example for employee "address":

"Address", name: "gender"

This field allows any entry to address the contact person. The "list" attribute points to a "datalist". In the data list you will find suggestions for field input.

"datalist", id: "gender_datalist"

Here are the suggestions for the field input listed. This "tag" is not displayed in the form. It has no label.

So the "fieldwraptemplate" only consist out of the "fieldelement". It also has no "class" -> the fieldclass is set to empty.

The "id" is same to gender attribute "list".

The "tagName" is "datalist".

In the "innerHTML" the options (list entries) are defined as HTML elements.

k8form, select

example for a status field:

tagName

To select values out of an option list, you have have to declace a HTML tag: "select".

options

The options list allows you to define value pairs (value, text) to select from. If the text should be saved in field and table, you don't need a value.

k8form, inputgroup

Datadefinition: the inputgroup allows to put 2 or more elements in 1 line:

The k8form definition determines the layout of the inputgroup.

The inputgroup in this examples consist out of 2 fields:

HTML for click
- class: js-action-item
- innerHTML: @
- data-action: your action
field: tagname

JavaScript for the action:

JavaScript determines the action to be performed.

The programm code is placed into the call back cbCreateStructure:

add an event listener on click to all elements with the class js-action-item
- variable action is set to the dataset action
- variable dat_form[] contains all values of the form elements
- write your program code in the right case of your switch statement

k8form, button group

Datadefinition: the button group allows severtal buttons in a row:

{
  "k8form":{
    "fields":[
      "inputgroup":{
        "groupclass":"text-start",
        "fields":[
          {
            "tagName":"button",
            "fieldclass":"btn btn-outline-dark js-action-item me-3",
            "attributes":{
              "type":"button",
              "data-action":"attributes",
              "data-bs-toggle":"tooltip","data-bs-placement":"bottom","title":"Attributes"
            },
            "innerHTML":"<span class=\"bi-card-list\">"
          },
          {
            "tagName":"button",
            "fieldclass":"btn btn-outline-dark js-action-item me-3",
            "attributes":{
              "type":"button",
              "data-action":"options",
              "data-bs-toggle":"tooltip","data-bs-placement":"bottom","title":"Options"
            },
            "innerHTML":"<span class=\"bi-list-task\">"
          },
          {
            "tagName":"button",
            "fieldclass":"btn btn-outline-dark js-action-item me-3",
            "attributes":{
              "type":"button",
              "data-action":"datalist_special",
              "data-bs-toggle":"tooltip","data-bs-placement":"bottom","title":"Datalist special"
            },
            "innerHTML":"<span class=\"bi-list\">"
          }
        ] 
      }
    ]
  }
}

The buttons in the inputgroup can be adjusted with the class:

text-start: at the left (attention: margin to the right)
text-end: at the right (attention: margin to the left)

Without the class input-group the buttons are separated from each other.

The button group use the same properties like inputgroup:

class: js-action-item
innerHTML: different icons
data-action: your action

JavaScript for the action is same like by the inputgroup above.

k8form, dropdown

Datadefinition: the dropdown is part of an inputgroup, first the dropdown and right beside the input element:

The k8form definition determines the layout and dropdown items.

The inputgroup consist out of 2 fields:

HTML element for the drop down
input for the customer name

The htmlelement is set to "dropdown". The property for the data structure is "dropdown". The k8form generator creates the necessary HTML for it.

The main properties of the dropdown are:

button: styling of the button
items[]: array with the items:
- value
- label

The HTML tag for an item:

class="dropdown-item"
data-value="edit"

JavaScript can process the clicked element well with class and data-value.

JavaScript for the dropdown-item:

JavaScript determines the action to be performed.

This is the programm:

Please specify your form in the first line.
- To all elements with the class dropdown-item an event listener on click is added.
  - In the event the data-value of the target element is set to the variable: action.
    - In the switch statement the specific programm code for the icon is processed.

In the edit case the url is set. If a customer (accountname) is filled out, the query parameters are added and a new tab is opened. The new tab will show the customer record in the master data form.

datadefinition for "checkbox"

columns:

Example for active

Consider copying and pasting the column names to change them!

In the database a checkbox is saved with the values: 0 / 1 for false / true.

"mytype": "BOOLEAN"

Setting "mytype" to boolean is important for filtering and building the clause.

tabulator:

headerfilter

headerfilter and headerfilterParams define how the headerfilter is displayed and processed.

formatter

formatter and fomatterParams define the representation in the line.

k8form:

checkbox

The label is displayed behind the checkbox. The value is important; it has to be: "1".

masterdata, default values:

defaultvalues

The default value by a new record is in this example "1".

masterdata

{
  masterdata:{
    "notabulator":false,    /* don't displays tabulator list */
    "bnoform:false,         /* don't displays the form */
    "defaultvalues":{       /* object for default values */
      "column":"value"
    },
    "keyvalue":"",          /* set the value for the key column (form only)*/
    "clause":""             /* sets an additional clause for the SQL Satement */
    "url_new":  "index.php?page=form&page_mode=2&datadefID="+datadefID,
    "url_edit": "index.php?page=form&page_mode=2&process_action=Edit&datadefID="+datadefID,
    "url_load": "masterdata\/ProcessData.php?process_action=Load&datadefID="+datadefID,
    "url_save": "masterdata\/ProcessData.php?process_action=Save&datadefID="+datadefID,
    "url_del":  "masterdata\/ProcessData.php?&process_action=Del&datadefID="+datadefID,
    "url_readfilter": "masterdata\/ProcessData.php",
    "data_readfilter": {
        "datadefID": datadefID,
        "process_action": "ReadFilter"
        }
    },
    "menuleft_options":true,/* enables the dropdown menu at the left */
    "menuleftobj":{}        /* additional elements for the menu */
    "bGETfilters":true,     /* the filters are set out of the url */
    "bwithdirty":true,      /* adds the dirty symbol */
    "init_after_save":true, /* inits the form after save /not by auto_save */
    "auto_save":false,      /* for complex objects, by adding a new line */
    "window_mode":0,        /* is set automatically by new edit tabs */
    "object_mode":0 or 1    /* 0=normal 1=complex object like invoice */
    "edittype":8,           /* please have a look to the edittypes */
    "formmode":3,           /* 1=html, 3=k8form (default) */
    "message_position":4,   /* 0 footline of form, 1 button line, 2 line above buttons, 3 in the last window line, 4 page overlay */
    "bresize":true,         /* adds a resizer at the bottom of tabulator */
    "upload":{
      "enabled":true,       /* adds an upload and gallery beneath the form */
      "singleimage":true or false
    }
  }
}

defaultvalues

The defaultvalues allows to set default values for a new record in the form.

clause

The clause allows to filter the data.

url_...

Ajax
- load
- read_filter
- save
- del
Dialog
- new
- edit
- master
- detail

edittype

0 no controls
1 insert with reload (only catalog plugin)
2 innerHTML (form_selector)
3 overlay
4 new tab
5 new window
6 own line in catalog template (only catalog plugin)
7 own line with special template (only catalog plugin)
8 master data form
9 link in this window

SQL statement

sql_derived example:

Please write the sql_statement or sql_derived in the datadefinition in one line (JSON compliant)!
The "sql_derived" property is important by using the view with tabulator, otherwise the property "sql_statement" should be used because it's a little bit faster.

The placeholder are:

§select: additional fields are inserted:
- rightuser_update
- rightuser_delete
'' as k8select: same §select
§dateformat: the SQL date string is inserted
WHERE 1=1: Where condition, here the "WHERE ".$clause is inserted
§userID: $_SESSION['userID']
§clientID: $_SESSION['clientID']
§companyID: $_SESSION['companyID']
§domain_language: $GLOBALS['domain_language']

Alternatively the include "getEntries_sql" can be used to write the statement direct in php.

the column array is extended by additional columns:

columns

If the sql statement is extended with new columns, the data type needs to be declared, to get a correct filtering. Without declaration the columns are treated like 'VARCHAR'.

In the example above, the column note is added. It is treated as boolean field. The fieldname is set; the "Field" column is only set for table columns.

Call back functions

Extend the datadefintitions with call back functions:

if(!settings.masterdata.cbCreateStructure)settings.masterdata.cbCreateStructure=[];
settings.masterdata.cbCreateStructure.push(function(options){
  var el_md=options.el_md;
});
if(!settings.masterdata.cbBeforeFilter)settings.masterdata.cbMenuleft=[];
settings.masterdata.cbBeforeFilter.push(function(options){
  //options.settings
  //options.dat_filter
});
if(!settings.masterdata.cbMenuleft)settings.masterdata.cbMenuleft=[];
settings.masterdata.cbMenuleft.push(function(options){
  var el_md=options.el_md, e=options.e, row_actual=options.row_actual;
  var settings=options.settings,selected=options.selected;
  //options.display_record
});
if(!settings.masterdata.cbBeforeNew)settings.masterdata.cbBeforeNew=[];
settings.masterdata.cbBeforeNew.push(function(options){
  var el_md=options.el_md,dat=options.dat;
});
if(!settings.masterdata.cbAfterNew)settings.masterdata.cbAfterNew=[];
settings.masterdata.cbAfterNew.push(function(options){
  var el_md=options.el_md,dat=options.dat;
});
if(!settings.masterdata.cbBeforeLoad)settings.masterdata.cbBeforeLoad=[];
settings.masterdata.cbBeforeLoad.push(function(options){
  var settings=options.settings,el_md=options.el_md,dat=options.dat;
});
if(!settings.masterdata.cbAfterLoad)settings.masterdata.cbAfterLoad=[];
settings.masterdata.cbAfterLoad.push(function(options){
  var settings=options.settings,el_md=options.el_md,dat=options.dat;
});
if(!settings.masterdata.cbBeforeDelete)settings.masterdata.cbBeforeDelete=[];
settings.masterdata.cbBeforeDelete.push(function(options){
  var settings=options.settings,el_md=options.el_md,dat=options.dat;
  var cancel=false;
  return cancel;
});
if(!settings.masterdata.cbAfterDelete)settings.masterdata.cbAfterDelete=[];
settings.masterdata.cbAfterDelete.push(function(options){
});
if(!settings.masterdata.cbChange)settings.masterdata.cbChange=[];
settings.masterdata.cbChange.push(function(options){
  var el_md=options.el_md,el=options.this;
});
if(!settings.masterdata.cbPrepareSave)settings.masterdata.cbPrepareSave=[];
settings.masterdata.cbPrepareSave.push(function(options){
  var el_md=options.el_md
});
if(!settings.masterdata.cbBeforeSave)settings.masterdata.cbBeforeSave=[];
settings.masterdata.cbBeforeSave.push(function(options){
  var el_md=options.el_md,dat=options.dat;
  var cancel=false;
  return cancel;
});
if(!settings.masterdata.cbAfterSave)settings.masterdata.cbAfterSave=[];
settings.masterdata.cbAfterSave.push(function(options){
  var el_md=options.el_md,dat=options.dat;
});
//newRecord(options) dat
//onDelete(options) el_rec_record,e.target
//settings.masterdata.btnSave
//settings.masterdata.cbbtnCancel

the parameters:

settings: configuration of the element
el_md: the masterdata html element
dat: the record with column value pairs
e: the event
el: the source element
selected: the selected rows
row_actual: the current row
bnew: true/false (cbAfterSave(

add tinymce

masterdata/templates/tinymceset.js

Create your datadefintion JavaScript file. Copy the line from the template into your file and add your datadefID to the settings variable.

additional declarations in the datadefinition:

In the head of the page you have to add:

the tinymce library: tinymce/tinymce.js
the tinymce template: masterdata/templates/tinymce.js

After the declaration of the JavaScript variables at head_end the call back functions are added to the datadefinition: settings. The JavaScript file for this is masterdata/templates/tinymce.js.

In "k8form" the textareas with the class tinymce will get the tinymce editor.

The image list for tinymce is initialized by the init of tinymce. By each record the image_list changes, so tinymce is removed and initialized again.

The tinymce template consist the call back functions for your form. If you need to extend the call back functions or change the configuration, just copy the template in your datadefinition folder and change the link in your datadefinition.

More information about tinymce are in: TinyMCE docs

Update tinymce

The steps to update a tinymce field are:

remove tinymce
updata the field
init tinymce again

add image support

additional declarations in the datadefinition:

The upload has to be enabled (true). The settings specify the details of the files to be uploaded.

Frontend

the following elements are added into the masterdata plugin:

Upload area for the image
Image list with with sorter and control elements

If tinymce is enabled the image list is also displayed and updated in tinymce.

showtext

"true" displays the filename.

minImageWidth, minImageHeight

The min values ensure that a minimum resolution is guaranteed.

resizeMethod

contain:
- the image dimensions are scaled down to the specified values.
- the aspect ratio of the uploaded image is retained
crop:
- the image dimensions are croped to the resizedWidth and resizeHeight
- the aspect ratio corresponds to the resizedWidth and resizeHeight

Backend

by reading the main recordset, the following columns are added:

image_ID
image_file
image_orientation
image_aspectratio
image_width
image_height
image_count
image_array
- array with images, same the columns above

add upload support

additional declarations in the datadefinition:

{
  "masterdata":{
    "upload":{
      "enabled":true,
      "settings":{
        "datadefID":"k8refrights",
        "uploadtype":1,
        "showtext":true,
        "html":{
          "upload_m_container":"<div class=\"pt-2 k8-uploads k8-border-side\"> <div class=\"row\"> <div class=\"col-sm-6\"> <h3>#ls#Upload#</h3> <div class=\"dropzone-wrapper\"></div> </div> <div class=\"col-sm-6\"> <div class=\"js_rec_container rec_container k8-padding-6\" data-rec_object=\"k8refrights\" data-rec_indexmax=\"-1\"> <div style=\"display: flex;\"> <div><h3>#ls#Attachments#</h3></div> <div style=\"flex: 1 1 30%; text-align: right; padding-top: 10px;\"><button type=\"button\" class=\"btn btn-primary js_DeleteSelected\">#ls#Delete#</button></div> </div> <div class=\"row js_rec_records\"></div> </div> </div> </div></div>",
          "upload_m_blank":"<div class='k8-uploads'> <div class='js_rec_container rec_container k8-padding-6' data-rec_object='k8refrights' data-rec_indexmax='-1'> <div style='display: flex;'> <div><h3>#ls#Uploads#</h3></div> <div style='flex: 1 1 30%;text-align: right; padding-top: 10px;'></div> </div> <div id='picutes' class='k8-margin-bottom-normal' style='min-height: 150px; border: 2px solid rgba(0, 0, 0, 0.3);'> <p style='text-align: center; margin: 2em 0'>upload image not yet possible</p> </div> <div class='row js_rec_records'></div> </div></div>",
          "upload_m_record":"<div id=\"image_{{image_ID}}\" class=\"js_rec_record\" data-keyvalue=\"{{image_ID}}\" data-rec_index=\"\" style='margin-left: 1.5%; margin-right: 1.5%;'><div class=\"\"><input type=\"checkbox\" class=\"js_selected pe-2\" /><a class=\"ms-2\" href=\"{{root}}masterdata/ProcessMethod.php?process_action=getBlob&datadefID={{datadefID}}&ID={{image_ID}}\" download=\"{{image_title}}\">{{image_title}}</a></div></div>"
        },
        "dropzone":{
            "maxFilesize":5,
            "acceptFiles":"*"

}
      }
    },
  }
}

The upload has to be enabled (true). The settings specify the details of the files to be uploaded.

"datadefID":"k8refrights"

This are the differences:

files are saved in column: fileblob
rights: limit to creator, client or company
PHP file to read fileblob

Open image modal

Add the class: js_k8-modal to your image:

Open the image modal means to open it by click as large as possible in your browser window. Here for add to the image the class:

js_k8-modal

The necessary k8-modal tag is added in "_header.php". The CSS is in masterdata/css/masterdata.css.

After your image is loaded bind the modal event listener to display the image modal:

Call back function:

cbcatAfterLoadAll(...)

Add modal event listener:

addEventListenerModal(...), by all elements with the class js_k8-modal the modal event listener is added

More details to modal images:

w3schools Modal Images

add Bootstrap tags

data definition:

head[]

JavaScript library and CSS are linked.

fieldclass_add

All form elements get the class js_usebootstraptag.

JavaScript:

The form events

cbAfterNew

All form elements with the class js_usebootstraptag are emptied or filled with the default values.

cbAfterLoad

The form elements with the class js_usebootstraptag are filled with the tags of the record.

add codemirror

data definition:

{
  "head": [
    "<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/codemirror.css\">",
    "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/codemirror.js\"></script>",
    "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/mode/javascript/javascript.js\"></script>",
    "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/mode/xml/xml.js\"></script>",
    "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/mode/css/css.js\"></script>",
    "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/mode/htmlmixed/htmlmixed.js\"></script>",
    "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/mode/sql/sql.min.js\"></script>",
    "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/addon/lint/json-lint.min.js\"></script>",
    "<style>.cm-s-default .cm-string {color: green !important;}.cm-s-default .cm-string.cm-property {color: #b16b2a !important;}</style>"
  ]
}

codemirror libraries and styles

The additional JavaScript libraries and style sheets are declared in the head section.

codemirror modes:

javascript
htmlmixed
text/css
application/json
text/x-mysql
application/x-httpd-php
php
xml

More

codemirror
jsonlint.com, a validator and formatter with codemirror as core

JavaScript, codemirror initialization:

initCodeMirror(..)

el_texteditor
content
options
- mode: used modes are listed above
- ...: look in the codemirror link above

configuration:

setSize(), set the height of the editor
setValue(), sets the content
on(changes), used to write the content to the textarea and set the dirty flag

JavaScript:

let editor_settingsjson;

if(!settingsk8usercolumns.masterdata.cbCreateStructure)settingsk8usercolumns.masterdata.cbCreateStructure=[];
settingsk8usercolumns.masterdata.cbCreateStructure.push(function(options){
  editor_settingsjson=initCodeMirror(options.el_form.elements.namedItem('settingsjson'));
});

if(!settingsk8usercolumns.masterdata.cbAfterLoad)settingsk8usercolumns.masterdata.cbAfterLoad=[];
settingsk8usercolumns.masterdata.cbAfterLoad.push(function(options){
  editor_settingsjson.setValue(options.dat.settingsjson);
});

if(!settingsk8usercolumns.masterdata.cbAfterNew)settingsk8usercolumns.masterdata.cbAfterNew=[];
settingsk8usercolumns.masterdata.cbAfterNew.push(function(options){
  editor_settingsjson.setValue('');
});

if(!settingsk8usercolumns.masterdata.cbBeforeSave)settingsk8usercolumns.masterdata.cbBeforeSave=[];
settingsk8usercolumns.masterdata.cbBeforeSave.push(function(options){
  var dat=options.dat;
  var cancel=false;
  if(!gbnull(dat.settingsjson)){
    var obj={};
    try{
      obj=JSON.parse(dat.settingsjson);
    }
    catch(e){
      cancel=true;
      k8.message("error in k8form","alert");
    }
  }
  return cancel;
});

The cbCreateStructure

codemirror is initialized.

The cbAfterLoad

codemirror content is set.

The cbAfterNew

codemirror content is set to default (empty).

The cbBeforeSave

codemirror is validated.

Dropdown Menu

menuleftobj, for more details go to dropdown.

Options menu by menuleft_options:

true / false: displayed / not displayed
[1,1,1,1,1,1,1,1]
- 0: not displayed
- 1: displayed
- 2: disabled

displaymodes (true by default):

inlist (displayed in master data form or list)
inform (displayed only in form)
atlist (displayed only in a different form by a link)

A dropdown entry can also placed as button in:

btn=1: headline
btn=2: button line of the form

Call back function, cbMenuleft:

settingscustomer.masterdata.cbMenuleft=function(options){
  let settings=options.settings; // the datadefintion
  let dat=options.dat; // the saved data
  let dat_form=options.dat_form // current data in the form
  let el_md=options.el_md; // the HTML-Element
  let el_form=options.el_form; // the HTML form element
  let e=options.e;         // the clicked event
  let row_actual=options.row_actual; // the tabulator row
  let selected=options.selected; // array of the selected tabulator rows
  // options.isDirty: true/false, status of the form data
  // options.tableTab: the tabulator object
  // options.display_record(): function to display the data
  // options.setDirty(true/false): function to set the form data status
  var el=e.target;
  var value=getfromArray(el.dataset,"value");
  if(value=="businesscard"){
    if(options.selected.length!==1){
      alert(getl("Please select 1 row"));
    }else if(options.isDirty){
      k8.message(getl('please, save record'),"alert");
    }else{
      alert("businesscard");
    }
  }else if(value=="insert"){
    alert("insert");
  }
}

For each item the programm code needs to be written. The item is defined by the attribute "value".

html

The html snippets define the looking of the master data form. To overwrite the default, you can define your own snippets.

settings.html.masterdata.<property>

layout
wrapper
headline
filterformwrapper
tabulatorwrapper
formwrapper
main
footline

Create a folder for the datadefnition, name: <datadefID>. Write the HTML-Files with this names:

<datadefID>_<masterdata>_<property>.html

Please regard in your snippets the classes:

"masterdata"
"tabulator"
"js"
"js_dirty" for the edit symbol
"js_middle" for the message by messages mode<>4
Save button needs to be: type="submit"
Cancel button: class="js_cancel"

if you place tabulator and form side by side:

An example for a side by side form is in "kitsamples/customerleft".

data

data is only supported in form mode (notabulator:true):

Linking <select> by page init

In this example the table column: categoryID is linked to the table k8groups. This are the crucial columns of the table k8groups:

groupID: primary key
title: column to display
type: 'customer_group' for the default clause

Requirements for the data definition:

optionsadditional[]
- datadefID the source datadefinition need to be declared
- column_mapping
- fieldname
- tabulatorcolumn
- emptytext
- defaultclause
masterdata, sql_statement
- the column "category" with the title can be joined for catalog output

datadefID:

The datadefID of the source datadefinition needs to be entered here: k8groups.

column_mapping:

The HTML select tag has options:

With the column mapping the options are filled easily, column_mappping:

{"placeholder / attribute":"table.column"}
{"text":"title"}
{"value":"groupID","text":"title"}
{"value":"groupID","text":"title","data-columnXYZ":"columnXYZ"}

fieldname:

The field name of k8form: categoryID

tabulatorcolumn:

The field of the tabulator columns: categoryID

emptytext:

none (default)
standard (please select)
your text

An empty text is only shown in mode 1. In mode 0 you get an empty option instead.

defaultclause:

The "defaultclause" allows to filter the data.

Example for the table column categoryID:

{
  "optionsadditional":[
    {
      "datadefID":"k8groups",
      "column_mapping":{"value":"groupID","text":"title"},
      "fieldname":"categoryID",
      "tabulatorcolumn":"categoryID",
      "emptytext":"please select",
      "defaultclause":"type='customer_group'"
    }
  ],
  "masterdata":{
    "sql_derived":"SELECT er_customer.*,concat(accountnumber,' ',name1,' ',city) as partnerdisp,k8login.username as representativename,k8groups.title as category, '' as k8select FROM er_customer LEFT OUTER JOIN k8login ON representativeID=userID LEFT OUTER JOIN k8groups ON categoryID=groupID WHERE 1=1",
    "sql_orderby":"name1,city"
  }
  "tabulator":{
    "columns":[
      {
        "title": "categoryID",
        "field": "categoryID",
        "headerFilter": "list",
        "formatter":"#function#k8tabulatorformatter#", 
        "formatterParams":{"type":"color"},
        "minWidth":120
      }
    ]
  },
  "k8form":{
    fields:[
      {
        "tagName": "select",
        "name": "categoryID",
        "label": "categoryID",
      }
    ]
  }
}

sql_derived

The sql statment is not important for the masterdata form:

SELECT k8groups.title as category
LEFT OUTER JOIN k8groups ON categoryID=groupID

The column title is already linked by the column mapping. For catalog output the joined column category is helpful.

tabulator categoryID

this parameters need to be set:

headerFilter:"list", allow to choose from the value list
formatter:"#function#k8tabulatorformatter#", this formatter displays the text in the rows instead of the values
formatterParams":{"type":"color"}, defines the type of the formatter

The value lists are added automatically by processing "optionsadditional".

k8form categoryID

The "tagname" is set to "select". This HTML element allows to select from an option list. The option list is filled automatically by processing "optionsadditional".

Linking with datalist

To link our current form with a second data definition, we need:

input data definition, our current definition: "customer"
source data definition: "k8searchuser", where we read the records from

the datadefinitions
subject	input	source
datadefID	customer	k8searchuser
ID column	representativeID	userID
datalistcolumn	representativename	username
k8form datalist field	representativename
SQL-Statement	representativename
tabulator	representativename

The source data definition (datadefID) will be the definition with the users:

k8searchusers

The input data definition is linked to the Primary key of the source data defintion: userID. So we need an ID field in the input data definition:

reprenstativeID

To search for the username the name will be typed in. So we need a second field for the name:

representativename

The representativename needs to be present in the following sections:

the sql statement
the tabulator columns
in the k8form

Requirements for the input data definition:

settingsadditionals[]
- the source data definition need to be declared
k8form, fields
- datalist{}
  - look for the additional parameters

k8form attributes

list:

The "list" is defined like this:

<field name>_datalist

autocomplete:

Only the results from the datalist should be shown here. Other suggestions for the content are shut off.

k8form datalist

datadefID:

The datadefID of the source data definition needs to be entered here. It has also to be declared in "settingsadditional".

IDfield:

The IDfield is the field which contains the primary key of the source table.

onlyoptions:

true: only options from the list are allowed
false: all entries are allowed

If another source table is linked the value must be true. After choosing the value the primary key of the source table is inserted into the "IDfield".

defaultfilters, example:

[{"field":"type","type":"=","value":"countries"}]

defaultfiltersin:

[{"field":"type","type":"=","value":"countries"}]

Adds the filter always to the inner SQL clause and not to the derived clause.

buildclause:

Adds an value to react in include "getEntries_sql".

Example for linking the user from the table "k8login":

{
  "settingsadditional":["k8searchuser"],
  "masterdata: {
    "sql_derived":"SELECT er_customer.*,k8login.username as representativename,'' as k8select FROM er_customer LEFT OUTER JOIN k8login ON er_customer.representativeID=k8login.userID WHERE 1=1";
    "sql_orderby":"er_customer.name1,er_customer.city"
  },
  "tabulator": {
    "columns": [
      {
        "title": "representative",
        "field": "representativename",
        "headerFilter": true,
        "width": "100",
        "visible": false
      }
    ]
  },
  "k8form":{
    fields:[
      {
        "name": "representativeID",
        "type": "hidden",
        "label": "representativeID"
      },
      {
        "name": "representativename",
        "type": "text",
        "label": "representative",
        "attributes":{
          "list": "representativename_datalist",
          "data-fieldlist":"",
          "autocomplete": "OFF"
        },
        "datalist":{
          "datadefID":"k8searchuser",
          "IDfield":"representativeID",
          "onlyoptions":true
        }
      }
    ]
  }
}

The sql statement better displayed with line breaks:

Example for data-fieldlist:

"data-fieldlist":"accountID,accountname=customername,email,phone"

Form elements can be filled with values from the source record.

Requirements for the source datadefintion:

In the source table the column <name> should be a "unique" column. This column is requested in the form.

Linking <select> with Ajax

Attention, not working well when the value is set before Ajax filled the options

Requirements for the data definition:

settingsadditional[]
- the source datadefinition need to be declared
masterdata, sql_statement
- the column "representative" with the username need to be joined
k8form, fields
- dataoptions{}
  - look for the additional parameters

datadefID:

The datadefID of the source datadefinition needs to be entered here. It has also to be declared in "settingsadditional".

mode:

0: <option>"datalistcolumn"</option>
1: <option value="key">"datalistcolumn"</option>

emptytext:

none (default)
standard (please select)
<your text>

An empty text is only shown in mode 1. In mode 0 you get an empty option instead.

defaultclause:

The "defaultclause" allows to filter the data.

Example for the column categoryID:

Requirements for the source datadefintion:

In the source table the column <name> should be a "unique" column. This column is requested in the form.

Additional data for JavaScript

datadefinition bugreports.json:

The file: kitsamples/bugreports/bugreports_head_include.php is declared. It's loaded in the "head" section of the website.

kitsamples/bugreports/bugreports_head_include.php:

The parameter "projectchoice" of the query string is read. If the "projectchoice" is not empty, the datadefinition "projects" is declared.

Wtih the command "$o_projects->getentries(..) the project record is read and set to "$dat_project".

"$bdefault=true;" is set, because this short code should not replace the declaration of all other JavaScript variables.

The "script" tag declares a JavaScript area. The variable "dat_project" with the values of the recordset is issued.