Repeat Group Navigation

[trb]

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

 

[troester]

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]

And if needed, here's a small script that keeps / scrolls to top if new repeat group is added:

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

 

[trb]

Thanks troester and juuser ... I will give it a try.