Generic Component for Loading Icon on Visualforce Pages
While developing a
Solution using Visualforce page and Apex, we have one common requirement which
is to show loading icon whenever user click on
button/link/panel etc.
Few use case to
show loading icon could be:
1. Notify user that action he asked
for is in progress.
2. Don't want user to make any change till previous action finishes.
2. Don't want user to make any change till previous action finishes.
The following is
the screenshot of how Loading icon would show:
To achieve this, we
will create a new VF Component ( Go to Setup -> Develop -> Component
-> New. Name= “LoadingIcon” )
The Icon that we
will be using here is standard Icon provided by salesforce, therefore no need
to upload any static resource.
Visualforce
Component:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<apex:component
>
<apex:actionStatus
onstart="startLoading();" onstop="endLoading();" id="loadStatus"/>
<style>
.overlay {
display: none;
height: 100%;
left: 0;
position: fixed;
top: 0;
opacity: 0.3;
-moz-opacity:
0.3;
width: 100%;
-ms-filter:
"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter:
alpha(opacity=30);
background: #000;
-khtml-opacity:
0.3;
z-index: 1000;
}
.loader {
background:
url('/img/loading32.gif') scroll no-repeat 0 0;
width: 32px;
height: 32px;
position:
absolute;
left: 50%;
}
</style>
<div id="load_scrl"
class="loadingBox loader" style="display:none">
</div>
<div class="loadingBox
overlay"> </div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function
startLoading(){
$('#load_scrl').css('top',
$(document).scrollTop() + 200);
$('.loadingBox').show();
}
function
endLoading(){
$('.loadingBox').hide();
}
</script>
</apex:component>
|
Now add this
component in your Visualforce page:
|
|
<c:loadingbox />
|
2
ways to use this component in your Visualforce page:
1) Use
the “status” attribute with the value “loadStatus” on the command button
as follows:
|
|
<apex:commandButton
action="{!save}" value="Ajax Button" status="loadStatus"
rerender="myForm"/>
|
2) Using
javascript:
|
|
startLoading();
//start the loading animation
endLoading() ;
//stop the loading animation
|
Comments
Post a Comment