Overview

Multiple elements

Place multiple elements on a website with the site[] array:

• HTML: overviewsmall.html
• pages[]
• site[]

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
  • #html1
• right
  • row 1
    • #html2
    • #html4
  • row 2
    • #html3
    • #html5

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

This is definition for the site:

{ "elements": [ { "selector": "#html1", "datadefID": "pagespre", "page": "catalog" }, { "selector": "#html2", "datadefID": "k8componentslist", "page": "masterdata", "datadefinition": { "masterdata": { "edittype": 0, "bnoform": true }, "tabulator": { "height": "305px" } } }, { "selector": "#html3", "datadefID": "customer", "page": "masterdata", "datadefinition": { "masterdata": { "edittype": 3, "bnoform": true }, "tabulator": { "height": "305px" } } }, { "selector": "#html4", "datadefID": "turnovervspurchase", "page": "chartjs" }, { "selector": "#html5", "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

Normally the elements are created like this:

• var masterdata=$('#masterdata1').masterdata(settings);
• var catalog=$('#html1').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]=$('#html1').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.