Fabrik 3.8.1 has been released. It is mostly bug fixes and feature enhancements, but does include two new plugins (push notifications, and the sequence element). As usual we strongly recommend testing the new release on a sandbox if your application is mission critical, and always do an Akeeba backup before updating.
Dismiss Notice

Creating a custom list template

Page

Contents
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.

(Like) (29264 Views)

Last Modified: Aug 23, 2016 at 10:37 PM (Cached)

Log in

Useful Searches

Creating a custom list template

Contents

Location (top)

Custom CSS in existing list templates(top)

Copying an existing template (top)

Creating a catalog like list view (div template)(top)

Template overall structure (top)

default.php (top)

default_row.php (top)

default_filter.php (before Fabrik3.5?) (top)

default_headings.php (top)

default_buttons.php (top)

template_css.php (top)

javascript.js (top)

Layout Overrides - List row buttons(top)

Example - don't show edit button(top)