Pimp Your Salesforce Implementation With Visualforce

For many customers, a Salesforce implementation may never go beyond using the ‘off the self’ functionality like basic Accounts and Contacts. Under the covers, Salesforce offers a rich set of tools like Apex and Visualforce, which enable you to tailor Salesforce to your exact needs. In this post, we look at an easy to follow Visualforce example to get you on the road to developing a new Salesforce skill.

What is Visualforce?

Visualforce is a markup language like XML. It follows the Model-View-Controller (MVC) pattern, which splits up application development into three tiers - user interface, business logic and the database. MVC type patterns are common in the software world and they are really useful. For example, you can make changes to the UI without dependencies on making changes to the business logic or database layer.

When a Visualforce page is compiled, it is converted into a set of instructions which are interpreted by the Visualforce renderer. If the page compiles correctly, the output is HTML, which is displayed in your web browser as a page in Salesforce.  Visualforce is upgraded as part of the Salesforce’s seasonal upgrade framework and is on version 44 already. What makes working with Visualforce appealing is that it can be extended with other languages like Javascript, CSS, HTML. Its easy, for example to embed Google Maps in a Visualforce page.

You can write Visualforce in an XML editor or Eclipse, but if you are just starting out the easiest editor to use is the Visualforce editor in Salesforce itself. To get to this, go to Setup and type ‘Visualforce’ in Quick Find and click on ‘Visualforce Pages’ like so:

Your First Visualforce Page

The best way to learn Visualforce is to start coding it. Recently, we were asked to help a CEO distill an Account page to a few essential fields. The leader of the company wanted to see this information in a single click so we created a Visualforce page called ‘Account Exec View’, which will show the following fields:

  • The Account Name
  • Account Owner
  • Account Phone Number
  • Opportunity Value

Visualforce is great for developing custom solutions for bespoke requests like this. In 5 short steps we will take you through the creation of an Account Exec View solution like our customer requested.

Step 1 - Create a Visualforce Page

If you read the previous section, you should know how to get to the ‘Visualforce pages’ section in Setup. Once inside, click ‘New’ to create a page like so.

In your new Visualforce page you will see a page element and nested within some default code (we will delete this later). The page element is the container element for every Visualforce page.The page element can be extended with a series of attributes. One of which is the ‘controller’ attribute.

Step 2 - Specify the Controller

The controller is an important concept in Visualforce. Like the name suggests, a ‘controller’ controls what happens when a user interacts with the component. It acts as the link between the UI and the database essentially.

Going back to our ‘Account Exec View’ solution, it will need to use the standard controller and activate it with the Account object. This can be done like so:

We can now build out the structure a little bit by adding the page block element and a title to the component. The page block element will give the UI the look and feel of a Salesforce solution.

You can then add the fields from the specifications as follows.

  • The Account Name
  • Account Owner
  • Account Phone Number
  • Opportunity Value

All of the above are standard fields with the exception of ‘Opportunity Value’, which is a custom roll-up summary field I created for this example.

For those of you familiar with the merge fields feature in Salesforce, you will notice the same syntax is used here to gain access to the data in the account object, which is denoted as follows  {!OBJECT NAME.FIELD}

Step 3 - Launch the page using a Quick Action

Salesforce best practice is not to use Javascript to launch Visualforce pages. This is for security reasons and a legacy feature of Salesforce Classic. All efforts are on developing the Lightning Platform. To launch the snippet of Visualforce from Lightning we will use a ‘Quick Action’ instead.

To do this, start by going to the Object Manager in Setup.

In the ‘Buttons, Links and Actions’ section, Click ‘New Action’

Enter the action information like so.. and select your Visualforce in the ‘Visualforce Page’ field

Make sure to save your work

Step 4 - Add the Action to the Account Page Layout

Go back to the Account object in Object Manager and click on the Page Layout. Make sure to update the Account Layout associated with your profile. In my case its ‘Account Layout’

In the profile, click on the ‘Quick Actions’ setting. You will see the ‘Account Exec Summary’ action created earlier.

Drag the action into the Quick Actions publisher section and save your work.


Step 5 - Finally, Test the Solution.

Congrats! You’ve made it this far! Navigate back to the Accounts tab in Salesforce. Click on an Account. Click on the down arrow in the top right hand corner. You should see the new ‘Account Exec Summary’ action like so.

Click on the action..drum roll please!! Ta da!.. Your newly minted Account Exec Summary should print into like.

Visualforce is a must have skill for any Salesforce Developer or, indeed, Admin. We hope this tutorial takes you a step further on your Salesforce journey. You can find the Visualforce code on our Github page here. Thanks again for reading!

Leave a Reply

Your email address will not be published. Required fields are marked *