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


  • Views Views: 17,664
  • Last updated Last updated:
  • Migration to using JLayouts is currently a work in progress towards a release of Fabrik 3.4

    Joomla's JLayouts system allows you to override specific parts of a page's HTML. In essence it separates out the HTML for an element into a separate JLayout php file, separating function from form, and making it easy to tweak the HTML of each element and ensuring that Elements are rendered consistently. Fabrik is working towards rendering most of the front-end HTML with JLayouts. For example, this will allow you to create a custom look for all of Fabrik's <select> dropdowns, or alter the way a list filter is shown.

    Joomla searches for a layout file in a series of folders. For example the Button element's layouts are searched for in the following folders:
    1. /templates/{current-joomla-template}/html/layouts/com_fabrik
    2. /templates/{current-joomla-template}/html/layouts
    3. /layouts
    4. /plugins/fabrik_element/button/layouts
    5. /components/com_fabrik/layouts
    Fabrik provides its default layout in either /plugins/fabrik_element/button/layouts or components/com_fabrik/layouts.
    Fabrik default layout is based on Joomla's Bootstrap2 (Nov 2015). If you are running a Bootstrap3 template you can use https://github.com/Fabrik/bootstrap3-jlayouts to override the Bootstrap2 settings.

    If you copied the layout file into any one of the first three locations, and modified it, you would see those modifications rendered on the site when you view the button.

    Layout file names​

    Our files are named in a very specific to avoid potential clashes with other layouts:


    Element labels​

    The default layout for the element label is components/com_fabrik/layouts/element/fabrik-element-label.php

    Current status​

    As of 17 September 2015, the following Elements have been converted to JLayouts in Github (or at least these Elements have JLayout files which Rob says are the indicator of having been converted):

    • Access
    • Attending
    • Birthday
    • Button
    • Calc
    • Captcha
    • Cascading Drop Down
    • Colour Picker
    • Database Join
    • Date
    • Digital Signature
    • Display
    • Dropdown
    • Facebook Activity Feed
    • Facebook Comment
    • Facebook Like
    • Facebook Likebox
    • Facebook Recommendations
    • Field
    • File Upload
    • Folder
    • Google Map
    • Google-ometer
    • Image
    • Internal Id
    • IP
    • JS Periodical
    • Link
    • Notes
    • Password
    • Picklist
    • Radio Button
    • Rating
    • Slider
    • Spotify
    • Text Area
    • Thumbs
    • Time
    • Timer
    • Timestamp
    • User
    • User Group
    • View Level
    • Yes / No
    • Youtube

    whilst the following Elements remain to be converted:

    • Checkbox
    • Count
    • Tags

    Overriding an JLayout for all elements​

    You will need to create a folder in your active Joomla! template directory:

    Then copy the JLayout file from plugins/fabrik_element/{elements_plugin}/layouts/{layout_file}

    Overriding an element JLayout for a specific element​

    You will need to create a folder in your active Joomla! template directory:

    Replace {tablename___elementname} with your element's full name. Then copy the JLayout file from plugins/fabrik_element/{elements_plugin}/layouts/{layout_file}


    Lets say you have a Dropdown element, full element name 'table___age_range', which has a list filter set up to render as a checkbox list, but rather than showing the standard checkbox list you want to show a series of Bootstrap buttons.

    First make a jLayout folder in your current template for the age_range element:

    The standard checkbox filter jLayout file is found in :


    ... which you can either copy and modify, or simply override with new code, in your newly created jLayout folder. In the case of list filter layouts, the name of the file needs to be changed to fabrik-element-[elementtype]-list-filter-[filtertype].php, so in this case the name would be fabrik-element-dropdown-list-filter-checkbox.php.

    In order to render as Bootstrap buttons, you would use this code:


    defined('JPATH_BASE') or die;

    $d = $displayData;


    <div class="btn-group" data-toggle="buttons">
    <?php for ($i = 0; $i < count($d->values); $i++) :
    $v = $d->values[$i];
    $checked = in_array($v, $d->default) ? 'checked="checked"' : '';
    $active = in_array($v, $d->default) ? 'active' : '';
    <label class="btn btn-default <?php echo $active; ?>">
    <input type="checkbox" value="<?php echo $v; ?>" <?php echo $checked; ?> name="<?php echo $d->name; ?>[]" / ><?php echo $d->labels[$i]; ?>

    Save the file and now your checkbox filter will be rendered as a Bootstrap button group.

    Note: the Checkbox element already overrides the checkbox filter, so in this case you need to copy the file:
    plugins/fabrik_element/checkbox/layouts/fabrik-element-radiobutton-list-filter-checkbox.php into your new folder.

    List Layouts​

    We are gradually converting components of the List display to layouts. For example, you can now override the pagination links and footer. This can be done either globally, by copying one of the files in ...


    ... to ...


    ... or for a specific list, to ...


    ... where X is the numeric ID of your list, like list_7, and edit the file (like fabrik-pagination-footer.php) to suit.

    ... or ...


    Form Layouts​

    Essentially the same as list layouts. See available layouts in /components/com_fabrik/layouts/form