BPM, Workflow, and Case

Co-author: @SUNIL SATTI

For a Case Solution, you can customize your case pages using Client-Side Human Service.

When using multiple views inside the custom page, it can lead to slower initial page loading due to all views being initialized simultaneously at runtime. Certain views such as Case Visualizer take more time to load.
To overcome this issue, you can design your pages such that it uses lazy load pattern for the views loading such that views are only initialized once they are required.
In this blog we will see how we can achieve this lazy loading of views in a custom Case Details page.
We will be using the Case toolkit views inside a Tab Section as in the Default Case Details page.
The default behavior is that all the views inside the tabs are initialized once this page is loaded at runtime. We will use Deferred Section along with Tab Section to make sure that the content inside each tab is loaded only when that particular tab is selected.
Deferred Section is one of the views from UI toolkit which allows lazy loading of views contained inside it.
More details on Deferred Section:
https://www.ibm.com/docs/en/baw/24.x?topic=toolkit-deferred-section

Now we will see an example below as to how we can implement this.
We have a CustomCaseDetails layout being used for the case solution Case Details page.

And this custom page includes a Tab Section containing Case views like Documents, Activities, etc
Directly beneath each Tab in the Tab Section, place the Deferred Section.

And inside the deferred section, place case views like Case Visualizer. This ensures that the Case Visualizer is not automatically loaded initially.

Deferred section provides a method lazyLoad(), which can be used to load the content or views placed inside it.
And for Tab Section we have a event handler “On Tab Changed” which will be fired every time a tab is selected.
Add the below script in the “On Tab Changed” event.

var tabIndex = me.getCurrentPane();   // gets the index of current tab
var childView = me.getViewInPane(tabIndex);  // gets the view embedded inside tab
if(childView.lazyLoad){
    childView.lazyLoad();
}

Similarly, deferred sections can be placed for each tab in the Tab Section.

By implementing Deferred Sections for each tab in the Tab Section, it can be ensured that content loads only when specific tabs are selected. This helps to enhance the efficiency and initial loading performance of Client-Side Human Service pages.