1. NOTICE: If you are using Fabrik and update to Joomla 3.10, you will need to update to Fabrik 3.10. And, if you are using Fabrik, do not upgrade to Joomla 4, we do not have a supported version ready for release. More information on a release date coming soon. Also, please note that Fabrik 3.10 will not install on any Joomla sites less than 3.8.
    Dismiss Notice

Creating a custom list template

Feb 27, 2020
Creating a custom list template

  • Location (top)

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

    Custom CSS in existing list templates(top)


    Copying an existing template (top)

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


    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)(top)

    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 (Text):
    // 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 (Text):
    $elementLabel = $this->groups->tablename___elementname; //replace 'tablename___elementname' with your element's full name
    $elementData = $this->_row->data->tablename___elementname;

    Template overall structure (top)

    default.php (top)

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

    <?php if ($this->params->get('show-title', 1)) {?>
            <?php echo $this->table->label;?>
    <?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;?>" >
                        $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)?> )
                <?php }?>
                <div class="fabrik_groupdata">
                    <div class="groupdataMsg">
                        <div class="emptyDataMessage" style="<?php echo $this->emptyStyle?>">
                            <?php echo $this->emptyDataMessage; ?>
                    foreach ($group as $this->_row) {
                        echo $this->loadTemplate('row');
                <?php if ($this->hasCalculations) { ?>
                    <ul class="fabrik_calculations">
                            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>";
                  <?php }
                  echo $this->nav;

    default_row.php (top)

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

    To access a specific element you can do:
    $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:
    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 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?) (top)

    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 (top)

    Code (Text):

    default_headings.php (top)

    Renders the lists headings.

    default_buttons.php (top)

    Renders the lists buttons, such as 'add', 'export to csv', 'import from csv'

    template_css.php (top)

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

    javascript.js (top)

    Contains any template specific JavaScript you may wish to use.

    Layout Overrides - List row buttons(top)

    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(top)


    * 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>
    <ul class="dropdown-menu">
    <?php foreach ($displayData['items'] as $key => $val)
    if ($key !== 'fabrik_edit')
    echo "<li>" . $val . '</li>';

    Example - Ajaxify DIV LIST template (top)

    *Special thanks to the @startpoint for this template contribution.

    // 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)) == '') :
    //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 class="<?php echo $list_data['element_name2']->el_class ?>">
                    <?php echo $list_data['element_name2']->el_data;?>
            <?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 class="<?php echo $list_data['fabrik_select']->select_class ?>">
                    <?php echo $list_data['fabrik_select']->select ?>
            <?php endif; ?>
startpoint and daydah like this.