Intro

Searchbox

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

Source: setzen der Searchbox parameter!

new file: datadefID_k8form_customer
datadefinition:
- settingsaditional:
- k8form.fields: fieldwraptemplate="customer"
- sql_statement or sql_derived, JOIN to er_customer

k8-CSS

k8-flex-table

Bootstrap Input Basics

label and input height: 34px
input padding: 6px 12px
label .control-label padding-top: 7px
font-size: 14px;
distance between lines: margin-bottom: 15px

k8-table Basics

label and input height: 34px
input padding: 6px 6px
label k8-label-table, padding: 7px 6px
font-size: 14px;
distance between lines: margin-bottom: 0px

horizontal Lines are made with:

k8-border (all 4 sides)
k8-border-top
k8-border-right
k8-border-bottom
k8-border-left
k8-border-u (3 sides)
k8-border-n (3 sides)

vertical Lines are made with:

.k8-flex-table-head > div

Example contacts

For table formatting "k8-flex-table" is used, its based on "display:flex".

Contacts

title

firstname

lastname

departement

phone

My footline

HTML

CSS

/* -------------------------------- k8-flex-table ----------------------------------- */
.k8-flex-table .form-group{margin-bottom: 6px;}
.k8-flex-table .form-control{padding: 10px 6px;}

.k8-label-left{text-align: left !important;}

.k8-flex-table-head{background-color: #eee}
.k8-flex-table-head>div{border-right: 1px solid #bbb; }
.k8-flex-table-head>div:nth-last-child(1){border-right: 0;}

.k8-flex-table-record>div{border-right: 1px solid #bbb;}
.k8-flex-table-record>div:nth-last-child(1){border-right: 0;}

.k8-flex-table-record-sub>div>div{border-right: 1px solid #bbb;}
.k8-flex-table-record-sub>div>div:nth-last-child(1){border-right: 0;}

.k8-label-table{padding: 6px 6px; display: inline-block; width: 100%; margin-bottom:0;}

.k8-flex-table h3{margin: 8px 6px 8px 6px}
.k8-flex-table h3:after{content: none;}
.k8-flex-table input{ width: 100%}
.k8-flex-table .rec_headline div{
  overflow: hidden;
  text-overflow: ellipsis;
}

.k8-flex-table .rec_container{border: 1px solid #bbb;}
.k8-flex-table .rec_headline{border-bottom: 1px solid #bbb}
.k8-flex-table .rec_records{min-height: 200px;}
.k8-flex-table .rec_records>div{border-bottom: 1px solid #bbb}
.k8-flex-table .recordmarker {border-right: 1px solid #bbb; 
    background-color: #eee; 
    padding: 3px 1px 0px 1px;
    cursor: pointer;
}
.k8-flex-table .recordnew {
    background-color: #eee; 
    padding: 3px 1px 0px 1px;
    cursor: pointer;
}
.k8-flex-table .rec_footline {background-color: #eee} 
.k8-flex-table .rec_footline p {padding: 6px; margin:0}
.k8-iconclick{cursor: pointer; padding: 2px}