K8 Web Kit
Download Web Kit bootstrap 5

Fundamentals

Tabulator, the datatable

Tabulator Example

the tabulator datastructure

The initialization of tabulator is done by setting the html element to the tabulator library and transfering a configuration object. The object has the following parts:

  • many different configuration parameters
  • columns: the cloumn structure describe the layout of the columns
  • data: the data of the table
  • event functions

How I use tabulator

I load the data by Ajax and use the setdata() function:

tableTab.setData(url_readfilter,data_readfilter);

All coloumns get a headerfilter. All data columns are sortable. The first column is a html-column for the delete function. The formatter property allows to insert html-data.

The data is loaded after initialization or by entering a key in the header filter. With each key a request is send to the server. The actual filter is transmitted in the filter array:

  • filter
    • [0]
      • field
      • type
      • value

The filter is build up in php and the fitting records are send back to the browser.

Tabulator website: tabulator.info

For more details about Tabulator, please have a look to:

Javascript

jsonform on github

the jsonform datastructure

The initialization of tabulator is done by setting the html element to the jsonform library and transfering a configuration object. The object has the following parts:

  • schema: list of field objects with name, type, title, ...
  • form: array of the layout description
  • event functions

jsonform, how I use it

  • horizontal form
  • label-left
  • schema
    • change the title
    • required
    • enum for select fields
    • using step for decimal fields
  • form
    • change appearance of the fields, like:
      • textarea, radio
    • sections to get multiple blocks
    • action for buttons

Attention, I modified the jsonform.js. A documentation is following later. Please use only the jsonform.js in this "download".

Look at the html of the form

The HTML result of the form can be displayed in the inspector of the browser (F12). There you also can mark and Copy / outer html. By pasting it in an editor, its all in one line. So take the htmlformatter to get a good-looking overview.

jsonform_config

More details will added soon!

With as special configuration jsonform uses 2 columns for a form-group, label and input field. With a html snippet and the class: noautocolumn in the form-group label and input field will be placed in 2 rows.

jsonform website

Please, have a look to

example for jsonform

Jsonform adaptions

vertical / horizontal form

In the masterdata plugnin is this is the default configuration of jsonform:

It can be changed in the datadefinition.

This are the possible settings for formtype and formclass (both need to be defined):

  • 0, form-inline
  • 1, form-vertical
  • 2, form-horizontal, default-setting in masterdata.js

by using horizontal form the following properties have to be set:

  • labelHtmlClass=label-control col-sm-3
    • add "label-left", if wished
  • fieldWrapClass=col-sm-9

form with 2 or more columns

If you like to have 2 blocks, you have to use the "type":"section" or "fieldset" in the "form"-area, example with "section":

form definition with 2 blocks

Bootstrap, the famous css

bootstrap 3.3 currently in use

This are the main features used:

bootstrap 5 future plan

List of the future feature:

bootstrap navbar, how I use it

The navbar is well explained on getbootstrap.With a simple Javascript data structure the bootstrap menu can be generated automatically:

Change the menu and display it:

bootstrap navbar, data structure

Additionally to a simple menu url, I use a pages array with the menu url. An Example for the datastructure:

  • selector: "mynavi.navbar"
  • html_li_simple
  • html_li_dropdown
  • pages:{}
    • <pagename>
      • url
      • datadef
      • login
  • menu:[]
    • title
    • ID (optional)
    • condition: (optional, default: true) or a JavaScript expression
    • href (optional)
    • page (optional)
    • target (optional)
    • active_by (optional): "page"(default),"url","basename","none"
    • li_class (optional)
    • li_attributes (optional)
    • a_attributes (optional)
    • children[] (optional)
ID

The ID is helpful if you want to change, add or delete your menu structure for example for a special customer with JavaScript.

li_class="disabled"

With this class the link is displayed, but its not clickable.

condition

With a JavaScript expression, variables and functions are useable and define, if the menu item is displayed or not. Example for an Javascript expression:

  • variable:
    • var user_right=5;
  • menu item with condition:
    • "condition":"user_right==5"

bootstrap form, how I use it

Additional class for horizontal forms:

  • Add class .form-horizontal to the <form> element
  • Add class .control-label to all <label> elements

In regard to jsonform I am using Bootstrap 3 (v3.3.7).

more links to bootstrap forms:

example for horizonal form

Dropdown

Example 1, HTML

The drop down is build with a button and an unordered list. The default position of the list is the left side. The position is defined by the class in the ul:

  • dropdown-menu-left
  • dropdown-menu-right

The alignement of the list element is defined in the <li> element.

Example 2, Hamburger menu with JavaScript object

The menu is build with the datastructure 'obj' and the function 'displayDropdownel(obj)'. The structure consist out off:

  • el_dd, the element
  • button
    • text
    • carettype
  • class_ul
  • class_li
  • items[x]
    • label
    • value
    • class

The function displayDropdownel(obj) is part of k8 web kit.

Example 3: selected value in button

The default value "value_selected" is displayed in the button and the pretext "Count" is written in front of it.

  • value_selected: 5
  • button
    • pretext: Count

Dropzone

Open source file upload

DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews.

It’s lightweight, doesn’t depend on any other library (like jQuery) and is highly customizable.

Dropzone website

Please, have a look to

Drop your files here

TCPDF

Open source PDF creation

TCPDF is a free Open Source PHP class for generating PDF documents.

Please have a look to:

  • tcpdf with Json definiton: JsonPDF
  • Invoice example with PDF: Invoice

TCPDF website

More informations are available at:

TinyMCE

HTML Editor

TinyMCE is a free Open Source HTML Editor. According to the producer its the world's most advanced rich text editor.

The WYSIWYG editor that is flexible, customizable, and designed with the user in mind. TinyMCE can handle any challenge, from the most simple implementation through to the most complex use case.

Please have a look to:


TinyMCE website

More informations are available at: