jQuery – Cloudstock 2012 – Part 2

Howdy!  Sorry about the lag in putting up “Part 2” here – why the world doesn’t just go “on pause” for me when I duck out for a few days is beyond me.  =)

In Part 2 – we’re talking jQuery modal forms and dialogs.  I’m not really one to really trick-out a solution – I’m more of an augmenter.  jQueryUI has a wonderful little dialog feature that can give your solution just a little extra pizzazz.

Example 1:  Status Dialog

Salesforce has some great native tools to rerender page sections which can bolt into “apex:actionStatus” objects to give your user some heads-up when you’re processing something.  It totally works and I’ve deployed that exact setup myself on numerous occasions, but then I stumbled on this little gem…

For the Cloudstock presentation, I created a Visualforce page with two buttons at the top – “Refresh / Rerender Native” and “Refresh / Rerender jQuery”.  My controller method that each of these buttons invoked was just to rerender a large apex:outputPanel with some datatables bound to some GETers.  Nothing too complicated, but enough to show jQuery’s pizzazz.

Pressing the “Native” button just called the controller’s page refresh method and rerendered the apex:outputPanel and an apex:pageBlock:

<apex:commandButton id=”cmdRefreshNative” value=”Refresh / Rerender Native” action=”{!doNothing}” rerender=”pbMain, opHelper” />

Again, totally works and leverages what Salesforce gives you right out of the box.

The “jQuery” button augmented the Native process by adding in a jQuery modal div – with a little Javascript “show” and “hide” invoked via an apex:actionStatus object.

j$(document).ready(function(){

j$( “#dialog-modal” ).dialog({
autoOpen: false,
height: 150,
width: 400,
modal: true,
resizable: false,
draggable: false
});
}

// Native Javascript hooks into jQuery .dialog

function statusShow() {
j$( “#dialog-modal” ).dialog( “open” );
}

function statusHide() {
j$( “#dialog-modal” ).dialog( “close” );
}

//// ACTIONSTATUS WITH JAVASCRIPT HOOK ////

<apex:actionStatus id=”asShowInterstitial” onstart=”statusShow();” onstop=”statusHide();” />

//// COMMANDBUTTON WITH STATUS HOOK ////

<apex:commandButton id=”cmdRefreshjQuery” value=”Refresh / Rerender jQuery” action=”{!doNothing}” rerender=”pbMain, opHelper” status=”asShowInterstitial” />

//// HTML DIV WITH IMAGE FROM DOCUMENTS ////

<div id=”dialog-modal” title=”Refreshing Demo Page”>
<p align=”center”>
<img src=”/servlet/servlet.ImageServer?id=015C00000014GUj&oid=00DC0000000Q7ku” border=”0″ />
</p>
</div>

Again, nothing extra fancy, but a nice little professional looking window that also serves to block user input while your screen is refreshing!  =)

Example 2:  Action Confirmation

I think Salesforce is an awesome and highly capable platform, but one of the things that really bugs me is the lack of simple confirmation dialogs – specifically on record deletes.  Yes, I know I can go into the Recycle Bin and recover it, but you know that as the Administrator it’s YOU that will be asked to go find it in there.  Whoo.

Another very simple implementation…

In an HTML table, I added a new column with a “Delete” hyperlink.  That hyperlink invokes some Javascript that presented a confirmation box, and then either allowed or cancelled the user’s action.  Again, very simple but very effective.

j$(document).ready(function(){

j$( “#dialog-confirm” ).dialog({
autoOpen: false,
resizable: false,
height:200,
modal: true,
buttons: {
“Delete Account”: function() {

// Call ActionFunction to Delete Account
afDeleteAccount(strDeleteAccountId);

j$( this ).dialog( “close” );
},
Cancel: function() {
j$( this ).dialog( “close” );
}
}
});
});
}

// Native Javascript hooks into jQuery .dialog

function deleteAcct(strAccountId) {

strDeleteAccountId = strAccountId;

j$( “#dialog-confirm” ).dialog( “open” );

}

//// ACTIONFUNCTION WITH JAVASCRIPT HOOK ////

<apex:actionFunction id=”afDeleteAccount” name=”afDeleteAccount” action=”{!deleteAccount}” rerender=”pbMain, opHelper”>
<apex:param name=”strAccountId” assignTo=”{!strAccountId}” value=”” />
</apex:actionFunction>

//// A HREF INSIDE OF APEX:REPEAT ////

<a href=”#” onClick=”deleteAcct(‘{!a.Id}’);”>Delete</a>

//// HTML DIV WITH CONFIRMATION MESSAGE ////

<div id=”dialog-confirm” title=”Delete this Account?”>
<p>
<span class=”ui-icon ui-icon-alert” style=”float:left; margin:0 7px 20px 0;”></span>
This Account will be deleted if you continue!&nbsp;&nbsp;Are you sure?
</p>
</div>

Just like with the first example – a nice professional-looking delete confirmation dialog box.

 

I’ve got one more of these posts in me – stay tuned for some modal forms in “Part 3”!

Thanks for taking the time to read my blog – check out Part 1 for more in the meantime…