Hello everyone,


I have been trying to add a left and right arrow inside the tabs that change dynamically according to the content inside/outside the viewport. I found that JS in the Tabs component in an action called AddOverlay that i believe could have the solution for my issue with a few modifications, but i am new to JS and none of my tests provided any results. Does anyone have any idea? Can i actually use that code below to achieve it? Thank you.


setTimeout(function() {
    if($parameters.ActiveTab == (countTabs - isEmpty)) {
        if(isRTL) {
           
            if(tabOverlay.classList.contains("left")){
                tabOverlay.classList.remove("left");
            }
           
        } else {
           
            if(tabOverlay.classList.contains("right")){
                tabOverlay.classList.remove("right");
            }
           
        }
    } else {
        if(isRTL){
           
            if(!tabOverlay.classList.contains("left")){
                tabOverlay.classList.add("left");
            }
           
        } else {
           
            if(!tabOverlay.classList.contains("right")){
                tabOverlay.classList.add("right");
            }
           
        }

Can you provide some more info on what you're trying to accomplish?

A drawing of the desired outcome and/or an OML illustrating how you're implementing the tabs might be helpful in answering your question.

Hello Andrew,


Thats a mock up for what i intend to do. Basicaly, everytime you have tabs outside the viewport an arrow should show indicating on either left, right or both sides of the header in the position where more content is available.

I already achieved one of the arrows by taking advatage of the LTR/RTL js from the pattern, but that only allows me to have one arrow and not both.  


How many tabs are we talking about? I was able to have 6 tabs displayed simultaneously, without any manual intervention. More than that, and I'd probably consider a different UX pattern for the content.

Hello Andrew,

I am not trying to increase the number of tabs, i am trying to add navigational arrows on the header dynamicaly...

Yes, I understand that. I'm trying to understand the underlying reason for adding the arrows, since it changes the navigational pattern significantly.

The reason the patterns are there is because the designers of the UI framework looked at many popular applications to see the common UI patterns, and modeled those in the framework.

So what I'm getting at is that before you decide to modify a well-known and common UI pattern, it may be worth taking a step back to consider whether the pattern is the correct one for what you're trying to accomplish, because using a pattern that is not a good match to your use case can reduce usability of your application.

Perhaps I'm not clearly understanding what the purpose of the arrows is. If it is to navigate to additional tabs, that really changes the way the Tabs pattern works, and I'm not sure I'd recommend that.

1 - The underlying reason is upon clients request. It does not change anything in the pattern, in fact, like i stated, i have one arrow already working - its only a visual element, it doesnt affect the behaviour of the pattern in any way. 

2 - Thats very nice and i am very aware of that, however, customers dont like using the same styles as everyone else, particulary for b2c apps...

3 - Yes I am pretty sure is the correct one.

4- Well that could be my fault, i guess i didnt explain myself very well. In fact, the best way to see it working is just pasting this code to the pattern:


.tabs-overlay.right::before {

  1.     content: "?";
  2.     font-family: "Font Awesome 5 Pro"; *change font awesome pro though*
  3.     position: absolute;
  4.     right: 0.1em;
  5.     top: 50%;
  6.     transform: translateY(-50%);
  7.     font-weight: 100;
  8.     font-size: 2em;

}


You will see the behaviour that I want, however it wont do the same for overlay::left because that code was made for RTL/LTR behaviour and not for what I am trying to acomplish here.

I hope I made myself clear this time, sorry for some confusion.

This is pretty close to the behaviour I am looking for:

https://joao-grou.outsystemscloud.com/PreviewInDevices/?IsMobilePreview=True&DeviceName=Smartphone&URL=/JTMobile/Tabs?_ts=637030434675903620

I would still like input on improvements

Update:

Its now working exactly as intended, thank you all for the inputs.

Update:

Its now working exactly as intended, thank you all for the inputs.