[OutSystems UI Web] Dynamic Tabs not working when used with a list record
outsystems-ui-web
Web icon
Forge component by Platform Maintenance
Application Type
Traditional Web

After update the Outsystems UI Web to version 1.8.15, my dynamics tabs are no longer working, returning the following error:

My current screen logic:

I don't have any value in the 'ActiveTab' input, however it doesn't make any difference (I already tested that..).

I have found a similar thread about this problem in the Reactive tabs (Navigation Tabs based on list | OutSystems ), but this doesn't solve the problem in Traditional.

 Hi José,

Please find attached an example that solves your issue.

The technique is basically the same as for Reactive, with a couple of small differences:

  1. You have to set the attribute 'DataTab' for all TabsHeaderItem and TabsContentItem, to be consistent and synchronized
  2. Your have to place a small Javascript code right after the Tabs element, to basically move the TabsHeaderItem and TabsContentItem elements outside their respective containing lists, and afterwards simply delete the lists from the DOM

I hope this helps.

Best regards,

Paulo Moreira

DynamicTabsWeb.oml

Hi Paulo,

Thank you for the workaround. It will do for now.
Hopefully OutSystems will be able to fix this quickly.

Best regards,
José Pais

Hi José,


Thank you for the report! We will take a look at that, as it might have been an issue introduced with the new supported use-case of using nested tabs.


Are you right now blocked by this? Did the workaround proposed above work for you?


Best regards,

Bernardo Cardoso

Hi Bernardo,

Right now I'm not blocked. It will take at least a few more weeks for us to update the remaining environments, so I hope you guys will be able to fix this before that.

Best regards,
José Pais

Hi @José Pais,


We just released today a new version of OutSystems UI Web (1.9.0), that provides a fix for this issue.


Best regards,
Bernardo Cardoso

For me the issue persists after upgrading to 1.9.

Hi @Alex van Geemen,


Sorry to ear that! Can you please upload an oml with your issue?


Best regards,

Bernardo Cardoso

Hi guys, 

Using the ListRecords class assigned to the RecordList it should fix the issue.

As @Bernardo Cardoso mentioned above we added a fix to be possible to work with nested Tabs, and at the JS we're expecting to have this selector at the RecordList.

Let me know if it solved.

Thanks.
JR

Screenshot 2022-02-01 at 15.29.58.png

Hi José Rio, 

We have upgraded OutSystems UI Web to Stable version 1.8.15 and this issue is still present.

Both the List Records have the Style Class of ListRecords.

The solution fix proposed above works.
https://www.outsystems.com/forums/discussion/75547/dynamic-tabs-not-working-when-used-with-a-list-record/#Post310714

ServiceStudio
Version 11.14.7
Build 58100

Platform
Version 11.10.4 (Build 29633)

Thanks
Ouen

Hi Ouen,

There are some use cases that stil don't work. If for some reason you are using those lists on an Ajax Refresh, it will not work.


@José Rio

Thanks,

José Pais

Hi @Ouen Worth, @José Pais.

We'll add this into our backlog in order to better understand why ListRecords selector is not fixing the issue.

Once we've feedback about it, we let you know.

Thank you for your feedback!

JR

Hi @Ouen Worth

Thanks for sharing the OML with the team, I was able to look into it and I have some suggestions for you: 

In your case, you have the same name for all Header Items and the same name for all ContentItems; furthermore, they are mismatched so this won't work at all. 

I have fixed it and tested your OML again using the parameters you provided (OutSystems UI 1.8.15 and platform 11.10.4) and could confirm the error you mentioned. I then tested your OML with the latest version (OutSystems UI 1.9) and the error is no longer present. 

So my suggestion here is to update your OutSystems UI to the latest version. 


@José Pais & @Alex van Geemen I would really appreciate if you could share with the team an OML reproducing your use-case and also information on platform & OutSystems UI version.


Regards,

Joana Borges

@José Pais, I also have that scenario which is not great but we are forcing a reload of the whole page at the moment to get around that problem. 

@José Rio thanks. Let me know if you need an OML example of the issue.

@Ouen Worth If you could share it it will indeed help.

Once again, thank you all.

JR

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