1. Fabrik 3.7 is now available. This version contains critical security updates, please update as soon as possible. Please remember to backup your site before updating, we also recommend testing your updates on development sites if possible.
  2. We had to restore the site around midday (CST) on Wed 7/26 from a backup approximately 8 hours old. So a few posts in the forums were lost. You may want to check to see if you need to re-post anything.

Creating a custom list template

Aug 23, 2016
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)

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

    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.

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

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

    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)



    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>
     
daydah likes this.