• Hello Fabrik Community

    Fabrik is now in the hands of the development team that brought you Fabrik for Joomla 4. We have recently transitioned the Fabrik site over to a new server and are busy trying to clean it up. We have upgraded the site to Joomla 4 and are running the latest version of Fabrik 4. We have also upgraded the Xenforo forum software to the latest version. Many of the widgets you might have been used to on the forum are no longer operational, many abandoned by the developers. We hope to bring back some of the important ones as we have time.

    Exciting times to be sure.

    The Fabrik 4.0 Official release is now available. In addition, the Fabrik codebase is now available in a public repository. See the notices about these in the announcements section

    We wish to shout out a very big Thank You to all of you who have made donations. They have really helped. But we can always use more...wink..wink..

    Also a big Thank You to those of you who have been assisting others in the forum. This takes a very big burden off of us as we work on bugs, the website and the future of Fabrik.

Creating a custom list template

  • Views Views: 39,557
  • 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