Scenario - Recently we had a requirement to load more than 20 Taskflows in a page and off course the page took over a minute to load.
So designed a way to load task flows lazily based on user scroll, just like how data is fetched in
social websites..
Here is how the final output looked like -
As you can see, 2 taskflows loads on page load and next 2 taskflows loads as user scrolls through the page.
This basically reduces the load time of the page to half :-).
How to do it?
Step 1) Few modifications made to taskflows that needs to be lazy fetched-
Now we have a taskflows which renders activity when input parameter LazyLoadTF set to "TRUE"
Step 2) Here is how the entire flow works -
-> All the taskflow's input parameter in the page binding are mapped to a hashmap.
-> Once user scrolls through the window more than 95 percent, a server listener callback changes the next taskflow's input parameter to true.
-> All taskflows are set to refresh ifneeded, so change in input parameter refreshes the taskflow and the actual activity is rendered this time.
-> Once complete, the server listener issues a notifyComplete to client side javascript using ExtendedServiceKit. The cycle continues as and when user scroll reaches more than 95 percent.
We can build many flavors of this flow, like to show loading screen while taskflow load or refresh using a contextual event etc.
Workspace used in sample-> ScrollToFetch GitHub, It requires connection to HR Schema.
Hope it helps..:-)
So designed a way to load task flows lazily based on user scroll, just like how data is fetched in
social websites..
Here is how the final output looked like -
This basically reduces the load time of the page to half :-).
How to do it?
Step 1) Few modifications made to taskflows that needs to be lazy fetched-
Step 2) Here is how the entire flow works -
-> All the taskflow's input parameter in the page binding are mapped to a hashmap.
-> Once user scrolls through the window more than 95 percent, a server listener callback changes the next taskflow's input parameter to true.
-> All taskflows are set to refresh ifneeded, so change in input parameter refreshes the taskflow and the actual activity is rendered this time.
-> Once complete, the server listener issues a notifyComplete to client side javascript using ExtendedServiceKit. The cycle continues as and when user scroll reaches more than 95 percent.
We can build many flavors of this flow, like to show loading screen while taskflow load or refresh using a contextual event etc.
Workspace used in sample-> ScrollToFetch GitHub, It requires connection to HR Schema.
Hope it helps..:-)
No comments:
Post a Comment