Stat Tracker

Thursday, April 7, 2011

Visualforce Inline Editing - IE Error - Fix

Salesforce released inline editing in Spring 11 for Visualforce pages, which is pretty sweet. Especially considering when you need to replace a standard detail page with a VF page to do some secret sauce awesomeness, this was one feature which roadblocked it many times. It couldn't be simpler to implement, for example:

<apex:page standardController="CustomObjectABC__c" extensions="SecretSauceController" >
     <apex:form>
     <apex:detail inlineedit="true">
     </apex:detail>
    <apex:pageBlock title="Secret Sauce Functionality!!!!" >
        <apex:pageBlockButtons >
            <apex:commandButton value="Execute The Awesome" action="{!awesomeMethod}" rendered="{!isUserAwesome}"/>
        </apex:pageBlockButtons>
        <apex:outputText value={!howAwesomeIsUser}/>
    </apex:pageBlock>
    <apex:form>
</apex:page>


So whats the problem? Nothing if you use a decent browser like Firefox or Chrome.

But what about IE?

Well, if you have some <apex:commandButton>'s on the page, the buttons won't work and you will get a javascript error like this:

IE Mesage: 'document.forms.echoScontrolForm_066700000004hqK' is null or not an object

And now your custom code won't execute! Yeah, this frustrated me big time, but I found a work around by playing around with the page for about an hour. The issue is how Force.com platform is handling the forms. If you wrap each piece in its own <apex:form> with their own ids your good. So using the above example, if you do this it will work:

<apex:page standardController="CustomObjectABC__c" extensions="SecretSauceController" >
     <apex:form id="detailForm1">

     <apex:detail inlineedit="true">
     </apex:detail>
     </apex:form>
     <apex:form id="detailForm2">
    <apex:pageBlock title="Secret Sauce Functionality!!!!" >
        <apex:pageBlockButtons >
            <apex:commandButton value="Execute The Awesome" action="{!awesomeMethod}" rendered="{!isUserAwesome}"/>
        </apex:pageBlockButtons>
        <apex:outputText value={!howAwesomeIsUser}/>

    </apex:pageBlock>
    <apex:form>

</apex:page>

It should be noted that this is a known issue and that Salesforce is working on a fix that is scheduled to be released in the upcoming Summer 11 release. Until then, if you can't wait for inline editing (and why would you?) you can use the above fix.

I mean basically I hope the goal is to give VF all the feature of standard detail pages. Its still not quite there yet, some things you just can't get. But they are getting there.

Man, all this secret sauce code has me craving a Big Mac...... MMMMMM.......Heart Attackalicious.....

http://boards.developerforce.com/t5/Visualforce-Development/lt-apex-form-gt-tag-and-inline-editing-break-googlemaps-packaged/m-p/265569#M34264