Scolldown Pagination in Visualforce Page

First of all, most important thing to know what is pagination?

Why we use it???

Most of the developers know about this but if you are beginner or do not know about pagination here is the explanation.

Pagination is used to display or handle the large number of sobject records and breaking the large number of records into the separate pages for viewing with in the salesforce so that you can improve the visualforce page or lightning component load times.

Pagination can be done using multiple ways.

  1. Pagination with a Standard Set Controller
  2. Pagination with a SOQL OFFSET in Apex

If you are dealing with limited records like upto 2,000 then you can use SOQL Offset in custom controller and display in visualforce using next and previous buttons or scrollbar.

But if you have requirement for more than 2,000 records then you can use Standard Set Controller and paginate records upto 10,000.

You can set any number of sobject records like 20,25 or any other number per page with the help of pagination.

In the article I am going to explain pagination using SOQL Offset in custom apex controller and display records in visualforce with the help of visualforce remoting and jquery.

This will also help you to understand some basic concepts of visualforce remoting and jquery.

So we have talked too much now It’s time for some code.


As you can see 15 Account (sobject) records per page is displaying using SOQL Offset.

Some pointers related to above visualforce page and apex controller which  would be helpful to understand.

  1. getAccountsData() is the javascript function which is calling initially on load of page for getting first 15 records or when user reaches the end of page for getting the further 15 records from server side.
  2. scrollTop() is the javascript property which returns the number of pixels an element content is scrolled vertically.
  3. innerHeight() is the javascript property which returns the height of window’s content area.
  4. scrollHeight() is javascript property which returns the entire height of element including padding.

Refer Below Links for some more details of Pagination.

Hope you find this helpful, in case of any queries/concerns, please post a reply or drop an email to me at .


How to Tackle View State Issue During Upload file as a Attachment through Visualforce Page – Part 2


Hello guys , I am Back with my new Blog Post . In this Post You will Learn Two things .

  • Upload file as a Attachment  Without Apex Controller
  • What is Salesforce Ajax toolkit and How you can use Ajax Toolkit for Upload File

Please Refer my Previous Blog Posts to get to know Upload file through visualforce and Tackle View State Issue through apex Controller

First of all Do you Know about Salesforce Ajax Toolkit ???q-590x446

If you don’t know then do not worry just take long breath and read this artical.

Let’s come to the Point and discuss What is Salesforce Ajax Toolkit ?????

Ajax Toolkit is like a Javascript Wrapper which you can use in Your Visualforce Page to Interact with Salesforce Standard and custom Objects .

You can query Salesforce Objects Data , Create records and attachments without using Apex with your Visualforce Page.

Now the Questions arise When to use ajax toolkit??

Best situation to work with ajax toolkit is when you have to work with small amount of data.

AJAX works best with  small amounts of data (up to 200 records, approximately six fields with 50 characters of data each).

You have to follow three steps for working with ajax toolkit in your visualforce Page.

  • Connecting to the API – Include Connection.js file that is ajax toolkit Javascript file in your Visualforce Page and Get the Sforce Session using sforce.connection.sessionId='{!GETSESSIONID()}’

    After execution of Connection.js script , the toolkit is loaded and a global object, sforce.connection, is created. This object contains all of the API calls and AJAX Toolkit methods, and manages the session ID.

  • Embed API Calls in Javascript – Write Javascript code for Making Instance of  Sforce Object like “new sforce.SObject(“Attachment”)” and create attachment using sforce.connection.create([attachment] .
  • Processing result – Process the Result on creation of attachment and show success or failure message .onSuccess : function(result, source) {

    if(result[0].getBoolean(“success”)) {

    // do your code whatever you want to show on success



    onFailure : function(error, source) {

    // do your code on failure


You can go through the Salesforce Ajax Toolkit Developer Docs for more reference .

Here is the Look of your Visualforce page .

When you Load the Page .


When you Clicked Upload Button Without Record ID in URL .


When you Clicked Upload Button Without Selecting File for upload.


When you selected file and clicked Upload Button .


Here is the Visualforce Page Code With Ajax Toolkit.

Hope you find this helpful, in case of any queries/concerns, please post a reply or drop an email to me at .

How to Tackle View State Issue During Upload file as a Attachment through Visualforce Page

In Previous Post, We Saw How to Upload File in Salesforce Through Visualforce .

So This Post is just to Handle the View State Error Occurred During Uploading File through Visualforce.


For Complete Detail of View State Refer Link .

If you look into the Previous Post there were many Variables in Apex Controller which were use for getting file Body, Name, Description .



So If User Upload Large File Then file Body, Name and Description Come in these variables and It would Easily Increase the Heap Size Limit and View State Issue would arise.

4thSo For Avoiding this Issue Directly Make a Attachment Object Instance in Apex Controller and Get Body, Name of File From Visualforce Using that Instance .



Instead of Storing file body, Name, Description in these variables in apex controller it would Store directly in SObject Attachment So Heap Size Limit will not exceed.

Please Refer the Visualforce Page and Apex Controller for More Details.

<apex:page standardStylesheets="false" sidebar="false" showHeader="false" controller="AttachmentUploadController">

<c:UploadFile_Component />
<!-- Main Section -->
<main class="main-section">

<!-- Header Section -->
<header class="header-section">
<div class="headersection-tagline">
<div class="container">
<div class="tagline-left">Upload File as Attachment</div>
<!-- /Header Section -->

<!-- Form Section -->
<section class="inner-section">
<div class="container">
<div class="formbg-section">
<apex:form styleclass="form-horizontal" id="frm" enctype="multipart/form-data">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-4">File Name :</label>
<div class="col-md-8">
<apex:inputText value="{!}" styleClass="form-control"/>
<div class="col-md-6">
<div class="form-group">
<div class="col-md-12">
<label class="control-label col-md-2">File: </label>
<label class="btn btn-primary" > Browse File
<apex:inputFile value="{!attachment.body}" filename="{!}" styleclass="form-control" style="display:none" onchange="filechange(event)"/>
<span class="uploaded-file" style="overflow: hidden; display: -moz-grid;" ></span>
<div class="col-md-12">
<div class="form-group">
<label class="control-label col-md-2">Description :</label>
<div class="col-md-10">
<apex:inputTextarea styleClass="form-control" value="{!attachment.Description}"/>
<div class="col-md-12">
<apex:messages />
<div class="form-group form-action-toolbar">
<div class="col-md-8 text-left">
<apex:commandButton id="btnsave" action="{!Upload}" styleClass="btn btn-primary" value="Save File as Attachment" />
<!-- /.Form Section -->

<!-- /.Main Section-->
 function filechange(e)
 var fileName =[0].name;

public with sharing class AttachmentUploadController {
public Id PageId ;
public Attachment attachment {
get {
if (attachment == null)
attachment = new Attachment();
return attachment;

public AttachmentUploadController(){
PageId = ApexPages.currentPage().getParameters().get('id');

public PageReference upload() {
attachment.ParentId = PageId ;
attachment.IsPrivate = true;
try {
insert attachment;
} catch (DMLException e) {
ApexPages.addMessage(new ApexPages.message(ApexPages.severity.ERROR,'Error uploading attachment'));
return null;
} finally {
attachment = new Attachment();
ApexPages.addMessage(new ApexPages.message(ApexPages.severity.INFO,'Attachment uploaded successfully'));
return null;


Hope you find this helpful, in case of any queries/concerns, please post a reply or drop an email to me at .



Apex Rest API – Salesforce Integration with Twilio(Get a Call on your Mobile Number from Salesforce Through Twilio Voice API)

First of all, you need to Create an account on Twilio. If you do not a have an account on Twilio please refer to the link.

If you have Already then just Log in to your Twilio account. After Log in Your Twilio Account, you will See ACCOUNTSID and AUTH TOKEN as shown in the screenshot below.


Copy this ACCOUNTSID and AUTH TOKEN we will use it later.

After this Click on Left Side Icon in Twilio Account and click on # Phone Numbers



You would see your Twilio number (you would receive calls from this number on your connected Mobile number)


After this Move on to the Verified Caller IDs on Left Side Bar and Enter Your Mobile Number on which you want to receive Call and Verify by Twilio.


Now Login into your Salesforce Account and create a Remote Site Setting of Twilio End Point URL as given in the Twilio API Documentation


For Beginners Here is the Explanation of Remote Site Setting.

“When you want to access the external sites in your Salesforce application using callouts, web services, etc… You need to add that in the Remote Site Settings. This is just a security that platform is going to check.
Before any Visualforce page, Apex callout, or JavaScript code using XmlHttpRequest in an s-control or custom button can call an external site, that site must be registered in the Remote Site Settings page, or the call will fail”

Now moving on to the Integration part, according to the Twilio voice API . We Need DEFAULT VERSION , ACCOUNTSIDAUTH TOKEN , Twilio Phone Number(From Phone Number) , Twilio Verified Phone Number(To Phone Number), Voice API End Point for Doing this Integration From Salesforce .





Here is Apex Controller with Apex REST API and Visualforce Page

public with sharing class TwilioVoiceCallExt 
 public String mobileNumber {get;set;}
 public String responseBody {get;set;}
 public CallResponse callRes{get;set;}
 public String DEFAULT_VERSION = '2010-04-01';
 public String AccountSID = 'YOUR ACCOUNTSID';
 public String Authtoken = 'YOUR AUTH TOKEN';
 public String FromPhoneNumber = 'YOUR Twilio Phone Number';
 public String VoiceAPIEndPoint = '';

 public String Body = '';

 public Void VoiceAPI()
 String Crediential = EncodingUtil.base64Encode(Blob.valueOf(AccountSID + ':' + Authtoken));
 String EndPoint = ''+DEFAULT_VERSION+'/Accounts/'+AccountSID+'/Calls.json';

 if(mobileNumber != '')
 Body = 'To='+mobileNumber+'&amp;amp;'+
 ApexPages.Message myMsg = new ApexPages.Message(ApexPages.Severity.ERROR,'Mobile Number is required.'); 

 Http h = new Http();
 HttpRequest request = new HttpRequest();
 request.setHeader('Content-Type', 'application/x-www-form-urlencoded');
 request.setHeader('Authorization', 'Basic '+Crediential);
 HttpResponse res = h.send(request);
 responseBody = res.getBody();

 //------------Deserialize the Reponse in different Class------------------//
 callRes = (CallResponse)JSON.deserialize(responseBody, CallResponse.class);

 if(callRes.Status == 'queued')
 ApexPages.Message myMsg = new ApexPages.Message(ApexPages.Severity.CONFIRM,'Call successfully sent..!! Please Check Entered Mobile Number'); 
 else if(callRes.status == '400'){
 ApexPages.Message myMsg = new ApexPages.Message(ApexPages.Severity.ERROR,'Mobile number is not valid'); 

 }// End of function

 //-----class for get Response---------//
 public class CallResponse 
 public String Status; 

<apex:page sidebar="false" controller="TwilioVoiceCallExt">

<apex:sectionHeader title="Voice Call"/>
<apex:form >

<!-- message -->
<apex:pageMessages />

<apex:pageBlock >
In Case of Trail Twilio Account You can Call Only <b>One Mobile Number</b> which is <b>Verified</b> by Your Twilio Account !!
<!-- Page block Start-->
<apex:pageBlock >

<!-- Page block Button-->
<apex:pageblockButtons >
<apex:commandButton action="{!VoiceAPI}" value="Click to Call"/>

<apex:pageblockSection >
<apex:pageBlockSectionItem >
Mobile Number
<apex:inputText value="{!mobileNumber}" />

<!-- Page block End-->

Refer Below Links for Complete Details of APEX REST API.

Hope you find this helpful, in case of any queries/concerns, please post a reply or drop an email to me at .