Monday, August 31, 2015

May The Be With You – Salesforce Tricks And Hacks

There’s something mischievously satisfying about getting away with an act that you feel shouldn’t be allowed. The world of Salesforce development is no exception. None of the following tricks are technically discouraged, but all either bend the rules or capitalize on a system shortcut. The first and last of these I have picked up from the extremely bright Salesforce StackExchange community – special thanks to users @sfdc and @bigassforce (and if you work on the platform I highly encourage you to join!).

1. Changing the background color of an org to distinguish Sandboxes and Production for end users

The first trick addresses an extremely common issue that both end users and developers/admins face – making changes in the wrong organization. For example, on a daily basis, I might work in six different organizations, the landing pages of which look arguably identical. The following two extremely similar pages are two separate orgs:



End users from all types of companies constantly express frustration trying to figure out which org they are working in. Wouldn’t it be nice if it were possible to somehow visually distinguish them? Maybe like this?


Fortunately, since Salesforce generously allows raw unescaped HTML in the “Messages & Alerts” Home Page Component, we can finally achieve visual distinction between orgs! This can be achieved by adding this block of HTML:

<style> body.sfdcBody{background-color:green;background-image:none;} .multiforce{background-color:green;background-image:none;} .bPageHeader .phHeader TD.searchCell{background-color:green;background-image:none;} .bPageHeader TD.vtop:right{background-color:green;background-image:none;} </style>

to “Messages & Alerts” found under “Home Page Components,” shown here:


Simply add the block here and press save. You can use any other color as well!


2. Creating Apex collections directly from SOQL

The second is the least “hacky” of the three and more of a syntactic habit, but I see Apex written that doesn’t capitalize on shorthand constructors all the time. Apex collections are the internal organs of Salesforce development, and knowing which to use in what situations is crucial. However, Apex can feel verbose at times – consider the following code to create a Map of Accounts, keyed by their ID:

Map<Id, Account> accountMap = new Map<Id, Account>(); 
List<Account> accountList = [SELECT Id FROM Account]; 
for (Account a : accountList) {
     accountMap.put(, a); 

Did you know that you can declare and initialize this Map directly from SOQL, shortening four lines to one?

Map<Id, Account> accountMap = new Map<Id, Account>([SELECT Id FROM Account]);

This also works with other collections as well, such as Sets:

Set<Account> accountSet = new Set<Account>([SELECT Id FROM Account]);

3. Changing the color of a custom button

Outside of developing a complete Visualforce solution (which is custom development), it’s pretty damn hard to change the appearance of buttons from the drab default gray. While Salesforce allows the creation of “custom” buttons on detail pages just by clicking some configuration settings, they aren’t truly custom – you can’t modify the appearance of them! Or can you…


This particular pink aesthetic is likely giving the creative department ulcers, but it’s illustrating a nifty hack that can enhance the user experience of an application significantly – custom colors can emphasize or embolden particular actions.

Navigate to “Custom Buttons and Links” under Setup -> Create -> Objects, and select New -> Detail Page Button/Execute JavaScript:


The rest is a bit tricky. Modify the follow JavaScript, replacing “pink_candy_polka_dots” with your lowercase button name.

(function() { var button = document.getElementsByName('pink_candy_polka_dots')[0]; = 'url("")'; }());

The parameter for the background can be replaced with any image you choose. This one is just a small tile of pink.

We need to encode this JavaScript in base64; an encoder can be found here. Paste your modified JavaScript and click encode, it will return an encoded string like this:


Paste this string into the following script, without the enclosing asterisks:

{!REQUIRESCRIPT("data:application/javascript;base64, *YOUR STRING HERE*")} window.location = '/apex/TestMobileOpportunity'; //button action when clicked

and finally, paste this block into the JavaScript source for the button:


Once you add the button to the page layout, it should look like this (or whichever background image you chose):


The reason this works is because the JavaScript that alters the styling of the button is actually being loaded and executed as a Data URI through the REQUIRESCRIPT.

Please do note that Salesforce tends to cut support for hacky JavaScript tricks like this over time, so this may not be valid forever, but for now – have fun!