Colored groups

Colored groups are supported:

in the tabulator list
by the select element of the form

Colored groups enriches the visibility of data structures. They are easy to implement in K8 Web Kit.

You can change and explore the data, if you are logged in.

Implement manuell

tabulator

datadefinition:

In the "head" a special CSS is added to improve the visibility of the selected row.

The header filter configures the allowed values. For the row a special color-formatter is used. The placeholder "#function#k8tabulatorformatter#" will be exchanged with the JavaScript function "k8tabulatorformatter()". The formatter is configured with values and colors.

k8form

datadefinition:

head_end

Javascript handles the events of the form and changes the color of the select tag.

k8form, select

The HTML tag "select" has the normal options with "value" and "text" and the additional color informations in the attributes:

data-fontcolor
data-backgroundcolor

Javascript: kitsamples/workflowtitle/workflowtitle.js

The function k8.datadefAddcoloredgroups() adds the necessary call back functions, by "new", "load" and change to the datadefintion.

Groups

The colored groups are displayed with the selected font and background. With the edit button, both colors can be changed.

optionsadditional

{
  "optionsadditional":[
    {
      "datadefID":"k8groups",
      "defaultclause":"type='workflow_main'",
      "column_mapping":{"value":"groupID","text":"title","data-fontcolor":"fontcolor","data-backgroundcolor":"backgroundcolor"},
      "tabulatorcolumn":"groupmain0ID",
      "fieldname":"groupmainID",
      "emptytext":"please select"
    },
    {
      "datadefID":"k8groups",
      "defaultclause":"type='workflow_sub'",
      "column_mapping":{"value":"groupID","text":"title","data-fontcolor":"fontcolor","data-backgroundcolor":"backgroundcolor"},
      "tabulatorcolumn":"groupsubID",
      "fieldname":"groupsubID",
      "emptytext":"please select"
    }
  ],
  "tabulator":{
    "columns":[
      {
        "title": "main group",
        "field": "groupmainID",
        "headerFilter": "list",
        "minWidth":120,
        "formatter":"#function#k8tabulatorformatter#", 
        "formatterParams":{"type":"color","setbackgroundcolor":false},
        "visible": true
      },
      {
        "title": "sub group",
        "field": "groupsubID",
        "headerFilter": "list",
        "formatter":"#function#k8tabulatorformatter#", 
        "formatterParams":{"type":"color"},
        "visible": true
      }
    ]
  },
  "k8form":{
    "fields":[
      {
        "name": "groupmainID",
        "tagName": "select",
        "label": "Main group"
      },
      {
        "name": "groupsubID",
        "tagName": "select",
        "label": "Task"
      }
    ]
  }
}

In the optionsadditional the datadefinition "datadefID" with the clause "defaultclause" is defined as source of the records. With the "column_mapping" the columns of the source are mapped to the current definition. The corresponding tabulator column is configured in "tabulatorcolumn". The "fieldname" is the correspondig field in "k8form". The "emptytext" is displayed in the "select" element of the form.

section tabulator

The headerfiler, formatter and formatterparams have to be declared. The values are generated automatically and inserted into:

headerfilter.values
formatterParams.values

section k8form

The "tagName" has to be configured as "select". The "options" are inserted automatically.