Are you logged in? Yes, so you see the control elements, New, Edit and Delete. With New you can create a new record. With Edit you get directly a form to change your record. With Delete you get immideately rid of your record.

Connect a catalog element to your table and get automatically a a catalog with form and detail page (Catalog on the fly)!

With "get_datadefinition.php" you can can create a datadefinition, which contains the declaration for:

  • data access class
  • form
  • tabulator (formatting of the columns)
  • HTML for the catalog,
    your individual columns need to be placed there manually

Change the data definition according to your wishes. Add your table columns manually as placeholder to your catalog layout. You can easily add or remove an image upload. Textareas can be enriched with tinymce for a better editing and formatting.

User Manual (under construction)

K8 Web Kit Catalog

elements in catalog

  • search
  • detail link
  • New
  • Edit
  • Delete

K8 Web Kit Catalog inline form

elements in form

  • Save
  • Cancel
  • tinymce, descriptionlong
    • various format functions
    • Menu / Insert / Image
  • Images
    • upload
    • select images and Delete
    • Sort

K8 Web Kit Detail

elements in detail page

  • image list
  • Choose button


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!

Open datadefinition as page

you can open the datadefintion as:

Catalog on the fly

Checkout the generation of a catalog on the fly:

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

Create a datadefinition out of your table

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

The following steps are necessary to create your own datadefinition:

kitsamples/catalogcustomer/catalogcustomer.json (already adjusted):

Place a catalog plugin element on your page

The catalog plugin offers this elements:

  • catalog
  • detail
  • lineedit

To add an edit function to the list, please look for the "edittype" in the general description. For more information for placing elements on your page look to HTML output.


The "searchcolumn" is the column for the SQL WHERE condition. In this example it's build up in the call back function: cbcatAfterContainer() (look to the JavaScript Chapter).

The "filter_catalog" is a default filter especially added for the catalog output. Attention, it's not used in this example!

The "search_mode" defines:

  • 0=no search
  • 1=standard search
    • HTML form is necessary
    • JavaScript is necessary

The "search_internal" defines an internal load of the data. If it's set to false the submit reloads the whole page.

This are special parameters for the catalog example:

Properties and sections:

  • name: the displayed name
  • key: necessary for edit
  • rightcheck: look to the explanation
  • masterdata: the main parameters
  • tabulator: used for master data form and for the format of numbers and dates in HTML output. Please have a look to:
  • k8form: please have a look to: k8form
  • html: the html snippets
  • data: for form and catalog

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

JSON structure:


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


The backend adds automatically:


  • right_usercreate: "0" or "1"


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


HTML Output offers a pagination with the following parameters:

The pagination sends the offset (mytable_offset) to the backend with the data read request. In this case the record number is added to each recordset: field=k8_recordcount.

HTML in this example

If an HTML file is saved in the datadefinition folder following to a specific naming convention, it is automatically added to the datadefinition.

  • <datadefID>_<object>_record.html
  • catalogcustomer_catalog_record.html

It is added to:

by generationg the datadefinition the html is inserted into the datadefinition:





HTML for catalog in general

This are the default outputs, htmlout=<htmlout>:

  • catalog
  • detail
  • lineedit

The html snippets define the appearance of your web page. Design your snippets.


  • layout
  • container
  • record
  • recinput
  • recdisp
  • nodata
  • blank

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



Attention this is not used in this example. It allows to define a form for the data input. If the placeholder {{js_dataform}} is present, the form is generated by k8form.

Please regard in your snippets the classes:

  • "js_inlineform"


filename: masterdata/templates/catalog_container.html

A filter form (id="filterform" method="GET") is inserted in the header line. The input is named "search". If a search parameter is set the is send to the server. Otherwise the blank snippet is displayed. Without blank template the Ajax request is directly send to the server.

Please regard in your snippets the classes:

  • js_rec_container
  • js_rec_head
  • js_rec_records


filename: masterdata/templates/catalog_record.html

Please, replace the placeholder {{{{headtitlecolumn}}}} and {{{{headdescriptioncolumn}}}} with your table columns. Place additional record fields like you want. Of course you also can totally change the markup.

Please regard in your snippets the classes:

  • js_rec_record: important!
  • js_inlineform: optional for the form


Attention, this parameter is not used in this example.

If a "blank" template exist, it will be displayed instead of the records.


filename: kitsamples/catalogcustomer/catalogcustomer_catalog_nodata.html

You can change this markup completely and also put images in.


filename: kitsamples/catalogcustomer/catalogcustomer.js

Line 1: the header tag is changed for this page to <h2>&

Line 4: the call back functions for tinymce are added to the datadefinition by datadefAddtinymce(...)

Line 5: the call back function "cbcatLoad" is used to set the link to the detail page. The keyvalue is added to the link.

  • it adds the link to the title. It takes the "url_detail" and adds the primary key to it: &keyvalue=>ID<.
  • extract from filename: js/example.js

    Line 1+2: a HTML layout can be added, in this case not!

    Line 4: defines the HTML which is outputted.

    Line 5: the edittype is overwritten with '1':inline.

    Line 7: by search_mode>1 the call back function "cbcatAfterContainer" is added by exk8.datadefAddSearch(...). The function is described below:

    method: k8.datadefAddSearch(...)

    This method is working well in our example. It can be used as draft for an own search method.

    Javascript helps with 3 issues:

    • if a search value is entered,
      • it deletes the blank template; without blank-template the data is loaded
      • it builds the filter expression
      • search_internal
        • true: an eventlistener is added and the function "options.loaddata()" is called to load and display the records
        • false: submit reloads the page with the new search

    add tinymce


    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

    add image support

    additional declarations in the datadefinition:


    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.


    • contain: the aspect ratio is fix
    • crop: the image is croped to the resizedWidth and resizeHeight.


    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

    Call back functions

    Extend the datadefintitions with call back functions:

    the parameters:

    • settings: configuration of the element
    • el_list: the main html element
    • js_rec_container: the HTML container element
    • js_rec_record: the HTML record element
    • dat: the record with column value pairs
    • e: the event
    • el: the source element
    • loaddata(): function to load the data

    Attention: not all parameters are available by each function.

    cbcatAfterContainer: The search input and the clause for the data is done here. In the example.js this call back function is added to the datadefinition by masterdata.search_mode>0.