Before You Dive In

As a custom development shop that specializes in Salesforce consultation and implementation, we like to offer numerous guides and walkthroughs to help admins and users, like yourself, learn to navigate challenging aspects within Salesforce and its various interfaces. (In essence, we aim to make your job easier!)

Here, we’d like to address some common challenges within Visualforce, a component-based, user-interface framework that enables the creation of dynamic, reusable interfaces designed to simplify the development and deployment of applications and websites.

A Visualforce to be Reckoned With

Frontend development in the Salesforce ecosystem could be a difficult task when it comes to being able to manipulate data or trying to match the Salesforce branding and styling. Thankfully, Visualforce can help make this a lot easier. Although Visualforce is a great tool for helping developers create pages, it does contain its quirks. Like all frameworks, that can cause some initial confusion. Here’s a brief guide to overcome the challenge of Visualforce.

Initial Set Up

When you create a Visualforce page it should look a little something like this:

Visualforce is a markup language, so you should be able to start creating a page with HTML/CSS as normal; as you begin, you’ll notice a few things about the default values of which to take note. 

The apex:page comes with some default values, one of them being the “StandardStylesheets,” which is going to import the Salesforce Classic stylesheet. If you are viewing a page in Classic, it will include a sidebar and header unless you specify false. There is also an applyHTMLTag and applyBodyTag which will apply these tags into the markup, so if you put these tags in yourself you will need to turn these off as well. The apex:page tag also supports a doctype attribute that will allow you to specify the document type—and if not, specified will default to “html-4.01-transitional.”

Visualforce pages use Apex Controllers to be able to do work in the backend, so the apex:page tag contains a standardController, controller, and extension attributes. The standard controller is to call the Salesforce standard controller for Salesforce objects and it contains the following actions.

• Save
• Quicksave
• Edit
• Delete
• Cancel
• List

If you desire additional functionality you will need to use a custom controller which you will call using the controller attribute—and if you desire to call more than a single controller, you can call additional controllers using the extension attribute.

If you are trying to start a page fresh and want it to be completely custom, you will need to make sure that you specify false on all of these apex attributes to make sure that none of your custom styles will be affected by the Visualforce defaults.

Static Resources

Salesforce allows you to save files in the org that can be exposed publicly, so you can import them into public pages. Since there isn’t a dedicated place to store things like CSS or JavaScript files, or pretty much any type of file that is not Salesforce-specific, you will be able to save them as static resources. 

For the ability to call static resources in your pages you will need to use the static resource binding syntax which will look something like this “{!URLFOR($Resource/file, ‘file/file-name’)}.” If you have any third party libraries that you would like to use in your page, you can save them as static resources and then import the script in your page.

Markup and Apex Tags

Visualforce apex tags are incredibly useful because they allow you to get and set values in the controller. You can get values from the controller using any normal HTML tag using Salesforce’s data binding using “{!controllerVariableName},” but using an apex tag will allow you to change the controller value. 

Apex tags allow for most normal attributes, but there are a few oddities. To specify a class you need to use “styleClass” rather than just “class” and if you are using a text input, the placeholder attribute is changed to “html-placeholder.” One of the first things that took some getting used to is how apex:tag Ids are formatted. When trying to find an apex tag in JavaScript, you’ll quickly realize that the Id of your tag is not exactly what you input for the Id.

For example, a tag with an Id of “name” will have an Id that looks something like “pageName:parentElement:name.” The Id’s have additional information appended to it, but in your JavaScript you can call your element by using {!$Component.parentElementId:yourId}. Since you can give the Visualforce page a name, it will change the Id of all of your apex tags, so it is best to use the $Component tag to make sure you don’t need to change all of your Ids if the name ever changes.

Apex Repeat and OutputPanels

If you are working with a list of records from your controller, one of the most helpful tags will be using apex:repeat. With the repeat, you can specify a list of records and create the markup for each item in the list to use. Just like other apex tags, the Id of elements in a repeat gets additional information added to them to specify which item in the loop that it is. Working with a repeat for the first time there was a definite struggle trying to figure out how to target a specific item in the list; after some practice, I finally remembered JavaScript events, and since then working with repeats have been simpler. 

Another useful tool in Visualforce is the rendered attribute on apex:tags and more specifically apex:outputPanels. The rendered attribute will allow you to create a conditional based on a controller variable to conditionally render in a section. If there is a section of the page that you would only want to show if a certain condition is met in the controller you can use an apex:outputPanel to be a container for the code. For example, if you wanted to show a section but only if a list in your controller was not empty, you could use the rendered attribute on your tag. It would look something like “rendered=”{!controllerList.size > 0}”” and as long as your list is greater than 0, this section would be rendered.

Hopefully, addressing some of these best practices and quirks of Visualforce will help those struggling with initial setup and navigation.

Need Help Sorting Through Visualforce? Give us a jingle.

At Shift3 Technologies, we use a consultative approach to help you determine the best strategy to identify your challenges, implement appropriate solutions and enhance your systems. Trying to get your users and admins to love Salesforce again? Check out our 3-part series!  For a free consultation, email [email protected] or call 559 560 3300 today.

This post was written by DJ Rodriguez, a Certified Salesforce Admin turned developer with Shift3 Technologies. When he’s not knee-deep in Visualforce, you can find him seeking comfort in a nice bowl of Ramen while binge-watching previous seasons of Naruto.

If you’re interested in uncovering the tech possibilities available to your organization or want to find more ways to increase your ROI with technology, click this link to schedule some time with one of our experts.