For those of you who create Visualforce pages to extend default Salesforce functionality and who want to be as close to the standard layouts of the user interface, this little baby might come in handy to know ????

When you create a pageBlock in VisualForce you might have noticed that the background is LIGHT GRAY when viewing or editing fields, but if you use the standard edit function for an object the background is WHITE!

How do you make sure that your VisualForce page uses the same layout styles and properties as native Salesforce functionality?

 

Well pageBlock comes with an attribute that is not really well documenten called “mode”.

This value determines whether lines are drawn separating field values. Possible values are:

  • “detail”, in which data is displayed to the user with colored lines
  • “edit”, in which data is displayed to the user without field lines. If not specified, this value defaults to “detail”. These lines have nothing to do with requiredness, they are merely visual separators, that make it easier to scan a detail page.
  • “maindetail”, in which data is displayed to the user with colored lines and a white background, just like the main detail page for records

Here a screenshot of the 3 modes:

 

“detail” (default if you don’t use mode attribute):

 

 

“edit”

 

 

“MainDetail”

 

 

More info can be found on this attribute in the official developer documentation: https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_pageBlock.htm?search_text=pageblock