A new version of Full Calendar is now available.
See the details here

Creating a custom list template

Views Views: 40,841
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