Custom HTML Dialog Box on Standard Salesforce Page Layouts

Native JavaScript alerts can be ugly and look unrefined. They are also quite limiting. Upgrade your custom buttons to provide user feedback with this dependency-free HTML modal box.

advertisement

 

The Problem

So you have discovered the little gem in Salesforce know as the JavaScript Custom Button. It’s a powerful tool and it can be great for enhancing your user’s experience. However, giving the user feedback after the button click has often been relegated to the obligatory JavaScript alert. It gets the job done but it has its limitations. I mean let’s face it, it’s ugly. You don’t have control over the style of the box, the width or even where it shows up on the page. Every browser implements it differently. Many users will see a JavaScript alert and assume that some type of has error occurred and not even take the time to read the alert text.  But for me, the most limiting aspect of our “old friend” is that you cannot use HTML and CSS to format the text to make things more readable.

The Solution

Before and After

To solve these issues we can simply add the following JavaScript to our Salesforce org and replace the standard JavaScript alerts with a call to a JavaScript function. You don’t need to be a developer to follow these steps and use the code “as is”, but I wrote the code to be very readable and easy to update. So if you have some JavaScript experience, you should be able to easily edit the code to change the look and feel.

Overview

Essentially we are going to add this code as a Static Resource and call a JavaScript function to make our new fancy dialog boxes. If you are not a developer, trust me, it’s easier than it sounds 😀

The JavaScript

We will just copy and paste this code so it’s not really important to know what the code does unless you are just curious or if you want to make some changes.

 Look Maw, No jQuery!

When developing this component, it was important to me that it be very portable. So it doesn’t rely on any frameworks or libraries like jQuery or Bootstrap. This makes it really easy to move from org to org. As a matter of fact, I have added this component to nearly every org I’ve ever worked on and it has proven to be very useful.

The showDialog Method

There is only one method, showDialog, in the code above. It takes 4 arguments but only the first 2 are required.
showDialog(title, message [,width] [,largerText]);

Argument Type Required Default Value Description
 title  string   The title that will show up in the heading section of the modal dialog box
 message  string   The text or HTML code that will be displayed in the body section of the modal dialog box
Be sure to escape double quotes in the message argument with the \ character. Example: <a href=\"url...\">Text...</a>
 width  integer    800  The width of the modal dialog box in pixels
 largerText  boolean    false  If true, the size of the dialog box text will be increased by 60%.

This can be overwritten by CSS or inline styles in the mesage HTML

Implementation

To implement this code and start using it, you simply need to upload it as a Static Resource. There are 2 ways to do that. Pick whichever one you are more comfortable with.

Option 1 — File Upload

  1. Copy and Paste the JavaScript above into a text file and save it on your hard drive
  2. Change the extension of the file to .js. This will help Salesforce select the correct MIME Type when we upload it.
  3. In Salesfroce click on the Setup link
  4. In the sidebar, go to Build  Develop   Static Resources
  5. Click the New button
  6. Give the resource a name. You can name the resource anything you like. I called it CustomButtonUtils because I am likely to add code to this file in the future to further extend the custom button functionality. If you choose to name the static resource something different, be sure to update the name in the example code as well.
  7. Select the file you saved in step 1
  8. For Cashe Control , I selected Public because I might call this code from pages in Sites and Communities. If you know this will never be the case for you, select Private.
    More info on this
  9. Click the Save button

Option 2 — Developer Console

  1. Open the Developer Console
  2. Click on File  New  Static Resource
  3. Give the resource a name. You can name the resource anything you like. I called it CustomButtonUtils because I am likely to add code to this file in the future to further extend the custom button functionality. If you choose to name the static resource something different, be sure to update the name in the example code as well.
  4. For MIME Type , select text/javascript
  5. Click the Submit button
  6. Delete the pre-populated helloWorld function from the code editor window
  7. Copy and Paste the JavaScript above into the code editor window
  8. Click on File Save or type Ctrl+S on your keyboard
  9. Close the Developer Console

Usage

Custom Button/Link

  1. Create a new Custom Button or Custom Link
    create-button-screen
  2. In the Behavior field, select Execute JavaScript
  3. For Content Source, ensure that OnClick JavaScript is selected
  4. In the formula/code editor text box, add a reference to the Static Reference we created
  5. add your JavaScript logic and when you are ready to give the user some feedback, call the showDialog method
  6. Click the Save button

Visualforce Page

BONUS – It works in Visualforce pages too!

It works pretty much the same way in Visualforce except you will use an <apex:includeScript /> tag instead of {!REQUIRESCRIPT}. See the example below

Real World Examples

Example 1 — A Call Script Button

This is a JavaScript Custom Button button on the contact page layout. When clicked, it will merge Salesforce data into a static call script template. This is a good use case for setting the dialog box width and largerText arguments to make the text easier to read.

Call Script Credit: https://blog.pipedrive.com/2016/05/cold-calling-scripts/

Call Script Screenshot Call Script Screenshot

Example 2 — A Related Cases Button

This is a JavaScript Custom button on the Case page Layout. When clicked, if will find all of the cases related to the account and display them in a table within the dialog box.

Related Cases Screenshot Related Cases Screenshot

advertisement

Leave a Reply