1. NOTICE: If you are using Fabrik and update to Joomla 3.10, you will need to update to Fabrik 3.10. And, if you are using Fabrik, do not upgrade to Joomla 4, we do not have a supported version ready for release. More information on a release date coming soon. Also, please note that Fabrik 3.10 will not install on any Joomla sites less than 3.8.
    Dismiss Notice

Repeat Group Navigation

Discussion in 'Community' started by trb, Jan 14, 2022.

  1. trb

    trb Member

    Level: Community
    I have a form with a repeat group which has many elements in a single column layout, so the group is somewhat long. I need to keep the single column layout. My application consists of users who often create several ( 5 or 6) repeat groups and fill out many fields before submitting the form.

    When the + icon is clicked to open a repeat group, the user is delivered to the bottom of the group and they then need to scroll up the page to the top of the group to begin filling the form from top to bottom.

    When they finish filling the fields of the first group they are at the bottom and need to now scroll up to the top to click the + icon to create another group, which delivers them to the bottom of that group...which requires them to scroll up to the top, etc, etc

    The navigation flow is not user friendly and very frustrating if your application requires a long single column repeat group.

    My questions:
    1) Can the user be kept at the top of the repeat group when the + icon is clicked instead of being delivered to the bottom of the group?

    2) Can the + and - icons be located at the bottom of the repeat groups instead of at the top?

    3) As an alternative to #2) can the + and - icons be duplicated to be at the top AND bottom of the repeat group?

    4) Is it possible to separate the + and - icons, for example, so that the - remains at the top of the group but the plus moves to the bottom of the group ?

    Thanks for your help in advance...
     
  2. troester

    troester Well-Known Member Staff Member

    Level: Community
    You can create a custom form template and modify default_repeatgroup.php, e.g. move or split the repeat group buttons part.
    Make sure to keep the 'structure', i.e. conditions and CSS class 'fabrikGroupRepeater'
     
    juuser likes this.
  3. juuser

    juuser Well-Known Member

    Level: Community
    And if needed, here's a small script that keeps / scrolls to top if new repeat group is added:
    Code (Javascript):
    requirejs(['fab/fabrik'], function () {

        scrollLock = "0";

        jQuery(window).on("scroll", function() {
            if (scrollLock == "1") {
                jQuery(window).scrollTop(0);
            }
        });
     
        jQuery(".addGroup").on("click", function() {
            scrollLock = "1";
        });
     
        Fabrik.addEvent('fabrik.form.group.duplicate.end', function (form, event) {
            //adds click event also to newly added repeat group add-buttons
            jQuery(".addGroup").on("click", function() {
                scrollLock = "1";
            });
         
            setTimeout(function() {
                scrollLock = "0";  
            }, 1000);
        });
     
    });
    This needs to be added to form_XX.js
     
    hominid4 and troester like this.
  4. trb

    trb Member

    Level: Community
    Thanks troester and juuser ... I will give it a try.
     

Share This Page