Alert with Option Buttons in the Window Body – jQueryUI in a Salesforce Custom Button

Here is another example of using jQueryUI in a Salesforce custom button. I’m referencing Super Clone Pro pages that use different configurations for cloning in this example. This could easily be adapted for other pages or actions. Enjoy!


Alert with Three Options – jQueryUI in a Salesforce Custom Button

Recently, I was asked to create a custom button that would allow a user to choose between two SuperClone Configuration options. jQueryUI provides a nice modal dialog that solved the problem. The dialog showed two buttons for the configurations and a cancel button. Below is the sample code for what I put together. The actions for each button could be swapped out to load other any other pages or run javascript methods.

A few stackoverflow posts helped me put this together. Credit to:
jQueryUI Modal Dialog

Eclipse IDE Editor Configuration Preferences

Eclipse can be setup to display code in an infinite number of ways. The following settings are how I like to configure the Eclipse IDE.

  • Spaces instead of tabs
  • Show line numbers
  • Show whitespace characters
  • Show a print margin

These settings can be changed at: Window -> Preferences -> General -> Editors -> Text Editors

Eclipse Editor Configuration

Click the “configure visibility” link next to the show white space setting to add fine tuning. I always uncheck the the trailing carriage return and line feed boxes and increase the opaqueness.

Eclipse White Space Characters

Apex File Naming Standards

Consistent file naming helps keep Visualforce and Apex classes easy to recognize and find. I’ve seen many orgs with both the good and the bad. Below is a table with naming suggestions. Some of them are mine, but most came from a presentation that I found referenced in a Trailhead module. The presentation is by Vivek Chawla. I recommend looking it over because it covers a lot of good stuff. Thank you Vivek.

Apex and Visualforce Naming

  • UpperCamelCase
  • Avoid using underscores.
  • Use full names where possible. Be consistent.
  • Test class should be named for the class they cover, and the word “Test” should be appended to the end.
Functional Type Name Suffix Examples
Trigger Trigger AccountTrigger
Trigger Handler TriggerHandler AccountTriggerHandler
VF Controller Controller AccountCloneController
VF Controller Extension ControllerExt AccountCloneControllerExt
Service Class Services AccountServices
Utility Class Util AccountDupeCatcherUtil
Selector Class Selector AccountSelector
Model / Wrapper Class Varies… Accounts / AccountWrapper
Web Service (SOAP) Ws AccountToolsWs
Web Service (REST) Rest AccountToolsRest
Email Service EmlSvc AccountCreateEmlSvc
Asynchronous (Future) Async AccountIntegrationsAsync
Asynchronous (Batch) Batch AccountMigrationBatch
Scheduled Apex Job AccountCleanupJob
Queueable Apex Que AccountSyncingQue
Visualforce Page -none- AccountClone
Visualforce Component Cmp AccountCloneCmp
Lightning Components -TBD-
Lightning Pages -TBD-

Workflow Rule, Field Update, and Email Alert Naming

Workflow Rules and their actions can also get unruly without consistent naming. Force365 published some good suggestions. Below are the ones that I refer to most.

Workflow Rule
[Object]: [Criteria Description i.e. Condition]

Workflow Actions
Field Update –
Set [Field] to [Value]
Email Alert –
Send [Template short description]
Task –
[Task Subject]


SlideShare: Salesforce Development Best Practices by Vivek Chawla
Blog: Force365 – Salesforce Naming Conventions – Declarative


Using the Enter Keypress Event in Visualforce to Search or Change Checkbox Properties

Perform common actions like run a search or check a checkbox when the enter key is pressed, instead of form submission. The example below shows how to do this with help from jQuery in the Visualforce page.

Things to notice:

  • jQuery.noConflict() prevents conflicts with other javascript that Salesforce may have loaded.
  • j$(document).ready will run the contained JavaScript after the components are loaded on the page. Binding event handling to elements could be missed without this.
  • event.keyCode == 13 is the key code for the Enter button.
  • CSS classes are used to attach the keypress event handling, but you could also specify element types, names, or any other valid selector logic.
  • searchFilter CSS class could be used on text, drop down/picklists, checkboxes, etc.
  • .trigger(‘click’) is used below. It is similar to .click(), and they are interchangeable for this example. The difference that I’m aware of is .trigger(‘click’) can accept additional parameters.
  • Probably only one or two of the methods below would be used in a real project. Multiple options are documented to illustrate different options.

Continue reading