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?

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

Nordin Ahdi wrote:

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

Hi Nordin,

Thanks for your help. I have adjusted your OML since I see the issue is caused by a slightly more complicated situation. I have subtabs within the tabs. On changing these, the real issue occurs.


Hi Remco,

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

Could you try uploading it again?

Regards,

Nordin

Nordin Ahdi wrote:

Hi Remco,

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

Could you try uploading it again?

Regards,

Nordin



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 

Nordin Ahdi wrote:

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 


Hello,

Nested Tabs is not possible in Reactive Application it wont work as excepted and this is known issue.

OS Team is working on it 

Thanks and Regards,

Gandeev Boddeti wrote:

Nordin Ahdi wrote:

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 


Hello,

Nested Tabs is not possible in Reactive Application it wont work as excepted and this is known issue.

OS Team is working on it 

Thanks and Regards,

Thanks a lot for this clarification, although I'm of course far from happy with the conclusion... I see that the same issue even occurs when I mimic tab behaviour with a 'tab-select' screen action and custom containers.

Is there any idea when this is fixed?


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


-JT

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);
            }

        });
    }

Actually, use this:


//Tabs->OnReady->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:not([data-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('data-tab-group', tab.id);
   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);
            }
        });
    }

-------snip-------

//Tabs->ChangeTab->changeTab.js

var tab = document.getElementById($parameters.id);
var headerTabs = tab.querySelector(".tabs-header");
var contentTabs = tab.querySelector(".tabs-content");

var newTabHeader = headerTabs.querySelector("[data-tab = '" + $parameters.ActiveTab + "']");
var newTabContent = contentTabs.querySelector("[data-tab-group = '" + tab.id + "'][data-tab = '" + $parameters.ActiveTab + "']");
 
    newTabHeader.classList.add('active');
    newTabHeader.setAttribute("tabindex", "0");
    newTabHeader.setAttribute("aria-selected", "true");

    newTabContent.classList.add('open');
    newTabContent.setAttribute("tabindex", "0");


-------snip-------

//Tabs->RemoveActive->RemoveActive.js

var tab = document.getElementById($parameters.Id);
var headerTabs = tab.querySelector(".tabs-header");
var contentTabs = tab.querySelector(".tabs-content");

var tabHeader = headerTabs.querySelector("[data-tab = '" + $parameters.activeTab + "']");
var tabContent = contentTabs.querySelector("[data-tab = '" + $parameters.activeTab + "'][data-tab-group = '" + tab.id +"']");

if(tabHeader) {
    tabHeader.classList.remove('active');
    tabHeader.setAttribute("tabindex", "-1");
    tabHeader.setAttribute("aria-selected", "false");
}

if(tabContent){
    tabContent.classList.remove('open');
    tabContent.setAttribute("tabindex", "-1");
}

-------snip--------