function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
TehNrdTehNrd 

Need help with adding the little red required bar

Adding the red required bar to an inputField is easy as when you make the field required it automatically adds the bar. Yet I am having trouble with other components such as selectList or inputText. Even if you make these required the red bar does not automatically show up so I am assuming this must be done manually with styling.

Unfortunately for me I'm not too crafty with styling (still learning) so any help is appreciated.

Thanks,
Jason
jwetzlerjwetzler
Your assumption is correct.  The required red bar is a salesforce style and so it's only automatic for the inputField component (it also must be contained within a pageBlock).

If you want to display it for something else, this is the html inputField actually prints out:
Code:
<div class="requiredInput"><div class="requiredBlock"></div><your component here></div>




As usual, you use our CSS styles at your own risk!  Otherwise you could code up your own style that does the same thing.




TehNrdTehNrd
   Thanks Jill, worked like a charm. Yes, using your styles is like a double edge sword. On one hand if you change the styling for the required bar the page may also reflect this change. On the other hand a change could cause the whole thing to break.

Also, is there anyway to define custom error messages as this isn't that user friendly....


Page Code:
Code:
<apex:panelGroup >
   <div class="requiredInput">
   <div class="requiredBlock"></div>
      <apex:selectList value="{!softwareVendor}" size="1" required="true" id="vendor" >
         <apex:selectOptions value="{!softwareVendors}" />
      </apex:selectList>
      <br/>
      <apex:message for="vendor" style="color: #cc0000">This doesn't seem to work.</apex:message>
   </div>
</apex:panelGroup>

 Thanks,
Jason



dchasmandchasman
We are already working on a fix to remove the clientId (the j_id0 stuff) from the error message - you can improve the message slightly by supplying id attributes on all of the components in the apex:selectList's heirarchy. Or if you want to truly take control you can remove the required="true" and move the constraint to controller.


TehNrdTehNrd
Thanks for the tips Doug.

If this was for a published app I would (and will) definitely move that logic to the controller so the output can be nice and clean. Since this is internal only I think I will just leave it for the time being as the user still knows to fill in the field, regardless of how it looks.

-Thanks
Jason 


Caleb_SidelCaleb_Sidel
The most simple example I could come up with to make a pick list required inside of a pageBlockSectionItem. Please note that the pageBlockSectionItem can only have 2 children. Therefore you have to write the pick list and the tags that make it required in an <apex:outputPanel> tag.


 


<apex:pageBlockSectionItem id="mySectionItem1">
    <apex:outputLabel value="myLabel" for="listBelow" />
     <apex:outputPanel>
          <div class="requiredInput">
          <div class="requiredBlock"></div>
         <apex:selectList id="listBelow" value="{!myObj__c.Field__c}" size="1" required="true">
            <apex:selectOptions value="{!myOptions}" />
         </apex:selectList>
        </div>
    </apex:outputPanel>
</apex:pageBlockSectionItem>