Lazy load
Application Type
Traditional Web

Hi Community,

       I have a question, If we have four tabs on one screen, each tab having 2 Web blocks, I am facing some performance issue on screen since I have more webblocks on screen, I want to implement lazy load concept to render the webblocks one by one, can any one share idea about this to render the web blocks one by one on screen or by clicking the tab only I want  the webblock to prepare on screen.

Thanks in advance


Hi Balaji,

I have just implemented a demo for your description.

The idea is wrap the tab content with an IF widget with condition is that if active tab then display the block.

You can take a look at my .oml

Cheers,

Khuong

TabDemo.oml

Hi Balaji,

I've done a similar lazy load in Reactive but I believe the same logic can be applied in Traditional.

Basically, I have Tabs as a List of Id (Integers) and TabName (Text). Then another var for the CurrentTab (Integer) to keep track of each tab opened (default 0). Then a boolean "areBothTabsOpened" that help me know if I should call both requests (could be show WB, call API requests, etc.).

This boolean does more than just prevents calling the 2nd tab, because in my case I might want to go directly to the 2nd tab and not have called yet the first tab's method. You can use the same logic but for showing WebBlocks.


So at start (screen's OnInitialize) I set areBothTabsOpened = False.

On TabsEvent, I check its value and if True keeps it True, else depends if the selected tab will be the same the user already wants (if the same, then keeps areBothTabsOpened = False, else turns it to True).



Then on container's Style Class, I'll either have CSS for display: block;  (class "showTable")  or  display: none;  (class "hideTable")   depending on either CurrentTab or areBothTabsOpened are True.  

Here I just want one of them in my screen (that's why I hide the other), but if both requests were already made I just show/hide tabs (and don't call the requests again). In your case, you can adapt to keep showing both WebBlocks if you need to.


This is my first answer here, hope it's not very confusing and that this may helped somehow.


Thanks for you effort @Fábio Godinho.

Hi Balaji,

I have just implemented a demo for your description.

The idea is wrap the tab content with an IF widget with condition is that if active tab then display the block.

You can take a look at my .oml

Cheers,

Khuong

TabDemo.oml

Hi Balaji,

I've done a similar lazy load in Reactive but I believe the same logic can be applied in Traditional.

Basically, I have Tabs as a List of Id (Integers) and TabName (Text). Then another var for the CurrentTab (Integer) to keep track of each tab opened (default 0). Then a boolean "areBothTabsOpened" that help me know if I should call both requests (could be show WB, call API requests, etc.).

This boolean does more than just prevents calling the 2nd tab, because in my case I might want to go directly to the 2nd tab and not have called yet the first tab's method. You can use the same logic but for showing WebBlocks.


So at start (screen's OnInitialize) I set areBothTabsOpened = False.

On TabsEvent, I check its value and if True keeps it True, else depends if the selected tab will be the same the user already wants (if the same, then keeps areBothTabsOpened = False, else turns it to True).



Then on container's Style Class, I'll either have CSS for display: block;  (class "showTable")  or  display: none;  (class "hideTable")   depending on either CurrentTab or areBothTabsOpened are True.  

Here I just want one of them in my screen (that's why I hide the other), but if both requests were already made I just show/hide tabs (and don't call the requests again). In your case, you can adapt to keep showing both WebBlocks if you need to.


This is my first answer here, hope it's not very confusing and that this may helped somehow.


Thanks for you effort @Fábio Godinho.

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