+ Start a Discussion
JMPlayer22JMPlayer22 

Modal popup over entire standard object detail page.

Hello,

 

Is there a way I can have a modal dialog box pop up over a standard object detail page?

 

My use case is:  If our sales team moves an opportunity into a certain stage we want a pop-up over the entire page to deliver some information to them regarding the opportunity based on certain criterea.

 

I've tried using jQuery and YUI via VF Pages but the modal popups only interact within the inline page.  Is there a way I could get it to pop up over the entire detail page without rebuilding the detail page in a custom VF Page?  Would an S-Control work?

 

Thanks

Best Answer chosen by Admin (Salesforce Developers) 
designdesign

Try this as onclick javascript button on detail page

 

{!REQUIRESCRIPT("/soap/ajax/20.0/connection.js")}

visit = "{!Visit__c.Id}";
account = "{!Visit__c.AccountIdId__c}";
dates = new Date();

function insertScript(script){ 
	var targetNode = document.createElement('div');	//	construct div for script injection 
	document.body.appendChild(targetNode); 
	try {
		var el = document.createElement('script');
			el.type="text/javascript";
			el.innerHTML = script;
		targetNode.appendChild(el); 
	} catch (e){ 
		var el = document.createElement('span'); 
		targetNode.appendChild(el); 
		el.innerHTML = "<br /><scr"+"ipt type='text/javascript' defer='defer'>"+script+"</script" + ">"; 
	} 

var box = new SimpleDialog("hersh"+Math.random(), true); 
	parent.box = box; 
	box.setTitle("Create new Order"); 
	box.createDialog(); 
	box.setWidth(350); 
	box.setContentInnerHTML("<p align='center'><img src='/img/icon/hands24.png' style='margin:0 5px;'/><img src='/img/sales/quotes/sync_overlay_arrow.png' style='margin:5px;'/><img src='/img/icon/opportunities24.png' style='margin:0 5px;'/></p><p align='center'>This operation creates a new order for selected products in the visit</p><p align='center'><br /><button class='btn' onclick='createOrder(); return false;'>Create order</button><button class='btn' onclick='window.parent.box.hide(); return false;'>Cancel</button></p>"); 
	box.setupDefaultButtons(); 
	box.show(); 
} 

script = "function createOrder(){var newRecords = [];var order = new sforce.SObject(\"Order__c\");order.AccountId__c = account; order.VisitId__c = visit;order.Date__c = dates;newRecords.push(order);result = sforce.connection.create(newRecords);if (result[0].getBoolean(\"success\")){var neworderId = result[0].id;location.replace(\"/\" + neworderId + \"/e?retURL=\"+neworderId);} else{alert (\"Error by creating an Order. Contact CRM Administrator.\")}}"; 

insertScript(script);

 

 

All Answers

Pradeep_NavatarPradeep_Navatar

Have you tried the thickbox functionality for implementing model popup?  ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library

 

Visit this link for more information :  http://jquery.com/demo/thickbox/

JMPlayer22JMPlayer22

I have and thank you for the link.  I've resolved the issue by overriding the default detail page (didn't know you could do that!) and adding my jQuery to the VF Page I used to override.

designdesign

Try this as onclick javascript button on detail page

 

{!REQUIRESCRIPT("/soap/ajax/20.0/connection.js")}

visit = "{!Visit__c.Id}";
account = "{!Visit__c.AccountIdId__c}";
dates = new Date();

function insertScript(script){ 
	var targetNode = document.createElement('div');	//	construct div for script injection 
	document.body.appendChild(targetNode); 
	try {
		var el = document.createElement('script');
			el.type="text/javascript";
			el.innerHTML = script;
		targetNode.appendChild(el); 
	} catch (e){ 
		var el = document.createElement('span'); 
		targetNode.appendChild(el); 
		el.innerHTML = "<br /><scr"+"ipt type='text/javascript' defer='defer'>"+script+"</script" + ">"; 
	} 

var box = new SimpleDialog("hersh"+Math.random(), true); 
	parent.box = box; 
	box.setTitle("Create new Order"); 
	box.createDialog(); 
	box.setWidth(350); 
	box.setContentInnerHTML("<p align='center'><img src='/img/icon/hands24.png' style='margin:0 5px;'/><img src='/img/sales/quotes/sync_overlay_arrow.png' style='margin:5px;'/><img src='/img/icon/opportunities24.png' style='margin:0 5px;'/></p><p align='center'>This operation creates a new order for selected products in the visit</p><p align='center'><br /><button class='btn' onclick='createOrder(); return false;'>Create order</button><button class='btn' onclick='window.parent.box.hide(); return false;'>Cancel</button></p>"); 
	box.setupDefaultButtons(); 
	box.show(); 
} 

script = "function createOrder(){var newRecords = [];var order = new sforce.SObject(\"Order__c\");order.AccountId__c = account; order.VisitId__c = visit;order.Date__c = dates;newRecords.push(order);result = sforce.connection.create(newRecords);if (result[0].getBoolean(\"success\")){var neworderId = result[0].id;location.replace(\"/\" + neworderId + \"/e?retURL=\"+neworderId);} else{alert (\"Error by creating an Order. Contact CRM Administrator.\")}}"; 

insertScript(script);

 

 

This was selected as the best answer
Sridhar VenkateswaraluSridhar Venkateswaralu

@JMPlayer22 : Can u please explain in detail as to how you were able to override the standard Detail Page and display the Modal pop up over the entire detail page.Please reply as soon as possible.

 

Thanks.

 

Systems IntegrationSystems Integration

Wow, this is amazing, a clever hack!

Radical_arjoRadical_arjo

I have implemented a very similar functionality using parent.SimpleDialog in Javascript. It was working fine. For the last 2 days I started getting an error saying "A problem with the Onclick javascript for this button or link was encountered: Permission denied to access property 'SimpleDialog'.

 

Any ideas or suggestions are welcome......

ValnavjoValnavjo

Hello,

 

I just publish a post where I think everything related with modal dialogs on standard salesforce pages is well explained:

 

http://www.valnavjo.com/blog/modal-dialog-on-a-standard-salesforce-page/

 

 

I hope you find it useful!

 

JVN

Rocks_SFDCRocks_SFDC

Hi,

 

I have a requirement where i have to get input fields in model dialogue box.I have used ur above code to get the input fields but when i call createorder function it is not entering the function

below is my code:

{!REQUIRESCRIPT("/soap/ajax/20.0/connection.js")}
var Id= {!GETRECORDIDS($ObjectType.Contact)};

if (Id.length ==0) 
{
alert("Please select at least one Contact record.");

else
{  
var box = new SimpleDialog("hersh"+Math.random(), true);
 parent.box = box;
 box.setTitle("Send To LeadBox");
 box.createDialog();
 box.setWidth(350);
 box.setContentInnerHTML("<p align='center'><div style='vertical-align:top; display: inline-block'><label for='mySelect'><b>Lead Source Detail:</b></label></div>&nbsp;<select id='mySelect' name=my-dropdown><option value='Focus Prospecting'>Focus Prospecting</option><option value='Pre-Planned List'>Pre-Planned List</option></select></p><p align='center'><div style='vertical-align:top; display: inline-block'><label for='comments'><B>Please Enter Comments:</B></label></div><textarea id='comments'  rows='5' style='resize:horizontal; min-width:300px;' ></textarea></p><p align='center'><br/><button class='btn' onclick=\"createOrder();\">ok</button><button class='btn' onclick='window.parent.box.hide(); return false;'>Cancel</button></p>");
 box.setupDefaultButtons();
 box.show();
}
function createOrder(){alert('hh')}

 

 

 

Any help would be highly appreciated.Thanks in advance

 

 

Thanks,Anil

Anuj kumarAnuj kumar
I am also facing the same issue (create Order is not called even simple alert method onclick event is not working). Please suggest..
Maciej Szymczak 3Maciej Szymczak 3
I suggest simpler solution. 
Focus on >> parent.sendForSign = sendForSign;

{!REQUIRESCRIPT("/soap/ajax/37.0/connection.js")}

function sendForSign() { 
alert('test');
}

function insertScript(){ 
        var box = new SimpleDialog("hersh"+Math.random(), true);
    parent.box = box;
    parent.sendForSign = sendForSign;
    box.setTitle("Send for signing");
    box.createDialog();
    box.setWidth(350);
    box.setContentInnerHTML("<apex:page>You are going to send the contract for signing. Please confirm.<br></br><button class='btn'       onclick='parent.sendForSign(); window.parent.box.hide(); return false;'>Continue2</button><button class='btn'       onclick='window.parent.box.hide(); return false;'>Cancel</button></apex:page>");
    box.setupDefaultButtons();
    box.show();

insertScript();