List with filter form

Generate a master data element to your table and get automatically a data list!

Configure the list columns with JSON to get it functionally and good looking!

The data access rights are easily configured in the backend and displayed in the master data form.

Add a filter form to preselect the desired data.

With the download buttons the data is quickly exported in different formats.

This ís a copy of the customer list. It only has a different filter form to save space. Only one search term is provided. All alphanumeric columns in the customer dara are taken into account by the search.

Developer

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: customerlist
- get_datadefinition.php?datadefID=customerlist&table=er_customer
folder <myproject> create a folder: customerlist
save the datadefinition in your folder customerlist with the name "customerlist" as json file.
look in your browser:
index.php?datadefID=customerlist&page=masterdata

kitsamples/customerlist/customerlistbasic.json:

Datadefinition

The main parts of the definition are:

main parameters
(columns)
masterdata
- urls: look to definition
- disprecdirect
- filterobject: for the filter fields
tabulator

This datadefinition uses the datadefintion "customer" as backend. This example is only working with the existing data definition "customer".

head_end

The JavaScript file: customerlist.js is added.

columns

This definition is not used as backend. So the columns part is deleted.

disprecdirect

The List (Tabulator) without a filter form is normally directly displayed. By using the filter form this behavior is changed to "2":

0: by pressing GO
1: direct displayed by regarding the filter
2: displayed, only if a filter is filled out, even a default value

bresize

The resizer allows to shrink and enlarge the list. The default height is defined with: resizer_height.

edittype

The edittype defines the edit process. The edittype=4 opens a edit form in a new tab.

tabulatoreditpos

The values for the position of the edit icons are:

right (default)
left

By the tabulator responsiveLayout:collapse the right columns are collapsed, so it's better to move it to the left.

urls

Our basic project for the customers is datadefID=customer. Here the urls are changed to refer the "customer" datadefinition.

tabulator

responsiveLayout:collapse, by small displays the columns are added in additional rows.
columns
- formatter + / - for the collapsed columns
- phone as link
- email as link
- width and visible of some columns

Attention minHeight not working together with resizer

Main changes to the basic datadefintion:

{
  "name": "Customer list",
  "settingsadditional":["customer"],
  "head_end":["<script src=\"{{root}}kitsamples/customerlist/customerlist_head_end.js\"></script>"],
  "masterdata":{
    "disprecdirect":2,
    "bresize":true,
    "resizer_height":"400px",
    "edittype":4,
    "tabulatoreditpos":"left",
    "url_new": "index.php?page=form&datadefID=customer&process_action=New&page_mode=2",
    "url_edit": "index.php?page=form&datadefID=customer&process_action=Edit&page_mode=2",
    "url_detail": "index.php?page=detail&datadefID=customer",
    "url_load": "masterdata\/ProcessData.php?datadefID=customer&process_action=Load",
    "url_save": "masterdata\/ProcessData.php?datadefID=customer&process_action=Save",
    "url_del": "masterdata\/ProcessData.php?datadefID=customer&process_action=Del",
    "url_readfilter": "masterdata\/ProcessData.php",
    "data_readfilter": {
      "datadefID": "customer",
      "process_action": "ReadFilter"
    },
    "filterobject":{
      "templatetype":"filterblank",
      "method":"GET",
      "fields":[
        {
          "figure": 2,
          "name": "accountnumber",
          "type": "number",
          "label": "No.",
          "operator": "x"
        },
        {
          "name": "search",
          "type": "search",
          "label": "Search",
          "operator": "like"
        },
        {
          "figure": 2,
          "name": "datetimecreated",
          "type": "date",
          "label": "Date created",
          "operator": "x"
        }
      ]
    }
  },
  "tabulator": {
    "responsiveLayout":"collapse",
    "columns": [
      {"formatter":"responsiveCollapse", "width":30, "minWidth":30, "hozAlign":"center", "resizable":false, "headerSort":false},
      {
         "title": "phone",
         "field": "phonedial",
         "minWidth": "100",
         "formatter":"link",
         "formatterParams":{
             "labelField":"phone",
             "urlPrefix":"tel:",
             "target":"_blank"
         },
         "visible": true,
         "headerFilter": true
     },
     {
         "title": "email",
         "field": "email",
         "minWidth": "100",
         "formatter":"link",
         "formatterParams":{
             "urlPrefix":"mailto:",
             "target":"_blank"
         },
         "headerFilter": true,
         "visible": true
     }
    ]
  }
}

This is the final data definition, kitsamples/customerlist/customerlist.json:

Datadefiniton Filter form

filterobject

The filter form is defined with the filterobject. The filterobject is like a k8form definition. Some additional options for the filtering are explained here.

"method":"GET"

By using the form method GET the parameters of the url query string are set to the value of the corresponding fields.

"id_preset":"filter"

The field "id" is created with preset and name:

id_preset+field.name

filtermode

The JavaScript function buildformfilter() creates a filter array or a clause:

1: clause (default)
2: array filters

Please regard the following:

do not use the same field in the filter form and as headerfilter in the list
select, the option list needs to be loaded already by the preparation of the page
if a datalist with a corresponding ID-field is used, the filtering with the querystring has to be done by the ID-field.

fields

There are the following additional parameters in the field list for the building a clause:

figure=2, set for a range from to
table, added to the clause
operators:
- like (default)
- =
- >= or >
- <= or <
- !=

Only, if an operator is present, the field is added to the filter clause.

figure=2

This allows to filter a range. The operators are always ">=" and "<=". The operator need to be declared, even with a placeholder like in the definition example. The field names are build with the table column name added with the term:

<column name>from
<column name>to

Filterform and filterobject

Filter form as HTML-File: kitsamples/bugreports/bugreports_masterdata_filtertemplate.html

You can design your own form template and use the filterobject to build up the clause.

JavaScript

With JavaScript the following subjects are done:

headerfilter: changing the tabulator columns:
the headerfilter are deactivated.
default value of the creation date
the date from and to depending on today are calculated.

default values

The default values are set as attribute of the "datetimecreated" field. It's also an example of the date manipultation in JavaScript.

The date default values are overwritten by the fields of the url query string.

callback function: cbBeforeFilter()

This are the parameters:

settings
el_md
dat_filter
el_clicked

Maniputlate the following, settings.masterdata. :

data_readfilter.clause
data_readfilter.filters
disp_tabulator:
- true = displays tabulator rows
- false = don't displays tabulator rows

In the call back function you can build your own filter and define, if the list is displayed.

kitsamples/customerlist/customerlist_head_end.js:

Todo for customer mobile

For the customer mobile element a new datadefinition is necessary. The datadefinition customerlist is copied to customermobile. All files are renamed to "customermobile*".

Please do the following steps:

create the datadefintion folder: customermobile
copy customerlist.json into it and rename it to customermobile.json
- do the changes to the datadefinition
copy customerlist_head_end.js into it and rename it to customermobile_head_end.js
- do the changes to the JavaScript file
create the HTML file: customermobile_masterdata_filterform.html
- paste the HTML for the filter form in it

Changes to the datadefinition:

The filter form mobile

Filter form as HTML-File: kitsamples/customermobile/customermobile_masterdata_filterform.html

The JavaScript mobile

The JavaScript only contains the deactivation of the headerfilters,
kitsamples/customermobile/customermobile_head_end.js: