Overview

Configure your grid:

On each position you can place your element. Define

• datadefID
• element type (page)
• additional properties:
  • filters[]
  • edit type
  • ...

Multiple elements

Place multiple elements on page:

• configure your pages[<page name>] (_init_page.php)
  • set tge HTML in contentPHP
  • add the ellements to the site[] array

pages[]

This is the structure of pages['overviewsmall']:

• url
• head
• contentPHP
• site
• foot

The pages[] array is defined in "_init_pages.php". The url is called in the menu. Necessary libraries are listed in the head. The contendPHP is included by the "index.php". The JavaScript libraries in the foot are executed after the website is built.

This is the HTML for the website:

the layout has the following markup:

• left
  • #pos1
• right
  • row 1
    • #pos2
    • #pos4
  • row 2
    • #pos3
    • #pos5

The "id" are filled with the elements of the site[] array. This is done in example.js.

this is the initial CSS for k8-compilation:

<style> .k8-pageelement .k8-nopag-catalog .rec_records { height:365px; overflow-y: auto;overflow-x:hidden; } .k8-pageelement .k8-line-catalog .rec_records { height:316px; overflow-y: auto;overflow-x:hidden; } .k8-pageelement .k8-line-detail .rec_content { height:368px; overflow-y: auto;overflow-x:hidden; } .k8-pageelement .k8-flex-table .rec_records { height:277px; overflow-y: auto; } .k8-compilation .masterdata, .k8-compilation .rec_container { margin-top: 0 !important; margin-bottom: 24px; } </style>

This are the CSS classes:

• .k8-compilation (main element)
  • .k8-pageelement (each item)

The CSS controls:

• Margins
• Height
• Overflow

The height of the following elements is set in the datadefinition:

• List
• Treeview
• Listview
• Chartjs

The elements: form, masterdata and simpledata are not prepared to fit in the grid system.

This is definition for the site:

{ "elements": [ { "selector": "#pos1", "datadefID": "pagespre", "page": "catalog" }, { "selector": "#pos2", "datadefID": "k8componentslist", "page": "list", "datadefinition": { "masterdata": { "edittype": 4, "filters": [ {"field":"datecreated","type":">=","value": "2020-01-01"} ] } } }, { "selector": "#pos3", "datadefID": "customer", "page": "masterdata", "datadefinition": { "masterdata": { "edittype": 3, "bnoform": true }, "tabulator": { "height": "311px" } } }, { "selector": "#pos4", "datadefID": "turnovervspurchase", "page": "chartjs" }, { "selector": "#pos5", "datadefID": "turnpie", "page": "chartjs" } ] }

The structure of "site[]":

• selector
  the "id" of the element
• datadefID
  the datadefinition of the element
• page, element displayed as:
  
  • masterdata
  • form
  • list
  • simpledata
  • catalog
  • detail
  • lineedit
  • chartjs
• datadefinition
  changes to the definition

site: elements / datadefinition:

{ "masterdata": { "filters": [ {"field":"rightgroupID","type":"=","value": "myvalue1"} ], /* for form */ "keyvalue":24 } }

In the datadefinition of the site properties can be set and overwrite the default datadefinition. In this example an additional filter is set. It's a constant. If you want to set dynamical values look to the next chapter.

excerp of customer_head_end.js

let displayvalue=getfromArray(GET,'displayvalue'); if(page=="detail" && displayvalue=='element1'){ settingscustomer.masterdata.filters=[ {"field":"creatorID","type":"=","value":userID} ]; settingscustomer.tabulator.sortMode="remote"; settingscustomer.tabulator.initialSort=[ {column:"datetimecreated", dir:"desc"} ]; settingscustomer.masterdata.data_readfilter['mytable_offset']=0; settingscustomer.masterdata.data_readfilter['mytable_limit']=2; } // by parameter exclude fields userparameter=getfromArray(settingscustomer.masterdata,'userparameter',0); if(userparameter==1){ // direct entry myk8.initFormfields(settingscustomer.k8form); settingscustomer.k8form.formcollection['categoryID']['active']=false; settingscustomer.k8form.formcollection['representativename']['active']=false; settingscustomer.masterdata.menuleftobj={}; }

For a special page, query parameters: "&page=detail&displayvalue=element1", a filter, the sort and number of records should be adopted.

With "masterdata/filters" the creatorID is fitered the logedin user (variable: userID).

With "tabulator/initialSort" the the order is set to "datetimecreated" column in descending direction.

With "masterdata/data_readfilter" the the record limit is set to 2 (mytable_offset is obligatory).

Normally the elements are created like this:

• var masterdata=$('#masterdata1').masterdata(settings);
• var catalog=$('#pos1').catalog(settings);

Methods are available to update the elements using the variables masterdata and catalog. To place any number of elements on a page, the variable sourceelements[] is introduced:

• var sourceelements[0]=$('#masterdata1').masterdata(settings1);
• var sourceelements[1]=$('#pos1').catalog(settings2);

In the JavaScript file the example.js the site structure is looped. For the masterdata and catalog plugins, the variable sourceelements[n] is used for each element 'n'. When a new page is called up for editing, 'n' is passed by the variable sourceelement and the datadefID by the variable sourcedatadefalias.

Saving

When saving the data on the 2nd page, the starting page is called and the following values are passed:

• dat: the data set
• returnflag: 2 for plugin catalog
• options.sourceelement
• option.sourcedatadefalias

This means that the correct element can now addressed on the starting page and the data record can be updated. This happens in the JavaScript file standard.js.