Javascript

  • Views Views: 25,660
  • Last updated Last updated:
  • Fabrik can be greatly extended with the use of JavaScript to code complex interactions.

    You can add custom js files to your list, form and details views

    Javascript location​

    Custom javascript files should be located in:
    /components/com_fabrik/js​

    Lists​

    For Lists you should name your file list_X.js where X is the list's id.

    Note: For backwards compatibility, if you are still using the depreciated table_X.js files then these are loaded in preference to list_X.js files.

    Forms​

    Fabrik 2.x and 3.0:
    For Forms and details views your file should be form_X.js where X is the form's id.

    Fabrik 3.1 onwards:
    In Fabrik 3.1, Details views have their own templates so for details views your file should de details_X.js where X is the details view's form id.

    For form views your file should be still be form_X.js where X is the form's id.

    Note: For backwards compatibility, if you are using simply X.js files then these are loaded in preference to form_x.js / details_x.js files

    In Fabrik 3.1 we create separate JavaScript objects for each form found on the page, this means that you can potentially have 2 Forms which display different records on the same page, for example:

    Fabrik.blocks['form_8'] - a 'create new entry' form
    Fabrik.blocks['form_8_1'] - controls the form which is editing record id=1

    Its probable that you want to use the same JavaScript for both of these form objects. To achieve this you should use the following script located in components/com_fabrik/js/form_8.js:


    JavaScript:

    /**
    * Ensure that Fabrik's loaded
    */

    requirejs(['fab/fabrik'], function (Fabrik) {

    // The block you want to use
    var blockRef = 'form_8';

    // Should we use an exact match for the blockRef?
    var exact = false;

    var form = Fabrik.getBlock(blockRef, exact, function (block) {

    // This callback function is run once the block has been loaded.
    // The variable 'block' refers to Fabirk.blocks object that controls the form.
    var v = block.Elements.get('tablename___elementname').get('value');

    // If your element is in a repeat group its name is prefixed with _0, _1, _2 etc - to get all element values in an array....
    var values = [];
    Object.each(block.Elements, function (element, key) {
    if (key.contains('tablename___elementname')) {
    values.push(element.get('value'));
    }
    });
    });
    });

    If you wanted to target only Fabrik.blocks['form_8'] you would use:

    JavaScript:

    /**
    * Ensure that Fabrik's loaded
    */

    requirejs(['fab/fabrik'], function (Fabrik) {

    // The block you want to use
    var blockRef = 'form_8';

    // Should we use an exact match for the blockRef?
    var exact = true;

    var form = Fabrik.getBlock(blockRef, exact, function (block) {

    // This callback function is run once the block has been loaded.
    // The variable 'block' refers to Fabirk.blocks object that controls the form.
    var v = block.Elements.get('tablename___elementname').get('value');
    });
    });

    See also https://fabrikar.com/forums/index.php?wiki/form-javascript
Back
Top