What do you get with Print?

Instant access to your digital copy whilst your Print order is Shipped

Paperback book shipped to your preferred address

Redeem a companion digital copy on all Print orders

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

Visualforce Development Cookbook

Chapter 1. General Utilities

In this chapter, we will cover the following recipes:

Overriding standard buttons
Data-driven styling
Turning off an action poller
Visualforce in the sidebar
Passing parameters to action methods
Reacting to URL parameters
Passing parameters between Visualforce pages
Opening a pop-up window
Adding a launch page
Testing a custom controller
Testing a controller extension

Overriding standard buttons

Two common complaints from users are that the information they are interested in requires a number of clicks to access, or that there is too much information on a single page, resulting in a cluttered layout that requires significant scrolling. This is an area where a Visualforce override can make a significant difference by traversing relationships to display information from a number of records on a single page.

Salesforce allows the standard pages associated with sObject record actions, such as view and edit, to be overridden with Visualforce pages. This is typically used to display the record in a branded or customized format; for example, to display the details and related lists in separate tabs.

In this recipe, we will override the standard page associated with viewing an account record with a Visualforce page that not only provides a tabbed user interface, but also lifts up additional activity information from the related contact list and line item information from the related opportunity lists. Further, the related opportunities displayed will be limited to those which are open.

Note

Only Visualforce pages that use the standard controller for the sObject can override standard pages.

Getting ready

This recipe makes use of a standard controller, so we only need to create the Visualforce page.

How to do it…

Navigate to the Visualforce setup page by clicking on Your Name | Setup | Develop | Pages.
Click on the New button.
Enter AccViewOverride in the Label field.
Accept the default AccViewOverride that is automatically generated for the Name field.
Paste the contents of the AccViewOverride.page file from the code download into the Visualforce Markup area and click on the Save button.
Then, navigate to the Visualforce setup page by clicking on Your Name | Setup | Develop | Pages.
Locate the entry for the AccViewOverride page and click on the Security link.
On the resulting page, select which profiles should have access and click on the Save button.
Note
As the record view override applies to all users, ensure that all profiles are given access to the Visualforce page. Any user with a profile that does not have access will receive an Insufficient Privileges error when attempting to view an account record.
Now that the Visualforce page is complete, configure the account view override. Navigate to Your Name | Setup | Customize | Accounts | Buttons, Links and Actions.
Locate the View entry on the resulting page and click on the Edit link.
On the following page, locate the Override With entry, check the Visualforce Page radio button, and choose AccViewOverride from the list of available pages.
Click on the Save button.

How it works…

When a user clicks on an account record link anywhere in Salesforce, the tabbed page with details from related records is displayed, as shown in the following screenshot:

The key areas of the code are the tabs for the related records. The Open Opportunities tab iterates the opportunities related list, and generates an <apex:pageblock /> for each opportunity that is currently open by encapsulating this inside a conditionally rendered <apex:outputPanel />.

<apex:repeat value="{!Account.Opportunities}" var="opp">
  <apex:outputPanel rendered="{!NOT(opp.IsClosed)}">
    <apex:pageBlock title="{!opp.Name}">

Then, the standard <apex:relatedList /> component is used to generate the opportunity product list by specifying the current value of the opportunity iterator as the subject of the component.

 <apex:relatedList subject="{!opp}" list="OpportunityLineItems" />

Data-driven styling

A useful technique when creating a custom user interface with Visualforce is to conditionally style important pieces of information to draw the user's attention to them as soon as a page is rendered.

Most Visualforce developers are familiar with using merge fields to provide sObject field values to output tags, or to decide if a section of a page should be rendered. In the tag shown below, the merge field, {!account.Name}, will be replaced with the contents of the name field from the account sObject:

<apex:outputField value="{!account.Name}"/>

Merge fields can also contain formula operators and be used to dynamically style data when it is displayed.

In this recipe we will display a table of campaign records and style the campaign cost in green if it was within budget, or red if it was over budget.

How to do it…

Navigate to the Visualforce setup page by clicking on Your Name | Setup | Develop | Pages.
Click on the New button.
Enter ConditionalColour in the Label field.
Accept the default ConditionalColour that is automatically generated for the Name field.
Paste the contents of the ConditionalColour.page file from the code download into the Visualforce Markup area and click on the Save button.
Click on the Save button to save the page.
Navigate to the Visualforce setup page by clicking on Your Name | Setup | Develop | Pages.
Locate the entry for the ConditionalColour page and click on the Security link.
On the resulting page, select which profiles should have access and click on the Save button.

How it works…

Opening the following URL in your browser displays the ConditionalColour page: https://<instance>/apex/ConditionalColour. Here, <instance> is the Salesforce instance specific to your organization, for example, na6.salesforce.com.

A list of campaigns is displayed, with the campaign cost rendered in red or green depending on whether it came in on or over budget.

Conditional styling is applied to the Actual Cost column by comparing the actual cost with the budgeted cost.

<apex:column style="color:
   {!IF(AND(NOT(ISNULL(campaign.ActualCost)), 
   campaign.ActualCost<=campaign.BudgetedCost), 
  "lawngreen", "red")}" value="{!campaign.ActualCost}"/>

Turning off an action poller

The standard Visualforce <apex:actionPoller/> component sends AJAX requests to the server based on the specified time interval. An example use case is a countdown timer that sends the user to another page when the timer expires. But what if the action poller should stop when a condition in the controller becomes true, for example, when a batch apex job completes or an update is received from a third-party system?

In this recipe, we will simulate the progression of a payment through a number of states. An action poller will be used to retrieve the latest state from the server and display it to the user. Once the payment reaches the state Complete, the action poller will be disabled.

Getting ready

This recipe makes use of a custom controller, so this will need to be created before the Visualforce page.

How to do it…

Navigate to the Apex Classes setup page by clicking on Your Name | Setup | Develop | Apex Classes.
Click on the New button.
Paste the contents of the PollerController.cls Apex class from the code download into the Apex Class area.
Tip
Note that there is nowhere to specify a name for the class when creating through the setup pages; the class name is derived from the Apex code.
Click on the Save button.
Next, create the Visualforce page by navigating to the Visualforce setup page by clicking on Your Name | Setup | Develop | Pages.
Click on the New button.
Enter ActionPoller in the Label field.
Accept the default ActionPoller that is automatically generated for the Name field.
Paste the contents of the ActionPoller.page file from the code download into the Visualforce Markup area.
Click on the Save button to save the page.
Navigate to the Visualforce setup page by clicking on Your Name | Setup | Develop | Pages.
Locate the entry for the ActionPoller page and click on the Security link.
On the resulting page, select which profiles should have access and click on the Save button.

How it works…

Opening the following URL in your browser displays the ActionPoller page: https://<instance>/apex/ActionPoller.

Here, <instance> is the Salesforce instance specific to your organization, for example, na6.salesforce.com.

The page polls the server for the current state, displaying the message Polling … when the action poller executes as shown in the following screenshot:

Once the current state reaches Complete, the action poller terminates.

The key to this recipe is the enabled attribute on the actionPoller component.

<apex:actionPoller action="{!movePayment}" 
     rerender="payment" interval="5" status="status" 
     enabled="{!paymentState!='Complete'}"/>

Tip

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

This merge field references the paymentState property from the custom controller, which is evaluated each time the action poller executes until it becomes false. At this time the action poller is permanently disabled.

The Polling … message is generated by the actionStatus component associated with the action poller. This component has a startText attribute but not a stopText attribute, which means that the text will only be displayed while the AJAX request is in progress.

<apex:actionStatus startText="Polling ..." id="status"/>

Visualforce in the sidebar

Visualforce is commonly used to produce custom pages that override or supplement standard platform functionality. Visualforce pages can also be incorporated into any HTML markup through use of an iframe.

Note

An iframe, or inline frame, nests an HTML document inside another HTML document. For more information, visit http://reference.sitepoint.com/html/iframe.

In this recipe, we will add a Visualforce page to a Salesforce sidebar component. This page will display the number of currently open cases in the organization, and will be styled and sized to fit seamlessly into the sidebar.

Getting ready

This recipe makes use of a custom controller, so this will need to be created before the Visualforce page.

How to do it…

Navigate to the Apex Classes setup page by clicking on Your Name | Setup | Develop | Apex Classes.
Click on the New button.
Paste the contents of the CasesSidebarController.cls Apex class from the code download into the Apex Class area.
Next, create the Visualforce page by navigating to the Visualforce setup page by clicking on Your Name | Setup | Develop | Pages.
Click on the New button.
Enter CasesSidebar in the Label field.
Accept the default CasesSidebar that is automatically generated for the Name field.
Paste the contents of the CasesSidebar.page file from the code download into the Visualforce Markup area.
Click on the Save button to save the page.
Navigate to the Visualforce setup page by clicking on Your Name | Setup | Develop | Pages.
Locate the entry for the CasesSidebar page and click on the Security link.
On the resulting page, select which profiles should have access and click on the Save button.
Note
Ensure that all profiles whose sidebar will display the Visualforce page are given access. Any user with a profile that does not have access will see an Insufficient Privileges error in their sidebar.
Next, create the home page component by navigating to the Home Page Components setup page by clicking on Your Name | Setup | Customize | Home | Home Page Components.
Scroll down to the Custom Components section and click on the New button.
If the Understanding Custom Components information screen appears, as shown in the following screenshot, click on the Next button.
Tip
To stop this information screen appearing each time you create a home page component, select the Don't show this page again box before clicking on the Next button.
On the next page, Step 1. New Custom Components, enter Case Count by Status in the Name field, select the HTML Area option, and click on the Next button.
On the next page, Step 2. New Custom Components, select the Narrow (Left) Column option.
Select the Show HTML box.

Paste the following markup into the editable area:

<iframe style="border: none" src="/apex/CasesSidebar"  seamless=""></iframe>

Click on the Save button.
Next, add the new component to one or more home page layouts. Navigate to Your Name | Setup | Customize | Home | Home Page Layouts.
Locate the name of the home page layout you wish to add the component to and click on the Edit link.
On the resulting page, Step 1. Select the Components to show, select the Case Count by Status box in the Select Narrow Components to Show section and click on the Next button.
On the next page, Step 2. Order the Components, use the arrow buttons to move the Case Count by Status component to the desired position in the Narrow (Left) Column list and click on the Save button.
Repeat steps 22 to 24 for any other home page layouts that will contain the sidebar component.
Tip
This will add the component to the sidebar of the home page only. To add it to the sidebar of all pages, a change must be made to the user interface settings.
Navigate to Your Name | Setup | Customize | User Interface and locate the Sidebar section.
Select the Show Custom Sidebar Components on All Pages box as shown in the following screenshot, and click on the Save button.

How it works…

The component appears in the sidebar on all pages, showing the number of cases open for each nonclosed status, as shown in the following screenshot:

There's more…

The case counts displayed in the sidebar will be retrieved when the page is displayed, but will remain static from that point. An action poller can be used to automatically refresh the counts at regular intervals. However, this will introduce a security risk, as each time the poller retrieves the updated information it will refresh the user's session. This means that if a user were to leave their workstation unattended, the Salesforce session will never expire. If this mechanism is used, it is important to remind users of the importance of locking their workstation should they leave it unattended.

Key benefits

Provide an enhanced user experience with dynamically generated, reactive pages

Access data over additional channels via public web sites and mobile pages

Packed with easy to follow recipes, including step-by-step instructions and Apex/Visualforce code downloads

Description

Visualforce, in conjunction with Apex, makes it easy to develop sophisticated, custom UIs for Force.com desktop and mobile apps without having to write thousands of lines of code and markup. The "Dynamic Binding" feature of Visualforce lets you develop generic Visualforce pages to display information related to the records without necessarily knowing which data fields to show. This is accomplished through a formula-like syntax, which makes it simple to manage even a complex hierarchy of records. "Visualforce Development Cookbook" provides solutions for a variety of challenges faced by Salesforce developers and demonstrates how easy it is to build rich, interactive pages using Visualforce. Whether you are looking to make a minor addition to the standard page functionality or override it completely, this book will provide you with the required help throughout. "Visualforce Development Cookbook" starts with explaining the simple utilities and builds up to advanced techniques for data visualization and reuse of functionality. This book contains recipes that cover various topics like creating multiple records from a single page, visualizing data as charts, using JavaScript to enhance client-side functionality, building a public website and making data available to a mobile device. "Visualforce Development Cookbook" provides lots of practical examples to enhance and extend the Salesforce user interface.

What you will learn

Write effective controller tests

Maintain multiple records from a single page

Produce re-usable components for utility functions

Create custom charts to visualize single or multiple sets of data

Redraw part of a page in response to user input

Replace standard components with custom, brandable versions

Provide access to data via a public website

Allow users to create and retrieve data from a mobile device

What do you get with Print?

Instant access to your digital copy whilst your Print order is Shipped

Paperback book shipped to your preferred address

Redeem a companion digital copy on all Print orders

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

Frequently bought together

$54.99

Salesforce CRM: The Definitive Admin Handbook - Second Edition

$60.99

Total $ 115.98

Filter reviews by

All

Amazon verified reviews

Sara Morgan Nettles Nov 18, 2013

The code recipes are great and could really go far in demonstrating the potential of the platform. It is obvious that the author has implemented many, if not all of these recipes in real-world scenarios. However, I think this may be a dangerous book for developers new to the Force.com platform. In fact, I would not recommend it to anyone who has not worked with the platform for at least one year.The sample code that was provided was easy to download and well organized. It was also formatted properly so that you could cut and paste it straight into your development org. Very little sample code is included in the actual book, which I think helps to ensure that the book stays up to date. As long as the publisher and author continue to update the sample code with each new Salesforce release, the code should stay viable as the platform inevitably changes.I REALLY liked the chapters on JavaScript and jQuery Mobile and cannot wait to try out some of the recipes included for my clients. In short, this is an invaluable resource for seasoned Force.com developers, but should be approached with caution for newbies.

Amazon Verified review

harish May 11, 2015

I book that guides to grow as an advanced Visual Force developer.

Sarabdeep Oct 24, 2016

A must have for an intermediate to advanced Visualforce developer. I have come across the use cases in my earlier projects and would have really loved to have this book earlier.

talkinghead Jan 14, 2015

As a long time SF consultant and developer, I found this book full of VERY useful code snippets. However, the companies website for downloading the code samples is terrible. If they would solve this problem, I'd give the book 5 stars. I'm only giving it 4 stars since without the full code samples you'll have to guess at a lot.

Mona Jan 06, 2014

If you are a developer who wants to know the nuts and bolts of Visualforce Pages then DONT refer to this book immediately. Visualforce developer guide will be a better book for you. However, if you do have some programming experience in VisualForce, then this book does its job extremely well. Its a book which is like a pocket dictionary to have for seasoned Visualforce Developers.The sample code that was provided was easy to download and well organized.Chapters 6,7,8 and 9 are simply great. Even though I have worked a lot on Visualforce page there are certain areas on Visualforce Charts and Javascript which were new to me as well. So as a cookbook this book does the job very well.

Visualforce Development Cookbook: For developers who already know the basics of Visualforce, this book enables you to advance to the next level. With over 75 real-world examples accompanied by stacks of illustrations, it clarifies even the most complex concepts.

What do you get with Print?

Contact Details

Shipping Address

Billing Address

Key benefits

Description

Who is this book for?

What you will learn

Product Details

What do you get with Print?

Contact Details

Shipping Address

Billing Address

Product Details

Packt Subscriptions

Frequently bought together

Table of Contents

Recommendations for you

Customer reviews

Filter reviews by

People who bought this also bought

About the author

FAQs