K8 Web Kit

List Examples

List with controls

Docu

To edit data, please login.

The list element is created with tabulator. It allows to filter and find the desired records. It support controls for:

  • New
  • Edit
  • Delete

The property: "masterdata.edittype" defines how the the form for edit is opened:

HTML and JavaScript

Introduction

The masterdata plugin is used. The differences are:

  • masterdata.bnoform=true
  • masterdata.edittype=0

List with filter form

Docu

Basic for the list is the tabulator definition. Additional an html template for the form is used and an fields array for the filter fields. Single fields or "from / to" fields for a range are allowed. The default method of the form is "GET", so the elements are filled by the query string.

settings.masterdata.filterobject:

  • templatetype: filterform (default)
  • fields:
    • name
    • operator

This is the minimun to define. For more details jave a look in the documentation.

Datadefinition

The filterform can be definied in the datadefinition by 2 methods:

  • html.filterform
  • masterdata.filterobject.fields[]

If the html.filterform is set, this html is displayed. The form needs the class=js_filterform. The Button to display or replace the list has to contain the class=js_replacedata.

You need to set the fields array with name and operator.

  • filterobject
    • fields
      • name
      • operator (=,>=,<=,!=,like)
    • defaultvalues (optional)
Declare settings and filter object
Filter form
  • filterform, class=js_filterform
    complete form with elements
  • fields-array:
    • tagName (input: default)
    • name (required)
    • id (id_preset+name)
    • label
    • figure (1:default, 2: from/to)
    • operator (required)
    • class
    • type
    • step
    • decimal
    • tags
    • options
  • button, class=js_replacedata "Go"

List with Line Edit

Docu

Thanks to the call back function the listing element can easily joined with other elements, like the Line Edit element.

HTML and JavaScript

Introduction

In this example are 2 elements used:

  • listing (masterdata.bnoform)
  • html element

After selecting a customer out of the list the "html element" with the contacts is overwritten. Both elements are joined by the "accountID".

You can build up a relation from the input field to another datadefinition (table or object). A searchbox will open in an overlay. You can filter the data. By clicking on the line, the data is entered in the form. If you define a field-list, all form elements of the field-list are filled out.

Controls and events

  • magnifying glass:
    opens the searchbox
  • x
    deletes the data
  • displaycolumn=searchcolumn1, onChange:
    found 1 record: ok
    otherwise: opens the searchbox
    „?“ search in searchcolumn2
  • searchcolumn2
    found 1 record: ok
    otherwise: opens the searchbox

Introduction

You want to search in a table for a specific recordset. Prepare the according datadefinition like this:

  • key
  • displaycolumn
  • searchcolum1
  • searchcolum2
  • tabulator
    • column array[]

The displaycolumn is the displayed field. The searchcolumn1 is the column in which the value is searched. Some browser offers an autofill function. Attention, if displaycolumn an searchcolumn are not same, the auto value is not found!

The input value is searched in searchsolumn1. By starting the input with "?" the value will be searched in searchcolumn2.

HTML input group

The class "js_searchbox_group" contains the following elements:

  • class="js_searchbox_group" data-fieldlist="field1,inputfield2=datafield2,..."
    • delete button
    • input type="text"
    • input type="hidden"
    • search button
Example: data-fieldlist

<div class="js_searchbox_group" data-fieldlist="name1=name,street,code,city">

All form elements in data-fieldlist are filled with values from the search box recordset. If target and source field name are not equal, the "=" allows to assign a source field to the target field.

jsonform.form

The html snippet is same the following example "HTML in form-horizonal"

HTML 1 field

HTML 2 fields, flexbox

All elements: button and inputs are inside an input-group. With the class "k8-flex-row" all items inside become flex items.

HTML in k8-table

JavaScript

Element / EventJavascript function
delete buttonsearchBox_delete(...)
text field changesearchBox_search(...)
search buttonsearchBox_open(...)
searchbox clicksearchBox_insert(...)
searchBox_delete(el)
  • el, clicked element

This function empties the form field values: myIDfield, mydisplayfield and the fields of the data-fieldlist.

searchBox_search(el,datadefID,insertfunction,datadefinition,filters,bsc2)
  • el, clicked element
  • datadefID (optional), if datadefID is set, the datadefinition is loaded by each click
  • insertfunction (optional), if not set "seachBox_insert(obj)" is called
  • datadefinition (optional), id datadefID is not set, this must be set
  • filters (optional), additional filters
  • bsc2=true (optional), search in searchcolumn2

This function reads the data in the table. If exactly 1 record is found, the values are written in the form. Otherwise the searchbox will be opened.

searchBox_open(el,datadefID,insertfunction,datadefinition,filters)
  • el, clicked element
  • datadefID, optional if datadefID is set, the datadefinition is loaded
  • insertfunction, optional if not set "seachBox_insert(obj)" is called
  • datadefinition, optional id datadefID is not set, this must be set
  • filters (optional), additional filters

This function opens the searchbox.

searchBox_insert(obj)
  • obj
    • obj.js_return.form
    • obj.js_return.myIDfield
    • obj.js_return.mydisplayfield
    • obj.data

This function is called by the search box, when a record is selected. Its inserts the data in the form.

<Select> list

Docu

A static select options list is easily definied in HTML. A dynamic list has to be filled by a table. So the data is read by php and transferred to the web client.

Datadefinition

The following placeholder are available:

  • #select#selectgroup#
  • #jsonform_enum#selectgroup#
  • "#jsonform_titleMap#selectgroup#":0
  • #js_select#selectgroup#
  • #k8form_select#selectgroup#

The 1st part of the placeholder defines the desired output format. The second part defines the selectgroup.

sorry, the format has to be exactly like this: "#jsonform_titleMap#selectgroup#":0

Please take care, that Json not autoformates and change it!

jsonform example: K8 Form example:

PHP

_datadefinition.php

The placeholder in the datadefinition are replaced by the function:

gsReplaceFromArray($arr,$text,…)

The following function call is: dbclass->GetFormMultiForm(..).

Bacisfunctions.php

dbclass->GetFormMultiForm(type,search,$arr)

  • type
    • select
    • jsonform_enum
    • jsonform_titlemap
    • getSelectJson
  • search: "selectgroup"
  • arr: $_REQUEST

The same function is used for radio button, checkboxes (in future) or Json.

masterdata/ProcessMethod.php

Parameter:

  • process_action: getSelect
  • type: getSelectJson (default)
  • search: selectgroup
  • additional parameter for GetFormMultiForm(type,search,$_REUEST)

Return Json array:

  • value
  • text

JavaScript

Get the selectgroup in JavaScript
  • its already in the datadefinition
  • <?php $dbclass->GetFormMultiFrom(..)?>
  • Ajax, url=ProcessMethod.php ?process_action=getSelect...
<?php $dbclass->GetFormMultiFrom(..)?> Ajax getSelect Set selected
Replace selectgroup in HTML

placeholder: #js_select#taxrule#

array2Options(arr)
Replace options in select form element