HTML output

Docu

Catalog

Docu

Hilfegesuch

To edit data, please login.

The Catalog consist out of 2 areas. The filterform and the HTML-catalog element. The HTML-catalog element supports:

pagination
controls with right check
conditional output
loop array
image support

The following HTML templates are possible:

blank
container
record
nodata

HTML and JavaScript

<div class="row">
  <div class="col-sm-4 p-bottom-normal">
    <p class="" style="font-size:1.5em;">Hilfegesuch</p>
  </div>
  <div class="col-sm-8 p-bottom-normal">
    <div id="searcharea">
    </div>
  </div>
</div>
<div id="resultarea"></div>
<script>
  var search='<?php echo getfromArray($_GET,'search','a');?>';
  var settings=<?php echo json_encode($datadefinitions[101],JSON_NUMERIC_CHECK);?>;
  // ----------------- filter form ----------------------
  $('#searcharea').html(settings.html.catalog.filterform);
  var el_form=$('#searcharea').find('#filterform')[0];
  obj2form($.extend({"search":"a"},Array_GET()),el_form);

/* ------------- clause -------------- */
  var keywordarray=search.split(/[ ,]+/);
  var clause='';
  if(settings.displaycolumn){
    for(var i=0;i<keywordarray.length;i++){
      clause=gsclauseand(clause,settings.displaycolumn+" like '%"+keywordarray[i]+"%'",!gbnull(keywordarray[i]),' or ');
    }
  }else{
    console.log('displaycolumn not set!');
  }
  settings.masterdata.clause=clause;
  settings.masterdata.pagination='internal';
  settings.masterdata.paginationsize=2;

if(gbnull(search)){
    $('#resultarea').html(settings.html.catalog.blank);
  }else{
    var catalog=$('#resultarea').catalog(settings);
  }
</script>

Implement Filter and Catalog

In the backend are the following HTML snippets prepared:

filterform
blank
container
record
nodata

For introduction I will show you the 2 main snippets: container and record.

Container

The container file: myweb/HRhelprequest_catalog_container.html

Record

The container file: myweb/HRhelprequest_catalog_record.html

Detail

Docu

On a detail page the head meta tags, title and description are filled from the detail record with PHP. So, the data already read by PHP and is later transfered from php array to the javascsript HTML-element.

The HTML element supports:

controls with right check
conditional output
loop array
image support

HTML and JavaScript

if(gbnull(search)){
    $('#resultarea').html(settings.html.catalog.blank);
  }else{
    var catalog=$('#resultarea').catalog(settings);
  }
</script>

Implement Filter and Catalog

In the backend are the following HTML snippets prepared:

filterform
blank
container
record
nodata

For introduction I will show you the 2 main snippets: container and record.

Container

The container file: myweb/HRhelprequest_catalog_container.html

Record

The container file: myweb/HRhelprequest_catalog_record.html

Line Edit

Docu

The Line Edit element is based on an input form. In display mode all inputs are changed to "div" container.

By Edit or New the original form is displayed in the line.

HTML and JavaScript

The line edit mode allows you to edit the data in the current line.

The main settings are:

datadefinition
- masterdata
  - edittype
  - clause
  - pagination
  - paginationsize
  - htmlout
  - defaultvalues
- html
  - container
  - record

You need to prepare the form with the controls you need. The <inputs> are automatically changed to <div> containers when the new record is added to the list. Controls with the class="js_controls" are hidden.

HTML Snippets

Like in all HTML elements the following snippets are needed:

container
record

Container

The container file: kitsamples/er_employee_lineedit_container.html

Record

The container file: kitsamples/er_employee_lineedit_record.html

Recdisp optional

If the "record" contains not only input fields, it can not transformed to a display record. In this case a special HTML Layout is neccesary to display the record.