• Hello Fabrik Community

    Fabrik is now in the hands of the development team that brought you Fabrik for Joomla 4. We have recently transitioned the Fabrik site over to a new server and are busy trying to clean it up. We have upgraded the site to Joomla 4 and are running the latest version of Fabrik 4. We have also upgraded the Xenforo forum software to the latest version. Many of the widgets you might have been used to on the forum are no longer operational, many abandoned by the developers. We hope to bring back some of the important ones as we have time.

    Exciting times to be sure.

    The Fabrik 4.0 Official release is now available. In addition, the Fabrik codebase is now available in a public repository. See the notices about these in the announcements section

    We wish to shout out a very big Thank You to all of you who have made donations. They have really helped. But we can always use more...wink..wink..

    Also a big Thank You to those of you who have been assisting others in the forum. This takes a very big burden off of us as we work on bugs, the website and the future of Fabrik.

JLayouts

  • Views Views: 17,151
  • 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:

    fabrik-{plugin}-{type}-{location}-{moreinfo}.php

    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:
    /templates/{current-joomla-template}/html/layouts/com_fabrik/element/

    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:
    /templates/{current-joomla-template}/html/layouts/com_fabrik/element/{tablename___elementname}
    or
    /components/com_fabrik/views/form/tmpl/<yourtemplate>/layouts/element/{tablename___elementname}

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

    Example​

    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:
    /templates/{current-joomla-template}/html/layouts/com_fabrik/Elements/table___age_range
    or
    /components/com_fabrik/views/form/tmpl/<yourtemplate>/layouts/element/table___age_range

    The standard checkbox filter jLayout file is found in :

    components/com_fabrik/layouts/list/filter/fabrik-filter-checkbox.php

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

    PHP:

    <?php
    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]; ?>
    </label>
    <?php
    endfor;
    ?>
    </div>

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

    /components/com_fabrik/layouts/pagination

    ... to ...

    /templates/{current-joomla-template}/html/layouts/com_fabrik/pagination

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

    /templates/{current-joomla-template}/html/layouts/com_fabrik/list_X/pagination

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

    ... or ...

    ./components/com_fabrik/views/list/tmpl/<yourtemplate>/layouts

    Form Layouts​


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