75
Views
10
Comments
Issue in tab navigation after using ActiveTab input parameter

I have managed to implement navigation to a specific tab, using the ActiveTab property of the Tabs widget and an input parameter filling this property (as described in different forum posts, like this one)

However, I run into an issue when the user subsequently clicks another tab. The input parameters stay the same (set in the URL) and this somehow causes a blank screen.

Is this an issue that others recognize? How can I solve this issue?

mvp_badge
MVP
Rank: #76

Hi Remco,

Are you trying to implement this for Reactive Web/Mobile or Traditional Web?

I took the liberty of adding a Demo OML for Reactive Web.

Hope it helps.

Regards,

Nordin

TabsReactDemo.oml

mvp_badge
MVP
Rank: #76

Hi Remco,

I think your OML upload got stuck somehow. It keeps showing me this.

Could you try uploading it again?

Regards,

Nordin

mvp_badge
MVP
Rank: #76

Hi Remco,

This is strange indeed. Somehow at the same time when you click one of the SubTabs and the whole thing would just disappear, these errors pop up in the browser. I have tried a few ways of implementing this, but it results in these same errors.

Changing the SubTab parameter in the URL does change the SubTabs accordingly.

I'll do some more tests later today. In the meantime if someone has an idea how to solve this, feel free to post a solution.

Regards,

Nordin 

Rank: #31425

Yes, I have the same issue. Very frustrating that nesting doesn't work properly. 


-JT

Rank: #31425

Hi Guys,

I opened up a SR with OutSystems, but they're taking forever. 

I cloned OutSystemsUI, and modified Tabs->OnReady->Init.js to address a few issues with the nexted tabs. As long as you don't have any empty Tab headers laying in your layout, this should work. Well, it works for me anyways.

Compare the JS below with the first few lines of your init.js, and patch accordingly. (No warrantly implied by below code. Use at own risk. Your mileage may vary. Please contact manufacturer for details.) 


----------------------------init.js------------------------------

window.addEventListener('orientationchange', $actions.OnOrientationChange);
var tab = document.getElementById($parameters.Id);
var list = tab.querySelector('.list');

var init = function() {

    var headerTabs = tab.querySelector(".tabs-header");
    var contentTabs = tab.querySelector(".tabs-content");
    var tabsHeaderItems = headerTabs.querySelectorAll(".tabs-header-tab");
    var tabsContentItems = contentTabs.querySelectorAll(".tabs-content-tab");

    var tabNumber;
   
    for(var i = 0; i < tabsHeaderItems.length; i++) {
       
        tabNumber = i;
       
        tabsHeaderItems[i].setAttribute('data-tab', tabNumber);

        if(tabsContentItems[i] !== undefined) {
           tabsContentItems[i].setAttribute('data-tab', tabNumber);
   tabsContentItems[i].setAttribute('aria-labelledby', tabsHeaderItems[i].getAttribute('id'));  
        }
       
        tabsHeaderItems[i].addEventListener('click', function(e) {
            if(e.currentTarget.offsetParent==headerTabs) {
                $actions.TabsOnClick(parseFloat(e.currentTarget.dataset.tab),e.currentTarget.offsetParent.id);
            }

        });
    }