I thought I’d post a quick tip I picked up from Jill Wetzler, Visualforce(and, I suspect JavaScript) Legend. When developing pages that contain more than a single area that could be submitted(not necessarily refreshed) I would usually wrap these areas with forms. Jill pointed out that I’d been a silly bloke(my words, not hers) and could use a single form and wrap each area with an<apex:actionregion> tag.
Now <apex:actionRegion> is super-useful in partial-page refreshes, and I thought that was the breadth-and-depth of its capability, but that was a bit of a Fail on my part. Personally I blame the first line of the documentation which describes the <apex:actionRegion> tag as “An area of a Visualforce page that demarcates which components should be processed by the Force.com server when an AJAX request is generated.”. Ah, passing the buck does feel good.
Jill mentioned that using as few forms as possible is actually best-practice(and I quote),
as multiple forms cause multiple instances of viewstate on your page, which makes you much more likely to hit the viewstate limit.
A short worked example would see this code,
<apex:page>
<apex:form>
<apex:inputField value=”{!value1}”/>
<apex:commandButton value=”Submit Form1″ action=”{!action1}”/>
</apex:form>
<apex:form>
<apex:inputField value=”{!value2}”/>
<apex:commandButton value=”Submit Form1″ action=”{!action2}”/>
</apex:form>
</apex:page>
be refactored into,
<apex:page>
<apex:form>
<apex:actionRegion>
<apex:inputField value=”{!value1}”/>
<apex:commandButton value=”Submit Form1″ action=”{!action1}”/>
</apex:actionRegion>
<apex:actionRegion>
<apex:inputField value=”{!value2}”/>
<apex:commandButton value=”Submit Form1″ action=”{!action2}”/>
</apex:actionRegion>
</apex:form>
</apex:page>
Thanks for the tip Jill, your community posts have often taught me a thing or two. Keep on truckin’.
I can also attest to the use one tag best practice. I have heard from salesforce.com that is is a best practice to use one tag to wrap the entire page and also not use tags in components if possible.
At one point I heard some rumblings that they even considered completely removing the ability to use the tag and essentially add one automatically when the page is rendered.
Thanks for the shout. Jason is right about the consideration for doing it automatically. It makes sense and would get rid of the viewstate duplication issue, which can cause headaches for some people. How exactly we’d go about it and when we’d get around to it is still something that has been up for discussion.
actionRegion is a very helpful tag that is under-utilized, probably because it’s not completely obvious how it works. It’s most useful when you have dependent inputs on your page, i.e. choosing one thing from a picklist means you show field1, choosing something else means you show field2. That way you can fire an action and invoke a rerender without any validation being performed on other fields in the form.
However it has another use with actionStatus that I only recently discovered. If you put an actionStatus tag anywhere on your page and set its ‘for’ attribute to the id of an actionRegion, any action that gets invoked in your actionRegion will invoke your actionStatus as well. That way if you have several buttons inside of a form that all use the same status component, you can specify which region(s) the status should apply to in one central location.
Awesome tip Jill:) w00t!
I see that in my first post when I used html tags they were stripped out. Basically every time I refer to a tag I am referring to the form tag.
Thanks a lot for posting the Tip. It helped me in solving my issue very easily.
The problem with this is that you cannot have a form tag wrapped around some things (e.g. relatedList), so you are basically forced to have multiple form tags in this situation. I can attest to the fact that multiple forms do not work well. So, basically, you are limited in how you lay out your Visualforce page…
Yeah I’ve found issue with single forms in packages too 😉
When you have got multiple actionRegion’s on your page, does every actionRegion get processed? or is it only the actionRegion where the action was generated?
Just the actionRegion that immediately contains the call to action that has been fired.
This doesn’t work if you have a custom component on your page.
For example, in your template:
And then in your Profile:
You can change the value of select but it won’t actually get changed (forms wont submit properly as well). The only solution is to put a form tag inside a custom component.
Correct me if I am wrong ofcourse.