Catalog

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.

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!

Open datadefinition as page

you can open the datadefintion as:

catalog:
index.php?datadefID=k8components&page=catalog
detail page:
index.php?datadefID=k8components&page=detail
line edit:
index.php?datadefID=k8components&page=lineedit

Catalog on the fly

Checkout the generation of a catalog on the fly:

Customer table on the fly:
index.php?page=catalog&table=er_customer&headtitlecolumn=name1&headdescriptioncolumn=city
Item table on the fly:
index.php?table=k8components&page=catalog&headtitlecolumn=text1&headdescriptioncolumn=textdimensions

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:

er_customer, if not exist create it with "k8examples.sql"
generate your datadefinition
- table: er_customer
- datadefID: catcustomer
- get_datadefinition.php?datadefID=catcustomer&table=er_customer &headtitlecolumn=name1 &headdescriptioncolumn=city
  if you use copy and paste, please remove the spaces!"
folder <myproject> create a folder: catcustomer
save the datadefinition in your folder catcustomer with the name "catcustomer" as json file.
look in your browser:
index.php?datadefID=catcustomer&page=masterdata

kitsamples/catcustomer/catcustomer.json:

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:

Datadefinition

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: tabulator.info
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:

key

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

rightcheck

The backend adds automatically:

settings.masterdata:

right_usercreate: "0" or "1"

recordset

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.catalog.container:

kitsamples/customercatalog/customercatalog_catalog_record.html:

kitsamples/customercatalog/customercatalog_catalog_nodata.html:

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.

settings.html.masterdata.<property>:

layout
container
record
recinput
recdisp
nodata
blank

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

<datadefID>_<htmlout>_<property>.html

recinput

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"

container

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

record

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

blank

Attention, this parameter is not used in this example.

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

nodata

filename: kitsamples/customercatalog/customercatalog_catalog_nodata.html

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

JavaScript

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:

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.

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

Call back functions

Extend the datadefintitions with call back functions:

var f=settings.masterdata;

f.cbcatAfterContainer=function(options){
  var settings=options.settings;
  var el_list=options.el_list;
};

f.cbcatNew=function(options){
  var el_rec_container=options.el_rec_container;
  var dat=options.dat;
  var indexes=options.indexes;
};

f.cbcatLoad(options){
  var el_rec_record=options.el_rec_record;
  var dat=options.dat;
  var template=options.template;
};

f.cbcatEdit=function(options){  // edittype=10
  var el_rec_container=options.el_rec_container;
  var el_rec_record=options.el_rec_record;
  var dat=options.dat;
  var indexes=options.indexes;
};

f.cbcatCancel=function(options){
  {"el_form":el_form,"dat":dat,"indexes":indexes}
  var el_form=options.el_form;
  var el_md=options.el_md;
};

f.cbcatDelete=function(options){ // edittype=10
  var el_rec_record=options.el_rec_record;
  var dat=options.dat;
  var indexes=options.indexes;
};

f.cbcatAfterLoadAll=function(options){
  var el_list=options.el_list;
  var data=options.data;
}

f.cbcatAfterInsert=function(options){
  var el_rec_record=options.el_rec_record;
  var dat=options.dat;
}

f.cbcatChange(otptions){
  var el=options.el;
  var el_list=options.el_list;
}
f.cbcatBeforeSave(options){
  var el_rec_record=options.el_rec_record;
  var dat=options.dat;
}

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

Catalog

User Manual (under construction)

Developer

Table requirement: primary key of the table

Open datadefinition as page

Catalog on the fly

Create a datadefinition out of your table

Place a catalog plugin element on your page

Datadefinition

HTML in this example

HTML for catalog in general

recinput

container

record

blank

nodata

JavaScript

add tinymce

add image support

Call back functions