Hi All,
We have an ADF form based on BPM Human task flow. Page rendering was taking little time, during
page load, user clicking on select one choice component. This causing an issue
in dependent list of values. And issue
is coming only for the existing tasks.
So thought of providing loading image during page load and
hide it once page is loaded completely to indicate a user not to click on
anything during page load
Since bpm task open in an iframe window behavior, was not
able to get adf component. So I used html,css and javascript approach to
achieve this.
In my case, I have .jspx page not the .jsff
Step 1: Just below the af:document tag added div tag which
contains loading giff image and text message as shown below
<div id="loading">
<img
id="loading-image" src="img/clock_positive_lg.gif"
width="43"
height="48" alt="loading gif"/>
<p id
="text"><strong>Please wait...Page is still
loading</strong></p>
</div>
Step 2: Created css file to align the image and text as
appropriate as shown below
<af:resource type="css">#loading {
position:absolute; left:50%; top:50%;
border-radius:20px; padding:25px; z-index:100 }
#loading-image {}
#text{margin-left:-60px;}
</af:resource>
Step 3: Main challenge I faced to hide the loading icon once
page is loaded. Window.onload function was somehow not working in my case. So I
used below approach
<af:resource type="javascript">
window.addEventListener('load',function(){
document.getElementById("loading").style.display =
"none";
},false);
</af:resource>
This solves my problem
