Salesforce Archives - Page 2 of 5

Alert with Three Options – jQueryUI in a Salesforce Custom Button

18 Aug

Recently, I was asked to create a custom button that would allow a user to choose between two SuperClone Configuration options. jQueryUI provides a nice modal dialog that solved the problem. The dialog showed two buttons for the configurations and a cancel button. Below is the sample code for what I put together. The actions for each button could be swapped out to load other any other pages or run javascript methods.

A few stackoverflow posts helped me put this together. Credit to:
http://stackoverflow.com/questions/9091001/how-to-show-confirmation-alert-with-three-buttons-yes-no-and-cancel-as-it.
http://salesforce.stackexchange.com/questions/63291/open-jquery-dialog-from-custom-button
http://stackoverflow.com/questions/16170157/dialog-was-hidden-behind-overlay-when-modal-true-on-jquery-dialog-in-asp-net


{!REQUIRESCRIPT('//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js')} 
{!REQUIRESCRIPT('//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js')} 

var $g = jQuery.noConflict(); 
$g(function() {
      $g('head').append('<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" type="text/css"/><style>.ui-widget-overlay{z-index: 0;}</style>'); 
      $g('body').append('<div id="dialog" style="display: none" title="Dialog Heading"><p>Dialog Question?</p></div>'); 
      $g("#dialog").dialog({ 
        autoOpen: true, 
        modal: true, 
        buttons: { 
            "Config 1": function() {window.open("superclone url here for config 1","_self");},
            "Config 2":  function() {window.open("superclone url here for config 2","_self");},
            "Cancel":  function() {$g(this).dialog("close");}
        } 
    }); 
});

{!REQUIRESCRIPT('//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js')}

{!REQUIRESCRIPT('//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js')}

var $g = jQuery.noConflict();

$g(function() {

$g('head').append('<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" type="text/css"/><style>.ui-widget-overlay{z-index: 0;}</style>');

$g('body').append('<div id="dialog" style="display: none" title="Dialog Heading"><p>Dialog Question?</p></div>');

$g("#dialog").dialog({

autoOpen: true,

modal: true,

buttons: {

"Config 1": function() {window.open("superclone url here for config 1","_self");},

"Config 2": function() {window.open("superclone url here for config 2","_self");},

"Cancel": function() {$g(this).dialog("close");}

}

});

Using the Enter Keypress Event in Visualforce to Search or Change Checkbox Properties

19 Dec

Perform common actions like run a search or check a checkbox when the enter key is pressed, instead of form submission. The example below shows how to do this with help from jQuery in the Visualforce page.

Things to notice:

jQuery.noConflict() prevents conflicts with other javascript that Salesforce may have loaded.
j$(document).ready will run the contained JavaScript after the components are loaded on the page. Binding event handling to elements could be missed without this.
event.keyCode == 13 is the key code for the Enter button.
CSS classes are used to attach the keypress event handling, but you could also specify element types, names, or any other valid selector logic.
searchFilter CSS class could be used on text, drop down/picklists, checkboxes, etc.
.trigger(‘click’) is used below. It is similar to .click(), and they are interchangeable for this example. The difference that I’m aware of is .trigger(‘click’) can accept additional parameters.
Probably only one or two of the methods below would be used in a real project. Multiple options are documented to illustrate different options.

Continue reading →

Javascript Popup Window Tips for Salesforce

15 Sep

Check if a Popup Blocker Prevented the Popup Window

Most browsers will block popup windows the first time a popup window tries to appear. Here is how to check if a popup window was blocked.


var win = window.open("/apex/PopupWindowVfPage", "MyWinName", "height=500,width=500");

// evaluate the return variable from window.open
if (win == null || typeof(win)=='undefined') {
  alert("The pop-up blocker stopped the window form displaying."); 
}

var win = window.open("/apex/PopupWindowVfPage", "MyWinName", "height=500,width=500");

// evaluate the return variable from window.open

if (win == null || typeof(win)=='undefined') {

alert("The pop-up blocker stopped the window form displaying.");

}

Modal Window

Making a popup window modal helps prevent it from being lost behind the main browser window. The following technique makes the popup window display above the window that created it. However, it doesn’t force the window to stay on top when other tabs or applications have focus.


var win = window.open("/apex/PopupWindowVfPage", "MyWinName", "height=500,width=500"); 
// set the focus new window
win.focus(); 
// assign the methods focusPopup to the window events that may cause it to loose focus
window.onmousedown = focusPopup; 
window.onkeyup = focusPopup; 
window.onmousemove = focusPopup; 

function focusPopup() { 
  if (win && !win.closed) { 
    win.focus(); 
  } 
}

var win = window.open("/apex/PopupWindowVfPage", "MyWinName", "height=500,width=500");

// set the focus new window

win.focus();

// assign the methods focusPopup to the window events that may cause it to loose focus

window.onmousedown = focusPopup;

window.onkeyup = focusPopup;

window.onmousemove = focusPopup;

function focusPopup() {

if (win && !win.closed) {

win.focus();

}

Refresh or Change the Original Page’s Location

A popup window may be used to alter information related to what is displayed on the page that initiated the window. This may require the original page to be refreshed or redirected. Assign the URL to the window.opener.location.href property to change opener’s page.


// change the location of the page that opened the popup
window.opener.location.href = "/apex/NewVfPage";

// change the location of the page that opened the popup

window.opener.location.href = "/apex/NewVfPage";


// refresh the page that opened the popup with the reload method 
window.reload(true);  // true=get page from the server, false=get page from cache

// Or, setting the location to itself
window.opener.location.href = window.opener.location.href;

// refresh the page that opened the popup with the reload method

window.reload(true); // true=get page from the server, false=get page from cache

// Or, setting the location to itself

window.opener.location.href = window.opener.location.href;

Custom Button to Refresh the Original Page

Custom Buttons that use Javascript can do a lot. However, security in modern browsers can make it tricky to refresh or change the URL of the originating page. One way to do this is to have the originating page monitor the popup window that was created. The page can then refresh itself when the popup window no longer exists in memory.

Custom button code:


var win = window.open("/apex/PopupWindowVfPage", "MyWinName", "height=500,width=500"); 

// check if the window exists every second
// refresh the window using the window's same location
var timer = setInterval(function() {
  if(win.closed) { 
    clearInterval(timer); 
    window.location.href = window.location.href; 
  } 
}, 1000);

var win = window.open("/apex/PopupWindowVfPage", "MyWinName", "height=500,width=500");

// check if the window exists every second

// refresh the window using the window's same location

var timer = setInterval(function() {

if(win.closed) {

clearInterval(timer);

window.location.href = window.location.href;

}

}, 1000);

Change the Window Size

Changing the window height to adapt to content within the page can be frustrating because of variations in different browsers. Below is an example of one way to do it. I would not call it pretty, but it works well enough. First, it sets an initial size for the page. This is to specify the width, and the content will flow down the page based on the width. Second, we set the page size again because we can now tell the height based on the new width. Please comment if you’ve found a better light weight way to do this.

Javascript in the Popup Window:


// attach the ChangeWindowSize call to the page's onload event
if (window.addEventListener) {
  window.addEventListener('load', ChangeWindowSize, false);
} else if (window.attachEvent) {
  window.attachEvent('onload', ChangeWindowSize);
}
    
function ChangeWindowSize() {
  // first adjust to set the width
  AdjustWindow();
  // resize a second time after width is set from the first resizing, 10th of a second later
  setTimeout(function(){ AdjustWindow(); }, 100);
}
function AdjustWindow() {
  var body = document.body;
  var height = Math.max(body.offsetHeight);
  // setting the width to 1200px and the height with a 95px buffer
  window.resizeTo(1200, height + 95);
}

// attach the ChangeWindowSize call to the page's onload event

if (window.addEventListener) {

window.addEventListener('load', ChangeWindowSize, false);

} else if (window.attachEvent) {

window.attachEvent('onload', ChangeWindowSize);

}

function ChangeWindowSize() {

// first adjust to set the width

AdjustWindow();

// resize a second time after width is set from the first resizing, 10th of a second later

setTimeout(function(){ AdjustWindow(); }, 100);

}

function AdjustWindow() {

var body = document.body;

var height = Math.max(body.offsetHeight);

// setting the width to 1200px and the height with a 95px buffer

window.resizeTo(1200, height + 95);

}

Close Popup after a Successful Action

A popup window may ask for user input and automatically close when processing has completed successfully. The controller can set a Javascript Boolean variable on success, and the portion of the form that is rerendered can have a script assign a true/false value. Then a method that evaluates if the window should be closed can check the value of that variable.


<script>
var IsSuccessful;

function closeWin() {
  if (IsSuccessful==true || IsSuccessful=="true") {
    self.close();
  }
</scipt>

<apex:outputPanel id="SuccessPanel">
  <!-- the {!IsSuccess} references a pubic Boolean variable in the controller -->
  <script>IsSuccessful=<apex:outputText value="{!IsSuccess}" /></script>
</apex:outputPanel>

<apex:form id="myForm">
  <apex:commandButton value="Save" action="{!DoSave}" onComplete="closeWin();" rerender="SuccessPanel,myForm" />
</apex:form>

var IsSuccessful;

function closeWin() {

if (IsSuccessful==true || IsSuccessful=="true") {

self.close();

}

</scipt>

<apex:outputPanel id="SuccessPanel">

</apex:outputPanel>

<apex:form id="myForm">

<apex:commandButton value="Save" action="{!DoSave}" onComplete="closeWin();" rerender="SuccessPanel,myForm" />

</apex:form>

References

Mozilla – Window open
Mozilla – setInterval
Bob Buzzard – VisualForce Lookup

Remove Last Comma or Other Characters from the End of a String

28 Mar

Apex

Removing the last comma is often needed when dynamically building a SOQL Select string. Salesforce quietly released a bunch of new string methods in Winter ’13 that I have started to really appreciate. One of the new methods is removeEnd() and removeEndIngoreCase(). These are great for removing that last comma.


String soql = 'Select ';
for (MySubClass MSC : MySubClassList) {
    soql += MSC.FieldName + ',';
}
soql = soql.removeEnd(',');
soql += ' From YourObject';

String soql = 'Select ';

for (MySubClass MSC : MySubClassList) {

soql += MSC.FieldName + ',';

}

soql = soql.removeEnd(',');

soql += ' From YourObject';

If your data structure is a simple list of strings, you don’t even need the removeEnd(). The String.join() will form the string without an ending comma.


String soql = 'Select ';
list<String> FieldList = new list<String> {'Id', 'Name', 'Field1__c', 'Field2__c'};
soql += String.join(FieldList, ',');
soql += ' From YourObject';

String soql = 'Select ';

list<String> FieldList = new list<String> {'Id', 'Name', 'Field1__c', 'Field2__c'};

soql += String.join(FieldList, ',');

soql += ' From YourObject';

Javascript

Here is how to remove the last comma of a string variable in Javascript.


MyStrVar = MyStrVar.replace(/,\s*$/, "");

MyStrVar = MyStrVar.replace(/,\s*$/, "");

HTML Line Breaks in Visualforce using Escape=false with Encoding

12 Feb

Using a Visualforce tag with the escape=off option may help send an html tag like a line break to the page. However, escape=off can open cross-site scripting vulnerabilities. Visualforce encoding functions HTMLENCODE, JSENCODE, JSINHTMLENCODE, and URLENCODE help avoid the vulnerabilities, but they also prevent \n new line characters and html tags from showing on the page.

I wanted an html line break <br /> to show on a page, but the JSENCODE function changes brackets into unicode \uC003C and \u003e equivalents. If you’re only expecting line breaks, one way around this is to wrap the SUBSTITUE function around the JSENCODE.


// in a VF tag
<apex:outputText value="{!SUBSTITUTE(JSENCODE(myVariable1), '\\u003Cbr /\\u003E', '<br />'))}" escape="false" />

// out of a VF tag
{!SUBSTITUTE(JSENCODE(myVariable1), '\\u003Cbr /\\u003E', '<br />'))}

// in a VF tag

<apex:outputText value="{!SUBSTITUTE(JSENCODE(myVariable1), '\\u003Cbr /\\u003E', '<br />'))}" escape="false" />

// out of a VF tag

{!SUBSTITUTE(JSENCODE(myVariable1), '\\u003Cbr /\\u003E', '<br />'))}