Take the 2-minute tour ×
Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It's 100% free, no registration required.

i am having two inline visualforce pages that has been embedded in account detail page. The data for the inline vf pages are coming from a webservice. Since it is a webservice call it takes few seconds for the page to show the data. it means the vf pages section SAP and Open Documents displays blank white space as show in the screen shot while loading account detail page. Please note the first screen shot taken at the time of account detail page loading shows blank white space.

what i want is to display a loading image in the white space until the data comes for the page from the service. attached is the screen shot showing the issue...

More Comments: if you see the screen shot 2, "Open Documents" is an inline vf page which by default should display results of Open Quotation on account detail page button.. User may click other buttons to see other details once it has been loaded. Will VF remoting suitable for write or refreshing a DOM like pageblocktable?

Image

enter image description here

share|improve this question
    
When page loading u want or after clicking button els –  Sunny Feb 6 at 14:15
    
when page loads. because i dont want to see the white blank space displaying for long time (5 to 8 secs) because that will buzz the end user... –  Baskaran S Feb 6 at 14:22
add comment

1 Answer 1

up vote 6 down vote accepted

Are your webservice calls being invoked asynchronously (via VF Remoting) or are they part of the page load (action method on the <apex:page>)?

If they are being invoked via Visualforce Remoting, you can have a loading image immediately display on the screen and a callback for your VF Remote method that removes the image.

If you are using the action method on the <apex:page> tag, you'll likely want to switch to VF remoting so your page load isn't held up waiting for the callout to complete.

Update: I added some sample code below based on the link above to show how something like this might work. It isn't "working" code, but more along the lines of psuedocode.

Sample VF Page

<apex:page controller="TestController">
  <img id="loading-image" src="/myImage.png"></img>
  <div id="my-data"></div>

  <script type="text/javascript">
    var j$ = jQuery.noConflict();    

    function getRemoteAccount() {
        // This remoting call will use the page's timeout value
        Visualforce.remoting.Manager.invokeAction(
            '{!$RemoteAction.TestController.getCalloutInfo}',
            handleResult
        );
    }

    function handleResult(result, event) {
      // TODO - update the UI
      j$('#my-data').html(result);

      // Hide the loading image
      j$('#loading-image').hide();
    }
  </script>
</apex:page>

Sample Apex Class

public with sharing TestController {
  @RemoteAction
  global static String getCalloutInfo()
  {
    // TODO - make callout

    // return value to UI
    return '{"label":"mock-data"}';
  } 
}
share|improve this answer
    
Thanks Michael. it is part of page load. the call to the webservice is through a getter method written in the extension. so it automatically happened when page loads. –  Baskaran S Feb 6 at 14:26
    
@baskaran Micheal's answer is correct. Change your code to perform an actionFunction or VF Remoting call after the initial page loads. –  sfdcfox Feb 6 at 14:42
    
@sfdcfox could you please clarify me what it means by "initial page loads". i am assuming some method which is having vf remoting logic that would be called in action attribute of <apex:page ? is that right? –  Baskaran S Feb 6 at 14:55
    
What VF Remoting implies is that you originally load your page and maybe some of the faster to render information (non-callouts). Then, you'll set up an actionFunction of VF remoting call to your controller that makes the more time consuming calls that run AFTER the page loads asynchronously, and when they finish there is a callback javascript method on your VF page where you can update your UI accordingly. –  Michael Welburn Feb 6 at 14:57
1  
@MichaelWelburn It'd probably be worthwhile to mock up a simple remoting example in your answer. –  sfdcfox Feb 6 at 15:00
show 3 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.