Continuation Using Visualforce Page

We may run into a scenario in Salesforce project, where we need to call external web service but no need to wait for a response. Response from external web service can be processed asynchronously and once processed it can be presented in Visualforce page. This can be achieved through Future Callouts our using Javascript Remoting, but sometimes it is required to make asynchronous callouts and show the response on the Visualforce Page in real time this is where Continuation comes to rescue. Using Continuation one can make Long-running asynchronous callouts and show the data on the visualforce page.


Continuation Class is used to make asynchronous callout using REST and SOAP services. Using this class, we can make a long-running request from a Visualforce page to external systems and can integrate our Visualforce pages with complex back end systems.

In this example, we are making a long-running callout to an external server and showing its response on the visualforce page in realtime.

For the purpose of the demo, we are using MockAPI server to request and get a response but you can use this example with any server all you need to change is URL and body parameters. You can learn more about Mock API from here. What is Mock API?

NOTE: Please make sure to add the endpoint as remote site setting otherwise it won’t work and it will not make the callout
In our case it is https://5ece22d07c528e00167cdb4e.mockapi.io

Visualforce Page:
ContinuationPage

<apex:page tabStyle="Contact" controller="continuationDemo" docType="html-5.0" sidebar="false" showHeader="false" showChat="false">
    <apex:form >
        <apex:pageBlock title="Continuation Demo">
            Country ISO :
            <apex:input label="User Id" value="{!userId}"/>
            <apex:commandButton action="{!requestService}" value="Request Service" status="checkStatus" reRender="responseBlock"/>
            
        </apex:pageBlock>
        
        <apex:pageBlock title="Response from Webservice" id="responseBlock">
            
            <pre> {!response} </pre>
            
        </apex:pageBlock>
        <apex:actionStatus id="checkStatus">
            <apex:facet name="start">
                Please wait...<img src="/img/loading32.gif" style="width: 18px;"/>
            </apex:facet>
        </apex:actionStatus>
    </apex:form>
    <style type="text/css">
        pre{
        font-size : 1.7em;
        }
    </style>
    
</apex:page>

Apex Code:
continuationDemo

/**
* 	@Author	:	Vineet Bhagchandani
 * 	@Web	:	https://www.forcescript.com/
 *	@Description : Continuation Using Visualforce
 * */
public class continuationDemo {
    public String userId {get;set;}
    public String response {get;set;} 

	private String baseSericeURL = 'https://5ece22d07c528e00167cdb4e.mockapi.io/users/';
    private String returnedContinuationId ;

    public continuationDemo()
    {
        userId = '1';
    } 

    public Object requestService(){

        //Timeout in seconds, 60 is limit
        Continuation con = new Continuation(60);

        // Set callback method
        con.continuationMethod='renderResponse';

        // Create callout request
        HttpRequest req = new HttpRequest();
        req.setMethod('GET');
        req.setEndpoint(baseSericeURL+userId);

        returnedContinuationId = con.addHttpRequest(req);

        return con;
    }

    public Object renderResponse() {
      // Get the response by using the unique label
      HttpResponse httpRes = Continuation.getResponse(returnedContinuationId);
      // Set the result variable that is displayed on the Visualforce page
      response = httpRes.getBody();
      // Return null to re-render the original Visualforce page
      return null;
    }

}

Output: