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(); 

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


1 comment:

  1. Were you able to implement it with two buttons? OK and Cancel? I've been trying it but it only return one outcome for the two buttons. Either true or false...

    ReplyDelete