It is often a requirement during Salesforce development to embed Visualforce functionality within a standard page layout, and Salesforce provide a great tool to allow this - Visualforce Pages and standard controllers! However, when the amount of customisation begins to outweigh the standard elements desired on a page, or when the standard functionality just won’t accommodate the behaviour you’re trying to achieve, you may wish to flip this upside down and add a few standard features to an otherwise custom page. In this blog post, we’ll explore a few methods to achieve this.

Fields
In order to add fields to a VF page in a dynamic and maintainable way, at BrightGen, we make use of Salesforce’s field sets. In a similar way to the standard drag and drop page layout, field sets allow you to add and remove fields at will.

Once we have set up a field set containing our fields, we can include them in our page by using an apex:repeat component to iterate through each element in the field set. In the below example, I have created an Account field set called Account_Demo_Fields

Depending on your chosen fields, the above code, should output something like this:
Visualforce

In order to properly format this, we’ll use pageBlock styling:

The use of mode=”maindetail” here allows us to mimic the style of the standard page layout and provides a familiar user interface, whilst accfield.label allows us to output the field label, alongside the field value, like so:
Visualforce

In order to allow our users to edit our page in the familiar way, we can use inlineEditSupport. This component allows us to show and hide buttons and specify on which action the inline edit should trigger, in this example, we’ll use double click.

Some further points to note from this code is that we are using CSS in order to hide buttons which we do not initially wish to show on the page using style=”display: none;”. You may wish to extract this into a separate stylesheet when implementing your own code. You will also need to wrap your pageBlock in tags

in order to use the inlineEditSupport feature. Finally, you will notice I have not used an action in the Cancel button and instead just forced a post and removed the user from the inline edit session. There does exist a {!Cancel} method within the standard controller, however, it is unlikely that we will wish to use this in the context of inline edits due to the fact that this will return you to the previous page.
Visualforce
Visualforce

Related Lists
Another common requirement on an overridden visualforce page, is the ability to display related lists. Salesforce make this very simple in the majority of cases and allow you to use the following syntax to output a related list:

However, there are a number of “gotchas” surrounding this behaviour. Firstly, there are several standard objects within Salesforce without an obvious list name, for example “Notes and Attachments” where the list name is, in fact, “CombinedAttachments”. The simplest way I have found to identify the list name is as follows

  • Use the Force.com IDE for Eclipse and open salesforce.schema
  • Find the object onto which you wish to attach the related list, and then search for the “Child Relationships”
  • Expanding the objects in this tree should display a “Relationship Name” which can be used as the list attribute.

A further exception to the above surrounds the “History” related list. Unfortunately, to my knowledge, there is no means to retrieve the list shown on the standard page layout using just Visualforce. Instead, this has to be created using the FeedTrackedChange object in Salesforce and refer to the somewhat limited fields on this. The fields available (taken from here) are as follows:
Visualforce

Using a pageBlocktable, we are able to utilise this object to create a table similar to the standard related list:

The output from the above, should look similar to the below:
Visualforce

Social Profile
A feature of Salesforce which is becoming more commonplace, is the use of Social Accounts and Contacts. Depending on your configuration, visiting an Account or Contact on the standard layout may well provide you with Social links to Twitter, Facebook, Klout and YouTube. Fortunately, Salesforce have made this very easy to embed in your Visualforce page using the Social:profileViewer component, like so:

Just like on the standard page layout, using the profile viewer will display the company logo, if you select the option to do so, providing a sleek header for your Visualforce page:
Visualforce

Conclusion
Several of the components discussed in this blog have further attributes worth exploring. The attribute ‘Mode’, for example, in the pageBlock component allows the data to be displayed with a number of different visual styles, more of the pageBlock attributes can be explored here. Further information on inlineEditSupport and ProfileViewer can also be found in the developer documentation, as well as a host of other components which can be used to tidy up your visualforce pages and make them more in-keeping with Salesforce’s standard user interface.

Mike Holt is a Consultant at BrightGen - follow him on twitter @salesforcemicky