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, you 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:


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.

The return values and methods of "catalog" are:


This are special parameters for the catalog example:

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!

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 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
  • customercatalog_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/customercatalog/customercatalog_catalog_nodata.html

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


filename: js/example.js

The edittype is overwritten in example.js.

filename: masterdata/templates/catalog_template.js

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.
  • it adds the link to the title. It takes the "url_detail" and adds the primary key to it: &keyvalue=>ID<.

add tinymce

additional declarations in the datadefinition:

In the head of the page you have to add the tinimce library.

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.

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.


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