Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
95 lines (63 sloc) 2.88 KB

Custom renderers

Sometimes the field content renderer in entries view doesn't show the content in the preferred way.

Example for set field

To see the full functionality, use the next branch >= this commit (2018-11-07). Before this update, field definitions weren't passed to the renderer. For older versions, there is a fallback to display a simple items counter instead. Have a look at the discussion on discourse for some more background. Scroll down for screenshots.

If you want to write your own renderers, have a look at app.utils.js and discover the core renderers App.Utils.renderer.{fieldname}. You can overwrite everything, you want with a custom js file.

bootstrap.php

if (COCKPIT_ADMIN && !COCKPIT_API_REQUEST) {

    $app->on('admin.init', function(){

        $this->helper('admin')->addAssets('path/to/custom.js');
        $this->helper('admin')->addAssets('path/to/custom.css');

    });

}

custom.js

App.Utils.renderer.set = function(v, field = null) {

    var out = '';

    if (field) {
        field.options.fields.map(function(e){

            if (e.display) {

                var type = e.display !== true ? e.display : e.type

                out += '<span class="app-set-field">';
                out += '<label class="uk-text-small">';
                out += (e.label || e.name);
                out += '</label><span>';

                if (type === 'set') { // take care of nested sets
                    out += App.Utils.renderer[type](v[e.name], e);
                } else {
                    out += (App.Utils.renderer[type] || App.Utils.renderer.default)(v[e.name]);
                }

                out += '</span></span>';

            }
        });
    }

    if (out !== '') return out;

    // display items count if output is empty
    var cnt = Object.keys(v).length;
    return '<span class="uk-badge">'+(cnt+(cnt ==1 ? ' Item' : ' Items'))+'</span>';

};

custom.css

.app-set-field {
  position: relative;
  padding: 15px; }
  .app-set-field label {
    position: absolute;
    top: 0; }
  .app-set-field .app-set-field {
    padding: 0 15px 0 0; }
    .app-set-field .app-set-field label {
      position: relative;
      vertical-align: top;
      margin: 0 .2rem 0 0; }

Screenshots

cp-set-with-items-count

cp-set-sortable-with-item-count

cp-set-grid-view

You can’t perform that action at this time.