Tuesday, February 14, 2017

Using Salesforce standard modal in a Detail page button - Part 1

Tired of having to use window.open in a detail page button to display a popup? Or using JavaScript libraries to display a modal?
Well, there is a more simple way to display a popup and this without embedding any JavaScript library in the code.

This can be achieved by using Salesforce standard modal and by tweaking the code, many things can be achieved.

To get started, Create a Custom button on the object you want the modal to be used.
Set the properties to:
Display Type: Detail Page Button
Behavior: Execute JavaScript
Content Source: OnClick JavaScript

custom button salesforce

In the JavaScript code editor, add the following code and change the variables inside it accordingly to your specification.

Here is the final result:

Check out part 2. We shall discuss how to integrate Visualforce pages inside the modal.

Cheers! :)
(function() { var width = 700; var height = 200; var title = "Dialog title here"; var box = new SimpleDialog("salesforce" + Math.random(), true); box.setTitle(title); box.displayX = true; box.isMovable = false; box.createDialog(); box.setWidth(width); // set your html content here box.setContentInnerHTML( "<h2>Your html content here</h2>" ); //set the height of the modal box.dialog.children[1].style.height = height + 'px'; box.show(); //if displayX is set to true, then override standard close event by this code box.dialog.getElementsByClassName('dialogClose')[0].onclick = function() { box.hide(); // you can add code to reload the page or redirect to another page }; //optional : add this to close the modal onclick of the overlay background box.background.addEventListener('click', function() { box.hide(); }); })();

4 comments:

  1. I don’t even know how I ended up here, but I thought this post was good. I do not know who you are but certainly you are going to a famous blogger if you aren’t already Cheers! sf design agency

    ReplyDelete
  2. Have you ever considered about adding a little bit more than just your articles? I mean, what you say is fundamental and everything. Nevertheless think about if you added some great pictures or video clips to give your posts more, “pop”! Your content is excellent but with images and clips, this site could certainly be one of the most beneficial in its field. Fantastic blog! design agencies sf

    ReplyDelete
  3. aspirin has been time tested to relieve minor pains and inflammation and it is cheap too.. ipad mockup
    aspirin has been time tested to relieve minor pains and inflammation and it is cheap too.. ipad mockup

    ReplyDelete