Section Index Initialisation
Application Type
Mobile
Service Studio Version
11.12.5 (Build 51077)
Platform Version
11.12.2 (Build 31091)

Hello,

After observing some odd behaviour in the SectionIndex widget, I have found an oddity in its JavaScript. 

I have created a SectionIndex on a page with some unrelated lists, then one Section (Let's call it A), followed by a List with virtualisation disabled which contains more Sections (B, C, ...). Now most of the time, I see the Section Index I expect (A, B, C), but sometimes the A is missing, sometimes the whole index doesn't appear and I always get the following console warning: The list that SectionIndex is watching does not have the virtualization disabled. Please, add disable-virtualization=true through Attributes section on the list widget containing the section patterns.

This behaviour puzzled me, until I examined the Init code in the SectionIndex widget and found the following lines: 


In the blue line, the code checks for the first list of the page. In the yellow and green lines, we see it being used to check the status of the sections. However, this assumes that all sections are contained within the first list of the page, which is a bold assumption; it is false in my case, and I expect in many others.

This explains the warning about the list (as the yellow line is checking the wrong list), and it may explain why the section index is sometimes incomplete or missing. The green line is supposed to wait for all sections to be loaded before rendering the section index, but it is instead waiting for a completely unrelated list.


I'll probably have to write my own SectionIndex widget to get this working, but in the meantime I'd like to know:

1. Is Outsystems aware of this mistake in their code?

2. Do you have any advice on how to check if the actual sections are loaded? From the green line, I assume that lists automatically gain a list-loading class while they're loading so I'll check there first, but do you have any advice on the separate Section (A) which is not in a list?


Cheers,

Joris

Hi Joris,

i don't think the separate section is the problem, but the fact that your list is not the first list on the screen, as that is the only list it is waiting for to load.

That separate A section will be there, regardless of whether data is loaded, so that is not the cause of your problem, I think.

So, me being a low code developer wanting to avoid doing anything javascript if I can help it, I would maybe try to add another list at the very beginning of the screen, to make sure it's the first one, bound to the same fetch that your actual list for BCD sections is bound to, both lists with the disable-virtualisation=true, and that first list only showing an empty container, or maybe within a container display:none, to not affect your screen.

All of this of course a dirty workaround until OutsystemsUI has fixed this.

As for the real solution, @Bernardo Cardoso , as a developer, I wouldn't mind having to tell the widget what list widgets to look out for, so having an input parameter as a list of widget id's or something like that.

Dorine

Hi Dorine,

Thanks for the input! 

Yes, that might be one of the solutions on a future improvement on the pattern. Otherwise, I don't think we are able to automagically make it work without some sort of input parameter for that!


Best regards

well,

you could make your javascript code find all the lists that have sections in them, but that would break if a developer wants to put 2 section indexes on the same screen, each indexing another list.  So that would be better than now, but still have limitations.

Hi Dorine, thanks for your thoughts. As a solution to having multiple section indexes: how about we add an input parameter with a class to search for? You then add the same class to every list with a section index, and upon initialisation, the javascript searches for all lists with that class.

It would be a bit complex for people who don't know their HTML, but it could technically work.

That said, it's not my use case and my time is limited, so I think I'll just make one where the input parameter is the list ID. I could add it to the forge once I'm done.

mvp_badge
MVP

Hi Joris,

I think it's best to open a Support Case with the description above, so OS is made aware of it.

EDIT: I've also asked the OutSystems UI team to take a look at it.

Hi @Joris Albeda,


Thank you for the report! 

Yes, that is indeed an issue on the SectionIndex code.  We will add this to our backlog and work on an improvement as soon as possible!


To answer your second point, that is indeed one of the main struggles to make it work. The real problem is not that the List is loading or not, but to know to what list to look for on the screen. 

For that reason, we usually advise using this pattern on more simple screens, where there's only one main list of sections to look for.


Best regards,

Bernardo Cardoso


Hello @Bernardo Cardoso,

Thanks for your reply. Good to know it's on the backlog. Do you want me to open a support case as @Kilian Hekhuis suggested, or will this thread do?

In the meantime, as I do need this working for my project, I guess I'll make my own version of the SectionIndex that takes a ListId as an input parameter. I could put it on the forge once it's done.

See you,
Joris

Hi Joris,

i don't think the separate section is the problem, but the fact that your list is not the first list on the screen, as that is the only list it is waiting for to load.

That separate A section will be there, regardless of whether data is loaded, so that is not the cause of your problem, I think.

So, me being a low code developer wanting to avoid doing anything javascript if I can help it, I would maybe try to add another list at the very beginning of the screen, to make sure it's the first one, bound to the same fetch that your actual list for BCD sections is bound to, both lists with the disable-virtualisation=true, and that first list only showing an empty container, or maybe within a container display:none, to not affect your screen.

All of this of course a dirty workaround until OutsystemsUI has fixed this.

As for the real solution, @Bernardo Cardoso , as a developer, I wouldn't mind having to tell the widget what list widgets to look out for, so having an input parameter as a list of widget id's or something like that.

Dorine

Hi Dorine,

Thanks for the input! 

Yes, that might be one of the solutions on a future improvement on the pattern. Otherwise, I don't think we are able to automagically make it work without some sort of input parameter for that!


Best regards

well,

you could make your javascript code find all the lists that have sections in them, but that would break if a developer wants to put 2 section indexes on the same screen, each indexing another list.  So that would be better than now, but still have limitations.

Hi Dorine, thanks for your thoughts. As a solution to having multiple section indexes: how about we add an input parameter with a class to search for? You then add the same class to every list with a section index, and upon initialisation, the javascript searches for all lists with that class.

It would be a bit complex for people who don't know their HTML, but it could technically work.

That said, it's not my use case and my time is limited, so I think I'll just make one where the input parameter is the list ID. I could add it to the forge once I'm done.

Ok,

so i made a little demo to try this out,

adding a empty list bound to same source, makes sure the list with sections is there before the section index gets built, as expected.

BUT, another problem is visible in demo : refetching the data, doesn't rebuild the section index, and all indexing into list sections, is broken.

see attached oml

Dorine

QDP_SectionIndexError.oml

Hi Dorine,

Awesome, thanks for trying this out!
I imagine this could be fixed by calling the Init js again from an OnParametersChanged event?

Joris

don't know,

i know close to nothing about JS, I am of the belief that there is something seriously wrong if i have to dig into and call parts of the outsystems ui or platform code to make a widget work correctly.

Actually, what I said is already happening. It IS calling the init function again. I'm currently investigating what's going wrong.

Hi Joris.
Thanks for the detailed feedback you provided.

In fact, our implementation is only waiting for the first list on the page to be rendered before setting up the section index pattern, without including others that might not be visible yet. For now, I would recommend you to follow the best practices in these scenarios and implement an If Widget around each section and section index components. The condition regarding this If Widget should be relying on the property isDataFetched from the aggregates on which you are trying to fetch data from.

By implementing such approach the information will not be displayed until the full data request is completed thus, preventing your application to have missing indexes.

We'll analyze a possible improvement on this behavior and prioritize it in our backlog accordingly.

Thank you for your patience.
Kind regards,
Simão Nunes.

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