Master data form with datalist

Form field as datalist

"Name 1" is a form field and also the search field.

The data for this table is loaded in advance. The ajax method "readfilter" to load the data is turned off. By clicking the triangle, the records are displayed. The Ajax methods "Save" and "Delete" are active.

The following CRUD methods are supported

Create (New)
Read (datalist)
Update
Delete

Separate field for datalist search

An additionally search field "Search", containing "customer number" and "name 1", is added in the recordset (SQL statement) and in the form as 1st field.

The records are not loaded in advance. There are no records to choose from. The ajax "readfilter" method is turned on. By typing an single character the ajax method is executed and the datalist is filled and displayed.

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:

Datalist on the fly

Checkout the generation of a datalist form on the fly:

Customer table on the fly:
index.php?page=simpledata&table=er_customer&datalistcolumn=name1
Item table on the fly:
index.php?page=simpledata&table=k8components&datalistcolumn=text1

Attention, generate a table is only allowed on this demonstration page. This functionality is normally turned off!

Datadefinition

This are the main parameters for the datalist form:

{
  "key":"accountID",
  "datalistcolumn":"name1",
  "masterdata":{
    "datalistid":"simpledata",
    "init_data":1,
    "url_save": "masterdata\/ProcessData.php?datadefID=customerdatalist&process_action=Save",
    "url_del": "masterdata\/ProcessData.php?datadefID=customerdatalist&process_action=Del",
    "url_readfilter": "masterdata\/ProcessData.php",
    "data_readfilter": {
        "datadefID": "customerdatalist",
        "process_action": "ReadFilter"
    },
    "sql_derived":"SELECT er_customer.*,concat(accountnumber,' ',name1) as search FROM er_customer WHERE 1=1",
    "sql_orderby":"name1"
  },
  "k8form":{
    "templatetype": "masterform",
    "template":"<form class=\"js_dataform masterdata-form\">{{innerHTML}}</form>",
    "fields": [
      { 
        "inputgroup":{
          "fields":[
            {
              "name": "search",
              "type": "search",
              "attributes":{
                "list":"simpledata",
                "autocomplete":"OFF"
              },
              "label": "search",
              "maxLength": 50
            }
          ],
          "template":"<div class=\"input-group\">{{control_delete}}{{field0}}{{control_save}}{{control_new}}</div>"
        }
      },
      {
        "more fields":"..."
      }
    ]
  }
}

key
name of the primary key column

datalistcolumn
column witch is displayed in the datalist

datalistid
id of the datalist (default:simpledata)

init_data
loads the data in advance

Ajax, connection to the data table

url_save
url_del
url_readfilter
data_readfilter

sql_derived
The additional column "search" is added in the SQL statement. It is executed as derived to avoid to work with expressions in the sql clause.

K8 Form

For the input with datalist a special inputgroup with with the following form control elements need to be created:

input: datalistcolumn, events:
- onChange
- onInput
button: class=js_rec_new
button: class=js_rec_save
button: class=js_rec_delete

The datalist is assigned with the "list" attribute to the id of the corresponding datalist.

The events are added and executed by the k8.initSimpleFormEvents(options).

Place a masterdata plugin element on your page

The datadefinition "settings" contains all parameters for the form. The statement "myk8.createform(...)" creates the HTML form. With the function "initSimpleFormEvents(...) the events and execution methods are added.

Call back functions

Extend the datadefintitions with call back functions:

the parameters:

settings: configuration of the element
el_md: the masterdata html element
dat: the record with column value pairs
el: the source element

The following methods allow to return "cancel":

cbBeforeSave
cbBeforeDelete