If you are developing simple visualforce, probably you haven’t heard about it yet.  But when you have already created more complex page, you could get the following error: “Maximum view state size limit (135KB) exceeded.” What does this mean? What is this view state?

Salesforce supports a great thing so let us introduce how does it work. When you are populating form on your visualforce page and submit it, you can receive error message that some items are missing or wrong.

Very important is that all values in the form have been saved and stored in this view state, so you do not need to populate everything again.

Besides of that, view state store also values of your components and controller state. For example, if you loaded account details in constructor of  visualforce page and put it into value which was declarated in a class, you do not need load it again using another method which was invoked by clicking on the button.  

All these data are stored as encoded string in one hidden input field in form of your visualforce.  If you would like to learn more about this, we can try it with the next example.  Create a new visualforce page and look at the HTML code of the page (you can use firebug, or built browser’s developer tools).

Code for visualforce

<apex:page standardController=”Account” extensions=”viewStateExample”>

<apex:form >

    <apex:pageBlock title=”My Account”>

        <apex:pageBlockSection title=”Account detail” columns=”2″>

            <apex:inputField value=”{!account.name}”/>

        </apex:pageBlockSection>

        <apex:pageBlockButtons >

            <apex:commandButton action=”{!saveAcct}” value=”Save”/>

        </apex:pageBlockButtons>

    </apex:pageBlock>

</apex:form>

</apex:page>

Controller

public with sharing class viewStateExample {

public final Account account {get; set;}

public viewStateExample(ApexPages.StandardController controller) {

    account = [select id,name from Account where id   = :ApexPages.currentPage().getParameters().get(‘id’)];

}

   

public void saveAcct() {

    update account;

}

}

Visit your page with some Account Id: https://…./apex/viewStateExample?id=001i0000006QssA

In HTML Code look for ‘<span id=”ajax-view-state-page-container” style=”display: none”>’.

As you can see from the example above the result is not clear, however there is another option.  Go to setup and edit the details of your user by checking ‘Development Mode’ and ‘Show View State in Development Mode’ checkboxes. Save it and reload your visualforce page. At the bottom should be new toolbar with tab view state.. At the bottom, a new toolbar with a tab view state should appear so you can see decoded view state and what is stored.

Then ‘folder’ Controllers appears, inside this is our extension with variable account,  where Name and Id are stored.

Next time we will talk about view state size and limits.