Creating a custom list template

  • Views Views: 39,842
  • Last updated Last updated:

Navigation

  • Location​

    List templates are located in "/components/com_fabrik/views/list/tmpl/". Each template has its own folder.

    Custom CSS in existing list templates​

    https://fabrikar.com/forums/index.php?wiki/custom-styling-a-list/

    Copying an existing template​

    To create a new template we suggest that you copy an existing template folder and alter it to suit your needs.

    Copy:
    components/com_fabrik/views/list/tmpl/Bootstrap/
    to:
    components/com_fabrik/views/list/tmpl/mytemplate/

    The template used for a list is normally set in List / Details / Layout / Front-End or Admin Template, however this can be overridden in the menu item that links to the List in which case you will need to edit the Menu instead.

    Creating a catalog like list view (div template)​
    Use a copy of the "div" template (don't modify the div template itself, it will be overridden with the next update).
    In default.php you can set these general parameters
    Code:
    // The number of columns to split the list rows into
    $columns = 1;

    // Show the labels next to the data:
    $this->showLabels = true;

    // Show empty data
    $this->showEmpty = false;
    In default_row.php single element's label and data can be addressed via
    Code:
    $elementLabel = $this->Groups->tablename___elementname; //replace 'tablename___elementname' with your element's full name
    $elementData = $this->_row->data->tablename___elementname;

    Template overall structure​

    default.php​
    PHP:
    <?php if ($this->tablePicker != [I]) { ?>[/I]
    <div style="text-align:right">
    <?php echo JText::_('COM_FABRIK_LIST') ?>: <?php echo $this->tablePicker; ?>
    </div>
    <?php } ?>

    <?php if ($this->params->get('show-title', 1)) {?>
    <h1>
    <?php echo $this->table->label;?>
    </h1>
    <?php }?>

    <?php echo $this->table->intro;?>
    <form class="fabrikForm" action="<?php echo $this->table->action;?>" method="post" id="<?php echo $this->formid;?>" name="fabrikList">
    <?php echo $this->loadTemplate('filter'); }?>
    <div class="fabrikDataContainer">
    <?php foreach ($this->pluginBeforeList as $c) {
    echo $c;
    }?>
    <div class="boxflex">
    <div class="fabrikList" id="list_<?php echo $this->table->renderid;?>" >
    <?php
    $gCounter = 0;
    foreach ($this->rows as $groupedby => $group) {
    if ($this->isGrouped) {
    ?>
    <div class="fabrik_groupheading">
    <a href="#" class="toggle">
    <?php echo FabrikHelperHTML::image('orderasc.png', 'list', $this->tmpl, JText::_('COM_FABRIK_TOGGLE'));?>
    <?php echo $this->grouptemplates[$groupedby]; ?> ( <?php echo count($group)?> )
    </a>
    </div>
    <?php }?>
    <div class="fabrik_groupdata">
    <div class="groupdataMsg">
    <div class="emptyDataMessage" style="<?php echo $this->emptyStyle?>">
    <?php echo $this->emptyDataMessage; ?>
    </div>
    </div>
    </div>
    <?php
    foreach ($group as $this->_row) {
    echo $this->loadTemplate('row');
    }
    ?>
    <?php if ($this->hasCalculations) { ?>
    <ul class="fabrik_calculations">
    <?php
    foreach ($this->calculations as $cal) {
    echo "<li class=\"fabrik_row___".$el."\">";
    echo array_key_exists($groupedby, $cal->grouped ) ? $cal->grouped[$groupedby] : $cal->calc;
    echo "</li>";
    }
    ?>
    </ul>
    <?php }
    $gCounter++;
    }?>
    </div>
    <?php
    echo $this->nav;
    print_r($this->hiddenFields);
    ?>
    </div>
    </div>
    </form>

    default_row.php​
    default_row.php is called repeatedly to render all of your Lists rows.

    To access a specific element you can do:
    PHP:
    $this->_row->data->tablename___elementname //replace 'tablename___elementname' with your element's full name
    <?php echo $this->_row->data->table-name___element_name;?>

    Each row has a standard set of properties:
    PHP:
    stdClass Object (
    [data] => stdClass Object (
    [slug] => 64
    [__pk_val] => 64
    [fabrik_select] =>
    [fabrik_view_url] => /fabrik30x/index.php?option=com_fabrik&view=details&formid=40&rowid=64&Itemid=142
    [fabrik_edit_url] => /fabrik30x/index.php?option=com_fabrik&view=form&Itemid=142&formid=40&rowid=64&listid=37
    [fabrik_view] => [View link and icon]
    [fabrik_edit] => [Edit link and icon]
    [fabrik_actions] => <ul> of the application row buttons edit/view/delete/+ any plugin buttons
    )
    [cursor] => 1
    [total] => 16
    [id] => list_37_com_fabrik_37_row_64
    [class] => fabrik_row oddRow0
    )

    Related data links are in this format:
    PHP:
    <?php echo $this->_row->data->{'##1___##2-##3-##4_list_heading'};?>

    Note a default_row.php file is obligatory if you want ajax Lists to work correctly

    default_filter.php (before Fabrik3.5?)​
    Will render any filters you have.
    Since Fabrik3.5 filters are rendered in layouts and must be modified by overriding \components\com_fabrik\layouts\list\fabrik-filters.php

    An example custom default_filter.php template to render the search fields horizontally

    Dumping Data​
    Code:
    var_dump($this->_row);

    default_headings.php​
    Renders the Lists headings.

    default_buttons.php​
    Renders the Lists buttons, such as 'add', 'export to csv', 'import from csv'

    template_css.php​
    This is used to serve a css file whose css is specfic to the list being rendered.

    Contains any template specific Javascript you may wish to use.

    Layout Overrides - List row buttons​


    You can override the markup that is used to generate the list's rows buttons (edit/delete/view etc).

    List's have two styles for rendering their row buttons , these are defined by the Lists' 'links->render buttons as'. You can choose either to render as a dropdown or inline.

    Each button and each 'render buttons as' option has a corresponding layout file, e.g. fabrik-delete-button.php, inline.php and dropdown.php, found in components/com_fabrik/layouts/listactions/

    You can copy this layouts folder and the required layout file to your Joomla template folder's overrides folder, e.g. ./templates/your_template/html/layouts/com_fabrik/listactions/dropdown.php, and this dropdown layout file will be used to render the buttons.

    Example - don't show edit button​



    PHP:

    <?php
    /**
    * Layout: list row buttons - rendered as a Bootstrap dropdown
    *
    * @package Joomla
    * @subpackage Fabrik
    * @copyright Copyright (C) 2005-2013 fabrikar.com - All rights reserved.
    * @license GNU/GPL http://www.gnu.org/copyleft/gpl.html
    * @since 3.0
    */

    // No direct access
    defined('_JEXEC') or die('Restricted access');

    $class = 'btn-group fabrik_action';

    if ($displayData['align'] == 'right')
    {
    $class .= ' pull-right';
    }

    ?>
    <div class="<?php echo $class?>">
    <a class="dropdown-toggle btn btn-mini" data-toggle="dropdown" href="#">
    <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
    <?php foreach ($displayData['items'] as $key => $val)
    {
    if ($key !== 'fabrik_edit')
    {
    echo "<li>" . $val . '</li>';
    }
    }?>
    </ul>
    </div>

    Example - Ajaxify DIV LIST template​
    *Special thanks to the @startpoint for this template contribution.

    PHP:
    <?php
    // No direct access
    defined('_JEXEC') or die('Restricted access');

    $rowClass = isset($this->_row->rowClass) ? $this->_row->rowClass : '';
    $user = JFactory::getUser()->Groups;
    $userKeys = array_keys($user);
    // the first element of your array is:
    $userGroup = $user[$userKeys[0]];

    $list_data = array();
    foreach ($this->headings as $heading => $label) :
    $elem_data = new stdClass;
    $h = $this->headingClass[$heading];
    $c = $this->cellClass[$heading];
    $hStyle = empty($h['style']) ? '' : 'style="' . $h['style'] . '"';
    $cStyle = empty($c['style']) ? '' : 'style="'. $c['style'].'"';
    $lbl = $label;
    $lbl_class = $h['class'];
    $el_class = $c['class'];
    $el_data = @$this->_row->data->$heading;
    if($heading !== 'fabrik_select' && $heading !== 'fabrik_actions'){
    $el_name = explode ("___", $heading)[1];
    $elem_data->el_name = $el_name;
    $elem_data->el_lbl = $lbl;
    $elem_data->lbl_class = $el_class;
    $elem_data->el_class = $el_class;
    $elem_data->el_data = $el_data;
    $list_data[$el_name] = $elem_data;
    }

    if($heading == 'fabrik_actions'){
    $actions_class = $el_class;
    $actions = $el_data;
    $elem_data->actions_class = $actions_class;
    $elem_data->actions = $actions;
    $list_data[$heading] = $elem_data;
    }
    if($heading == 'fabrik_select'){
    $select_class = $el_class;
    $select = $el_data;
    $elem_data->select_class = $select_class;
    $elem_data->select = $select;
    $list_data[$heading] = $elem_data;
    }

    $d = @$this->_row->data->$heading;
    if (isset($this->showEmpty) && $this->showEmpty === false && trim(strip_tags($d)) == '') :
    continue;
    endif;
    endforeach;
    //echo '<pre>list_data' . var_export($list_data, true) . '</pre>';
    ?>
    <div class="<?php echo $rowClass; ?>">
    <div class="row-fluid fabrikDivElement">
    <div class="movie-container">
    <div class="<?php echo $list_data['element_name1']->el_class ?>">
    <?php echo $list_data['element_name1']->el_data ?>
    </div>
    <div class="<?php echo $list_data['element_name2']->el_class ?>">
    <?php echo $list_data['element_name2']->el_data;?>
    </div>
    </div>
    <?php if($userGroup == 6 || $userGroup == 8) : ?>
    <!--
    usergroup 6 -> Custom admin
    usergroup 8 -> Super User
    -->
    <div class="<?php echo $list_data['fabrik_actions']->actions_class ?>">
    <?php echo $list_data['fabrik_actions']->actions ?>
    </div>
    <div class="<?php echo $list_data['fabrik_select']->select_class ?>">
    <?php echo $list_data['fabrik_select']->select ?>
    </div>
    <?php endif; ?>
    </div>
    </div>
Back
Top