Fabrik 3.9 has been released. If you have updated Joomla to 3.9, this is a required update.
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

Dumping Data (top)

Code (Text):

var_dump($this->_row);

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>

Example - Ajaxify DIV LIST template (top)
*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) : ?>

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

daydah likes this.

(Like) (32579 Views)

Last Modified: Jun 18, 2019 at 9:29 AM (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)

Dumping Data (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)

Example - Ajaxify DIV LIST template (top)