Usually we make Rest API calls from Salesforce to External systems to get the data or to pass the updates to External Systems, using Apex class. But sometimes we can have a situation, like where we need to make a call to external systems from the visual force page.
Salesforce has introduced a concept called AJAX ToolKit, which help us to make REST API call from the JavaScript in Visualforce Page. Here is an example to invoke REST API from Visualforce Page. In below example I’m using https://exchangeratesapi.io/ web service HTTP callout and send a GET request to get the foreign exchange rates. The foreign exchange rates service sends the response in JSON format.
Visualforce Page:
<apex:page>
<apex:includeScript value="//code.jquery.com/jquery-1.11.1.min.js" />
<script>
function apiCall() {
//Get a reference to jQuery that we can work with
$j = jQuery.noConflict();
//endpoint URL
var weblink = 'https://api.exchangeratesapi.io/latest?base=USD';
$j.ajax({
url: weblink,
type: 'GET', //Type POST or GET
dataType: 'json',
beforeSend: function(request) {
//Add all API Headers here if any
//request.setRequestHeader('Type','Value');
},
crossDomain: true,
//If Successfully executed
success: function(result) {
//Response will be stored in result variable in the form of Object.
console.log('Response Result' + result);
//Convert JSResponse Object to JSON response
var jsonResp = JSON.stringify(result);
document.getElementById("apiData").innerHTML = jsonResp;
},
//If any Error occured
error: function(jqXHR, textStatus, errorThrown) {
//alert('ErrorThrown: ' + errorThrown);
}
});
}
</script>
<apex:form>
<!--call javaScript-->
<input type="button" value="Call API" onclick="apiCall()" />
<div id="apiData">
</div>
</apex:form>
</apex:page>
When a Visualforce page is loaded, the fields accessible to the page are based on the fields referenced in the Visualforce markup. But we can use StandardController.addFields(List fieldNames) method, which adds a reference to each field specified in fieldNames so that the controller can explicitly access those fields as well.
public with sharing class AccountControllerExt {
public Account acc {get; set;}
public AccountControllerExt(ApexPages.StandardController controller) {
List<String> accFieldList = new List<String>();
//Passing a list of field names to the standard controller
controller.addFields(new List<String>{'Id', 'Name', 'AccountNumber', 'Website', 'Phone','Type', 'Industry'});
//Standard controller to retrieve the field data of the record
acc = (Account)controller.getRecord();
}
}
leftPad(length): Returns the current String padded with spaces on the left and of the specified length. If length is less than or equal to the current String size, the entire String is returned without space padding.
leftPad(length, padStr): Returns the current String padded with String padStr on the left and of the specified length. padStr to pad with; if null or empty treated as single blank.
rightPad(length): Returns the current String padded with spaces on the right and of the specified length. If length is less than or equal to the current String size, the entire String is returned without space padding.
rightPad(length, padStr): Returns the current String padded with String padStr on the right and of the specified length. padStr to pad with; if null or empty treated as single blank.
In Winter’18 release, Salesforce has introduced lightningStylesheets attribute. To style the Visualforce page to match the Lightning Experience UI when viewed in Lightning Experience or the Salesforce app, We can set lightningStylesheets="true" in the apex:page tag. When the page is viewed in Salesforce Classic, it doesn’t get Lightning Experience styling.
Here is a standard Visualforce page with the lightningStylesheets="true" attribute in Classic View and Lightning View.
