Displaying the Required Red Bar for a Control

November 16th, 2008

My Visualforce page uses a number of outputLabels and selectLists to create the functionality below. Setting the selectList’s required attribute makes the select’s value required but does not, by design, display the red bar next to the label. This is perfect is it does not lock developers into Salesforce.com’s look and feel. However, to actually display the required red bar, you have to add some extra code.

 
<apex:pageBlockSectionItem >
    <apex:outputLabel value="Category 1" for="cbxlevel1"/>
    <apex:outputPanel styleClass="requiredInput" layout="block">
    <apex:outputPanel styleClass="requiredBlock" layout="block"/>
    <apex:selectList value="{!selectedLevel1}" id="cbxlevel1" size="1" required="true">
        <apex:selectOptions value="{!level1items}"/>
        <apex:actionSupport event="onchange" rerender="cbxlevel2"/>
    </apex:selectList>
    </apex:outputPanel>
</apex:pageBlockSectionItem>

Categories: Code Sample, Salesforce, Visualforce

5 Comments

RM December 12th, 2008
Great Tip, Thanks for sharing.
Exactly what I was looking for.

FYI.. Why do u make emails required, it is hard to post a comment.
nicole March 17th, 2009
thank you for this interesting post.
Dependent Multilevel Selectlists | Jeff Douglas - Technology, Coding and Bears... OH MY! July 13th, 2010
[...] had a number of follow-up emails regarding the code I used for my Displaying the Required Red Bar for a Control post. We assign a number of values to an Opportunity based upon a hierarchy modeled by 3 objects [...]
david cheng June 1st, 2011
Hi Jeff. Thanks for this post. Can you post the CSS used by this code?

thanks
david
Jeff Douglas July 21st, 2011
@David, the CSS is embedded by salesforce.com. You’ll have to pick apart their CSS. Sorry.