Salesforce. Solving View State Exceeded 135 Kb error by using JavaScript Remoting and JSRender

Previously I have posted some pagination example page

https://patlatus.wordpress.com/2014/12/30/salesforce-using-standard-controller-with-extension-to-show-employee-phone-book/

Sometimes we need to reduce view state when it exceeds limits, we may use JSRender for that.
I believe I have found this approach in documentation for PageBlockTableEnhancerADV component which also helps to avoid other limit exceptions.
First example from the previous link uses 39.23 Kb of View State ( which is not really higher than limit, that’s why we used that approach on production ), but if you have more data it may hit other limitations as well.
Second example given below uses only 2.47 Kb of View State ( which means this approach may be very useful for other purposes where we hit view state limit).

<apex:page controller="EmployeePhonesController2" sidebar="true">
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"/>
    <apex:includeScript value="https://rawgithub.com/BorisMoore/jsrender/master/jsrender.min.js"/>
 
    <script>
        
        function getUsers(callback){
            Visualforce.remoting.Manager.invokeAction(
                '{!$RemoteAction.EmployeePhonesController2.getUsers}', 
                function(result, event){
                     callback(result);
                }, 
                {escape: false}
            );
        }
 
        
        //on document ready call query and render the template
        $(function(){
            getUsers(function(result){
                var html = $("#userTableRowTmpl").render(result);
                //replace the table body with rendered html
                $("#usersTableBody").html(html);
                initPageBlockTableEnhancerADV();
            });
        })
    </script>
    
    <script id="userTableRowTmpl" type="text/x-jsrender">
        <tr class="dataRow" onmouseover="if (window.hiOn){hiOn(this);} " onmouseout="if (window.hiOff){hiOff(this);} " onblur="if (window.hiOff){hiOff(this);}" onfocus="if (window.hiOn){hiOn(this);}">
            <td class="dataCell">{{>LastName}}</td>
            <td class="dataCell">{{>FirstName}}</td>
            <td class="dataCell">{{>Email}}</td>
            <td class="dataCell">{{>Phone}}</td>
            <td class="dataCell">{{>MobilePhone}}</td>
            <td class="dataCell">{{>Department}}</td>
            <td class="dataCell">{{>Title}}</td>
            <td class="dataCell">{{>Custom_Field_1__c}}</td>
            <td class="dataCell">{{>Custom_Field_2__c}}</td>
        </tr>
    </script>

    <apex:form id="theForm">
        <c:PageBlockTableEnhancerADV targetPbTableIds="usersTable"  pageSizeOptions="30,50,100,500,1000" defaultPageSize="50" enableExport="true"/>
        <apex:pageBlock mode="maindetail" title="Employee phonebook" id="pb">  
            <table class="list" border="0" cellpadding="0" cellspacing="0" id="usersTable">
                <thead class="rich-table-thead">
                    <tr class="headerRow ">
                        <th class="headerRow">{!$ObjectType.User.fields.LastName.Label}</th>
                        <th class="headerRow">{!$ObjectType.User.fields.FirstName.Label}</th>
                        <th class="headerRow">{!$ObjectType.User.fields.Email.Label}</th>
                        <th class="headerRow">{!$ObjectType.User.fields.Phone.Label}</th>
                        <th class="headerRow">{!$ObjectType.User.fields.MobilePhone.Label}</th>
                        <th class="headerRow">{!$ObjectType.User.fields.Department.Label}</th>
                        <th class="headerRow">{!$ObjectType.User.fields.Title.Label}</th>
                        <th class="headerRow">{!$ObjectType.User.fields.Custom_Field_1__c.Label}</th>
                        <th class="headerRow">{!$ObjectType.User.fields.Custom_Field_2__c.Label}</th>
                    </tr>
                </thead>
                <tbody id="usersTableBody">
            
                </tbody>     
            </table>
        </apex:pageBlock>
    </apex:form> 
</apex:page>
public class EmployeePhonesController2 {
    @RemoteAction
    public static List<User> getUsers() {
        return [SELECT Id, FirstName, LastName, Email, Phone, MobilePhone, Department, Title, Custom_Field_1__c, Custom_Field_2__c FROM User WHERE isActive = true ORDER BY FirstName ];
    }
}
Advertisements
This entry was posted in Uncategorized and tagged , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s