Simple Popup In Salesforce Standard & VF Pages - SimpleDialog [Hack]

Well this is something that should be called as hack. While working with salesforce Js libraries I found some interesting methods hidden inside. Well most of them are very difficult to understand because of the naming of different input parameters but somehow I was able to decode one of them which are related to generating popup.

SimpleDialog

Simple dialog generates a very simple popup/dialog. So far from the code it looks like

• Modal popup
• Can be draggable
• Option to set title and content
• Supports html in the body

So here is a bit of code that will fire a SimpleDialog

function showSimpleDialog(){    
   var sd = new SimpleDialog("Test"+Dialogs.getNextId(), false);    
   sd.setTitle("Test Pop up");   
   sd.createDialog();   
   window.parent.sd = sd;   
   sd.setContentInnerHTML("<p align='center'><img src='/img/msg_icons/warning32.png' style='margin:0 5px;'/></p><p align='center'>This is awesome!</p><p align='center'><br /><button class='btn' onclick='window.parent.sd.hide(); return false;'>cancel</button></p>");    
   sd.show();   
 }  
 showSimpleDialog(); //open the popup  

This code will create a popup like below

Bit of Explanation about different parameters / Methods

• Dialog Id
  

  var sd = new SimpleDialog("Test"+Dialogs.getNextId(), false);  

  The firs parameter here is the dialog Id it is pretty much handled by salesforce internal method "getNextId" you can change the prefix to something more relevant. Make sure you use "getNextId" method everytime you generate a dialog else the popup won't be generated properly.
• Draggable
  

  var sd = new SimpleDialog("Test"+Dialogs.getNextId(), false);  

  whether a dialog is draggable or not it is decided by the second parameter. Set the second parameter to true to make the dialog draggable
• Title / setTitle
  

  sd.setTitle("Test Pop up");  

  This line actually sets the title of the popup
• setContentInnerHTML
  

  sd.setContentInnerHTML("<p align='center'><img src='/img/msg_icons/warning32.png' style='margin:0 5px;'/></p><p align='center'>This is awesome!</p><p align='center'><br /><button class='btn' onclick='window.parent.sd.hide(); return false;'>cancel</button></p>");   
  

  This lines basically sets the content of the popup. It should be a valid HTML content
• show
  This method triggers the popup and displays the content
• hide
  This method hides the popup

Or code can be wrapped a bit to make it simpler 

function showSimpleDialog(title,htmlBody,isDraggable){    
   var sd = new SimpleDialog("SD"+Dialogs.getNextId(), isDraggable);    
   sd.setTitle(title);    
   sd.createDialog();     
   sd.setContentInnerHTML(htmlBody);    
   sd.show();   
   return sd;   
}    
showSimpleDialog('Sample','This is sample modal popup',false);   

So simplified parameters would be

• title : Title of the popup
• htmlBody : html content that you want to display in the popup
• isDraggable : set this to true if you want the popup to be draggable.

Special consideration while using the popup in a standard page

You can copy the sample script inside onclick javascript of a custom button on a standard layout to implement the popup. But you have to bit careful and have to maintain the context of the "sd" variable.

If you check the sample script code you can see that we can display a popup by calling the "show()" method, but while working with standard pages the context variable "sd" is lost and you cannot actually call "sd.hide()" to hide the popup. To overcome this we are saving the context of the popup in "window.parent" global variable. 

window.parent.sd = sd;  

and now you can access the dialog context and call hide/show function by doing 

window.parent.sd.hide();

Well if you are working in a VF page you dont need this workaround you can directly call

sd.hide(); 

Demo/Installation : http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a029000000AmQXP

Please Note : This example uses Salesforce internal libraries to create a dialog. Use of this libraries are discouraged by Salesforce as they can change anytime