function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
venkyyyvenkyyy 

action status want to enable while loading the page,

HI Experts,,

Here i came  with a query that my VF-Page is getting load a bit late while clicking on tab(because it has to call API) for that i want to show UI first(i.e while loading a page,,) after calling API the data can be populated.
Any Suggestion will inspire me to achive it.

Thanks in advance.

 
cvuyyurucvuyyuru
Hi Venky,

Use this line in your page.
  
<div id="overlay" class="overlayBackground" style="width: 100%; height: 100%; display: none;"></div>
<script>
       function showScreen(){
            document.getElementById('overlay').style.display='block';
        }

        function hideScreen(){
            document.getElementById('overlay').style.display='none';
         }
</script>

Call the showScreen on Page Load and hideScreen for closing the screen.

On the page start, display this in Div and once the page got loaded completely, hide this Div.



 
venkyyyvenkyyy
Hi,
Where can i call showScreen and hideScreen in VF?

 
Pramodh KumarPramodh Kumar
<apex:commandButton action="{!search}" value="Validate" " status="status"/>       

<apex:actionStatus id="status">
                <apex:facet name="start">
                <div style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.25; z-index: 1000; background-color: black;">
                     
                </div>
                <div style="position: fixed; left: 0; top: 0; bottom: 0; right: 0; z-index: 1001; margin: 15% 50%">
                    <div style="display: inline-block; padding: 2px; background-color: #fff; width: 125px;">
                        <img src="/img/loading.gif" style="float: left; margin: 8px;" />
                        <span style="display: inline-block; padding: 10px 0px;">Please Wait...</span>
                    </div>
                </div>
                </apex:facet>
            </apex:actionStatus>
Let me know if this works