Payment Plugins Poll
We need your feedback on the need for updated payment plugins. Please go here and give us your feedback.
Joomla 5.1
For running J!5.1 you must install Fabrik 4.1
See also Announcements
Subscription and download (Fabrik 4.1 for J!4.2+ and J!5.1) are working now
See Announcement
Please post subscription questions and issues here
We have resolved the issue with the J! updater and this will be fixed in the next release.

Creating a custom list template

Views Views: 40,392
Last updated Last updated: Feb 27, 2020

Page

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

)

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>

Creating a custom list template

Navigation

Wiki index

Contents

Location

Custom CSS in existing list templates

Copying an existing template

Template overall structure

Layout Overrides - List row buttons

Creating a custom list template

Navigation

Wiki index

Contents

Location​

Custom CSS in existing list templates​

Copying an existing template​

Template overall structure​

Layout Overrides - List row buttons​

Location

Custom CSS in existing list templates

Copying an existing template

Template overall structure

Layout Overrides - List row buttons