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

<div id="listing-lineedit"></div>
<script>  
  var settings_list=<?php echo json_encode(getDatadefinition(21),JSON_NUMERIC_CHECK);?>;
  var settings_contacts=lt;?php echo json_encode(getDatadefinition(22),JSON_NUMERIC_CHECK);?>;
settings_contacts.masterdata.edittype=6;
settings_contacts.masterdata.pagination='internal';
if(!gbnull(settings_contacts.masterdata.pagination)){
  settings_contacts.masterdata.paginationsize=5;
}
settings_contacts.masterdata.htmlout='lineedit';
  
var settings_customer=JSON.parse(JSON.stringify(settings21));
settings_customer.masterdata.edittype=0;
settings_customer.masterdata.bnoform=true;
settings_customer.masterdata.dataLoad=function(el_md,dat){
  setContacts(dat['accountID']);
}
$('#listing-lineedit').masterdata(settings_customer);
setContacts(0);

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

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

<div class="form-group">
  <label class="control-label col-sm-3 label-left" for="partnernumber">partnernumber:</label>
  <div class="col-sm-9">
    <div class="input-group k8-flex-row js_searchbox_group" data-fieldlist="name1,street,code,city">
        <span class="js_rec_control input-group-addon k8-input-group-addon k8-flex-glyph" 
        onclick="searchBox_delete(this);"><i class="glyphicon glyphicon-remove"></i></span>
        <input type="hidden" name="accountID">
        <input type="text" class="k8-form-control-left input-group-addon k8-padding-6-12 k8-flex-100-fix" name="accountnumber" onChange='searchbox_search(this,21,undefined,{"key": "accountID","displaycolumn":"accountnumber","searchcolumn1":"accountnumber","searchcolumn2":"name1"});'>
        <input type="text" class="k8-form-control-left input-group-addon k8-padding-6-12 k8-flex-200" name="name1" onChange='searchbox_search(this,21,undefined,{"key": "accountID","displaycolumn":"accountnumber","searchcolumn1":"accountnumber","searchcolumn2":"name1"},undefined,true);'>
        <span class="js_rec_control input-group-addon k8-input-group-addon k8-flex-glyph" 
        onclick="searchBox_open(this,21);"><i class="glyphicon glyphicon-search"></i></span>
    </div>
  </div>
</div>

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 / Event	Javascript function
delete button	searchBox_delete(...)
text field change	searchBox_search(...)
search button	searchBox_open(...)
searchbox click	searchBox_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)

List Examples

List with controls

HTML and JavaScript

Introduction

List with filter form

Datadefinition

Declare settings and filter object

Filter form

List with Line Edit

HTML and JavaScript

Introduction

Search box

Introduction

HTML input group

jsonform.form

HTML 1 field

HTML 2 fields, flexbox

HTML in k8-table

JavaScript

searchBox_delete(el)

searchBox_search(el,datadefID,insertfunction,datadefinition,filters,bsc2)

searchBox_open(el,datadefID,insertfunction,datadefinition,filters)

searchBox_insert(obj)

<Select> list

Datadefinition

PHP

_datadefinition.php

Bacisfunctions.php

masterdata/ProcessMethod.php

JavaScript

Get the selectgroup in JavaScript

Replace selectgroup in HTML

Replace options in select form element