[OutSystems UI Web] Current TabIndex does not work properly when you have Tabs inside another Tab
Forge component by OutSystems R&D

The CurrentTabIndex of the upper level Tab is mixed with the Tabs amount of the internal Navigation / Tab


Tab 1 Tab 2

Inside Tab 1 -> Tab 1.1 Tab 1.2

When evaluate the currenttabindex on tab change event, it send 2 always.


Hi Horacio,


Have you tried changing the DataTab to a unique value in the TabsHeaderItem? Like change your tab inside the tab to tab2-one and so on.


Also how are you monitoring the currenttabindex are you using only onchangeTabEvent to get the CurrentTab or are you using a LocalVariable to check the ActiveTab?

Hi Clintjie Lo

Yes, each TabsHeaderItem has a unique name on DataTab, I am using onchangeTabEvent to get de CurrentTab.

Clintjie Lo wrote:

Hi Horacio,


Have you tried changing the DataTab to a unique value in the TabsHeaderItem? Like change your tab inside the tab to tab2-one and so on.


Also how are you monitoring the currenttabindex are you using only onchangeTabEvent to get the CurrentTab or are you using a LocalVariable to check the ActiveTab?



Horacio Villalba wrote:

Hi Clintjie Lo

Yes, each TabsHeaderItem has a unique name on DataTab, I am using onchangeTabEvent to get de CurrentTab.

Clintjie Lo wrote:

Hi Horacio,


Have you tried changing the DataTab to a unique value in the TabsHeaderItem? Like change your tab inside the tab to tab2-one and so on.


Also how are you monitoring the currenttabindex are you using only onchangeTabEvent to get the CurrentTab or are you using a LocalVariable to check the ActiveTab?


You should also match each TabsHeaderItem with the DataTab corresponsing to the TabsContentItem other than that I tried it on my personal environment and it behaves properly with just TabsOnChange event inside the action and nothing else.

If you could share an image of how yours is setup that would really help in finding out what the problem is.



This is the structure, the mapping Item and Content is correct, 



The TabsOnTabChange always shows Current Tab 2





TabsTest.oml

Hi Horacio,

I was able to emulate the error you're encountering seems like the input parameter that gets accepted for the Tabs seems to overlap one another. My other suggestion would be to open a clone of the Tabs and try to modify it so that the javascript can be recognized that one tab is different from another.

Hi everyone,

I had the same problem and after 2 days trying to undestand the easy way to fix, I finally did.

I did it on the version OutSystemsUIWeb Version 1.8.7.

As I am only employee, and I dont have a role to change directly there source of OutSystemsUIWeb/Tab Object, I overwrite the script of the Tab into my page (where I also have many Tab inside other).

Acctually I put into each item Header a variable called "indice" as a sequential number, and I reset it when I found a new Tab inside.

Each Tab main has their headers with a sequential number. 0,1,2,3... And each click I get this attribute and return.

follow and replace the original javascript from Tab 1.8.7. 

To get the original, go to Tab into OutsystemUIWeb Tab webblock locate javascript, and there are the code.


locate:

var start = function(widgetIdParam, onChangeId) {

        // Sets main objects

        widgetId = widgetIdParam;

        tabs = document.querySelector('#' + widgetId + ' .tabs');

        tabsHeaderItems = tabs.querySelectorAll('.tabs-header-item');


        // Accessibility tabindex change values to all tabsHeaderItems

        tabsHeaderItems = [].slice.call(tabsHeaderItems);

        tabsHeaderItems.forEach(function(item) {

            item.setAttribute('tabindex', "-1");

        });

Replace to:

    var start = function(widgetIdParam, onChangeId) {

        // Sets main objects

        widgetId = widgetIdParam;

        tabs = document.querySelector('#' + widgetId + ' .tabs');

        tabsHeaderItems = tabs.querySelectorAll('.tabs-header-item');


        // Accessibility tabindex change values to all tabsHeaderItems

        tabsHeaderItems = [].slice.call(tabsHeaderItems);

        cont=0;

        paiTab='';

        tabsHeaderItems.forEach(function(item) {

            item.setAttribute('tabindex', "-1");

            if(paiTab!=item.parentElement.id){ //each node main tab, reset cont

                cont=0

            }

            item.setAttribute('indice',cont++); // putting number of index direct into tab header. Onclick return this indice

            paiTab=item.parentElement.id

        });


Locate:

    var onTabsKeypress = function(e) {

....

...

...

        // get index from the active Tab

        getCurrentIndex();

Replace to:

Remove the code;

        // get index from the active Tab

        getCurrentIndex();


Locate:

    var onTabsClick = function(e) {

        var target = e.target;

...

...

        // get index from the active Tab

        getCurrentIndex(); 

Move and Replace to:

...

...

            setTimeout(function(){

                TriggerEvents(changeId, currentTabIndex);

            }, 0);

           // get index from the active Tab

           getCurrentIndex(clickedTabHeader);

        }


Locate:

    var getCurrentIndex = function() {

        for(var i = 0; i < tabsContentItems.length; i++) {

            if(tabsContentItems[i].classList.contains('active')) {

                currentTabIndex = i;

            }  

        }


    }

Replace to:

    var getCurrentIndex = function(ItemHeader) {

currentTabIndex = parseInt(ItemHeader.getAttribute('indice'));

/*Old code

for(var i = 0; i < tabsContentItems.length; i++) {

            if(tabsContentItems[i].classList.contains('active')) {

                currentTabIndex = i;

            }  

        }*/


    }




printTab.PNG

Only to continue the post before.

following the oml.

TabTestInside.oml

Hello everyone.

First of all, thank you for the feedback given.
Since this is not a very usual UX pattern it skipped our radars and nested components is something that we are actively looking at at this moment, mainly for the OutSystems UI.
In order to provide an out-of-the-box solution this was added to our backlog and once is done we'll add it to the next release of OutSystems UI Web.


Best Regards,
GM

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.