VFResumable : Resumable Visualforce Forms

For a while I have been wondering how to build a Resumable form , which resumes the last tucked in values somehow. Earlier attempts of mine included storing the data somewhere in a Sobject so that they can be fetched back, but that seemed very cumbersome!

The other day I came across a JS plugin called GarlicJS and it looked very promising, and provided a better way to solve the above problem of retaining values. GarlicJS stores the values entered in the fields in local storage and whenever there is a page refresh it loads the values from the local storage. I took the JS plugin and wrapped it inside a VF component to create what I am calling as "VFResumable"

VFResumable : What it is ?

VFResumable is a Visualforce component based on GarlicJS which helps to resume previously entered values. VFResumable provides some control over GarlicJS using wrapper methods and attributes.

Features

• Resumes the previously entered values, even in case of full Page Refresh
• Exposes enable and clear JS method to clear/enable resumable
• Works with any VF page
• GarlicJS automatically clears the stored values on form submit, in case you are using AJAX you may want to use the helper functions clearVFResumable and initVFResumable

Attributes & JSFunctions

• Attributes
• formid : A comma seperated list of Ids of target apex form
• importjquery : Set this false incase you are already using Jquery in your pages
• enable : Set true if you want to enable the VFresumable as soon as page loads, set false to disable this, when false you may have to use js handler to enable VFResumable
• JSFunctions
• initVFResumable : Call this JS function if you want to explicitly enable the VFResumable.
• clearVFResumable : Call this JS function if you want to clear the stored values. Generally should be called from oncomplete of a button/action function (assuming you want to store values if the record was not saved)

Usage & Code

<apex:page standardController="Lead">
    <apex:sectionHeader title="VFResumable" subtitle="Restore previous values using VFResumable"/>
    
    <apex:form id="myForm" >       
        <apex:pageBlock >
            <apex:pageBlockButtons >
                <!-- Button to clear the resumable -->
                <apex:commandButton value="Destroy" onclick="clearVFResumable();return false;"/>
            </apex:pageBlockButtons>
            <apex:pageBlockSection >
                <apex:inputField value="{!Lead.FirstName}"/>
                <apex:inputField value="{!Lead.LastName}"/>
                <apex:inputField value="{!Lead.MobilePhone}"/>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
    <!-- actual vf component -->
    <c:VFResumable formids="myForm"/>
</apex:page>

Installation / Demo & Project Link : http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a029000000DrdXI