Chapter 7. JavaScript

In this chapter, we will cover the following recipes:

• Using action functions

• Avoiding race conditions

• The confirmation dialog

• Pressing Enter to submit

• Tooltips

• The character counter

• The onload handler

• Collapsible list elements

• The scrolling news ticker

• Carousel messages

• Hiding buttons on submit

• Client-side validation

• Trapping navigation away

Introduction

JavaScript is used on a huge number of websites to add visual effects, validation, server interaction, and many more features. As JavaScript executes at the client side, it removes the latency involved with a round trip to the web server, resulting in more responsive applications and an improved user experience. JavaScript can also provide functionality that is not possible using HTML and server-side processing, for example, handling individual key clicks or mouse movements.

Visualforce has built-in capability to allow JavaScript interaction with the page controller. For example, the <apex:actionSupport /> component allows controller action methods to be called in response to JavaScript events, while the <apex:actionFunction /> component generates a JavaScript function that encapsulates a controller action method. Further, many components provide the on<event> attributes, such as onclick and onchange, to allow custom JavaScript to be invoked in response to user...

Using action functions

An action function allows an action method from a controller to be executed from JavaScript. The standard Visualforce <apex:actionFunction /> component generates a named function that can be called from any JavaScript code.

In this recipe, we will create a Visualforce page that displays a list of cases and a countdown timer implemented in JavaScript. Once the timer expires, an action method from the page's controller is executed, which redirects the user's browser to the standard case tab.

Getting ready

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

How to do it…

1. Navigate to the Apex Classes setup page by clicking on Your Name | Setup | Develop | Apex Classes.

2. Click on the New button.

3. Paste the contents of the ActionFunctionController.cls Apex class from the code download into the Apex Class area.

4. Click on the Save button.

5. Next, create the Visualforce page by navigating to the Visualforce setup page by clicking on Your...

Avoiding race conditions

An action function provides a way to submit a form programmatically via a JavaScript function call. When an action function is executed from a JavaScript event handler, the default browser behavior continues once the event handler has completed. If the event handler is attached to a Visualforce component that submits the form, an onclick handler for an <apex:commandLink /> or <apex:commandButton /> component, for example, the default browser behavior is to continue with the form submission. This results in a race condition as to which form submission request will be processed first by the server and will often produce unexpected results.

In this recipe, we will create a Visualforce page to execute a search for accounts matching a user-entered string of characters. When the user clicks on the button to start the search, a JavaScript function is invoked that checks the number of characters entered. If two or more characters have been entered, the search...

The confirmation dialog

A feature missing from the standard Salesforce record edit functionality is the ability for the user to confirm that they wish to execute an action. If a user inadvertently clicks on the Cancel button, their work will be discarded.

In this recipe we will create a Visualforce page that allows a user to create an account record. If the user clicks on a button to save the record or cancel the creation, they will be requested to confirm that they wish to continue with the action.

Getting ready

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

How to do it…

1. Navigate to the Visualforce setup page by clicking on Your Name | Setup | Develop | Pages.

2. Click on the New button.

3. Enter Confirmation in the Label field.

4. Accept the default Confirmation that is automatically generated for the Name field.

5. Paste the contents of the Confirmation.page file from the code download into the Visualforce Markup area and click on the Save button.

6. Navigate...

Pressing Enter to submit

When the Enter key is pressed and a single-line HTML form element has focus, modern browsers will submit the form via the first submit button. If the user has pressed the Enter key expecting to move on to a new line and remain in the input element, this can lead to the submission of a partially filled in form, resulting in a low quality record being created.

In this recipe we will create a Visualforce page that allows a user to create an opportunity. If the user presses the Enter key while filling in any of the opportunity fields, they will be asked to confirm that they wish to submit the form.

Getting ready

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

How to do it…

1. Create the Visualforce page by navigating to the Visualforce setup page by clicking on Your Name | Setup | Develop | Pages.

2. Click on the New button.

3. Enter PressEnter in the Label field.

4. Accept the default PressEnter that is automatically generated for the Name...

Tooltips

Tooltips allow additional information to be provided when an HTML element is hovered over. The standard title attribute available for any HTML element provides a basic tooltip, but the output of this attribute cannot be styled or use custom transitions to appear in interesting ways.

In this recipe we will create a Visualforce page containing a list of opportunities. Each column heading in the list provides an explanatory tooltip when the header text is hovered over. The tooltip is styled and slides down to reveal itself.

Getting ready

This recipe uses the jQuery (http://jquery.com/) JavaScript framework and jQuery User Interface (http://jqueryui.com/) library to produce, style, and transition the tooltip. The JavaScript and CSS files are included from the Google Hosted Libraries content delivery network rather than being uploaded as Salesforce static resources, as this makes it straightforward to move to new versions simply by changing the URL of the included file.

This recipe makes...

The character counter

A number of field types allow a set number of characters to be entered, for example, text area and long text area. A useful addition to the user interface for these fields is a mechanism to inform the user how many more characters they may enter.

In this recipe we will create a Visualforce page that allows a user to create a case. The subject standard field can contain a maximum of 255 characters. A counter of the number of characters remaining is displayed beneath the Subject input field. The character counter is updated when the user types a character, or if they cut or paste information from or to the field.

Getting ready

This recipe uses the jQuery (http://jquery.com/) JavaScript framework to handle the client-side events. The JavaScript file is included from the Google Hosted Libraries content delivery network rather than being uploaded as a Salesforce static resource, as this makes it straightforward to move to a new version simply by changing the URL of the included...

The onload handler

An onload handler allows JavaScript code to be executed when an HTML page has completed loading. While adding an onload handler to a Visualforce page, care must be taken not to interfere with any default onload handler added by the platform, to give focus to the first input field in the page, for example.

In this recipe we will create a Visualforce page that allows a user to create an opportunity. An onload handler in the page executes a JavaScript function to set the default value for the opportunity amount field to 100000. If the platform has specified an onload handler function, this is executed before the amount value is set.

How to do it…

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

1. Create the Visualforce page by navigating to the Visualforce setup page by clicking on Your Name | Setup | Develop | Pages.

2. Click on the New button.

3. Enter Onload in the Label field.

4. Accept the default Onload that is automatically generated for...

Collapsible list elements

When a number of records and related information are rendered as a list, a user is often presented with a large amount of data that they must scroll through in order to access the items that they are interested in. One way to improve this is to allow items to be collapsed, showing enough headline information to allow the item to be identified, but taking up the minimum amount of screen real estate.

In this recipe, we will create a Visualforce page that displays a list of account records and their associated contact records. Each account record is collapsed when the page is initially rendered, and the user may click a record to expand it and see the associated contact information.

Note

Visualforce provides collapsible behavior for the standard <apex:pageBlockSection /> component. However, this forces the content to be expanded or collapsed to be nested inside this component, which styles the content in a similar fashion to a standard Salesforce section. The solution...

The scrolling news ticker

A scrolling news ticker is a common feature on many websites, providing an eye-catching way to present headlines or updates to users.

In this recipe we will create a Visualforce page that displays a list of news items based on 10 recently closed opportunities. The page initially displays the first three opportunities and then scrolls through the remaining, removing the top item, moving the others up vertically, and appending the next item to the bottom of the list.

Getting ready

This recipe uses the jQuery (http://jquery.com/) JavaScript framework to scroll the list of stories. The JavaScript file is included from the Google Hosted Libraries content delivery network rather than being uploaded as a Salesforce static resource, as this makes it straightforward to move to a new version simply by changing the URL of the included file.

This recipe makes use of a wrapper class to encapsulate the stories.

1. Navigate to the Apex Classes setup page by clicking on Your Name | Setup...

Carousel messages

A carousel is a mechanism for giving viewers of a web page access to a number of content items (for example, messages, news stories, and images) via a single element on the page. They are usually implemented as sliding or rotating horizontal panels where the content is updated after a set period of time.

In this recipe we will create a Visualforce page that rotates a carousel of recently closed opportunities. The page displays a single opportunity at a time and transitions between opportunities by fading out the old one and fading in the new one. We will then create a homepage component containing this page and add it to the Home page layout.

Getting ready

This recipe uses the jQuery (http://jquery.com/) JavaScript framework. The JavaScript file is included from the Google Hosted Libraries content delivery network rather than being uploaded as a Salesforce static resource, as this makes it straightforward to move to a new version simply by changing the URL of the included...

Hiding buttons on submit

When a user clicks on a button to submit a form, if they don't receive any feedback that the click was successful, they are likely to click the button again, resulting in a double form submission. Disabling buttons or the form when a button is clicked can introduce browser compatibility issues, as some browsers will interpret this as a request to cancel the form submission.

In this recipe we will create a Visualforce page that allows a user to edit some basic information about a contact. When the user clicks on the Save or Cancel button to save or discard their changes, the buttons will be swapped out with a pair of disabled buttons containing text to indicate that the form submission is taking place.

Getting ready

This recipe uses the jQuery (http://jquery.com/) JavaScript framework to swap the buttons. The JavaScript file is included from the Google Hosted Libraries content delivery network rather than being uploaded as a Salesforce static resource, as this makes...

Client-side validation

Carrying out validation in the browser when a user submits a form is a technique that has been popular for a number of years. The user is given immediate feedback rather than having to wait for a round trip to the server, and bandwidth is saved by not submitting the form if there are issues.

In this recipe we will create a Visualforce page that allows a user to create a contact record. When the user clicks on Save, client-side validation will take place to ensure that one of the e-mail address or phone number fields has been populated before submitting the form.

Getting ready

This recipe uses the jQuery (http://jquery.com/) JavaScript framework to swap the buttons. The JavaScript file is included from the Google Hosted Libraries content delivery network rather than being uploaded as a Salesforce static resource, as this makes it straightforward to move to new versions simply by changing the URL of the included file.

This recipe also uses the jQuery Validation plugin to...

Trapping navigation away

When a user is filling in a form, inadvertently clicking on a link to another page, or generating the page back, the keyboard shortcut sends the browser to a new page and discards all user inputs. In the event that the form is large and complex, this can represent a significant lost effort.

In this recipe we will create a Visualforce page that allows a user to create a contact record. If the user clicks on a button to save the record or cancel the creation, they will be requested to confirm that they wish to continue with the action. If the user clicks on the Save or Cancel button, this will submit the form without further confirmation.

Getting ready

This recipe uses the jQuery (http://jquery.com/) JavaScript framework to swap the buttons. The JavaScript file is included from the Google Hosted Libraries content delivery network rather than being uploaded as a Salesforce static resource, as this makes it straightforward to move to new versions simply by changing the...