Wednesday, June 29, 2016

Scroll to Fetch with Taskflows

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..:-)

No comments:

Post a Comment