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…

Advertisements

4 thoughts on “jQuery – Cloudstock 2012 – Part 2

  1. Nice blogpost, i’m trying to reach the same. In a fully Visualforce page it works fine.
    But how would one use it in a visual force page on a normal detail record?

    If you place a Visualforce page on a normal layout, the html is outputted in a html iframe. the model box will show the modal based on the iframe width/height and not based on browser screen.

    Also tried to add the javascript to a homepage component in the sidebar. But because the visualforce and sidebar html are being served from different domains you’ll get security errors.

    Looking forward to hear your thoughts about this.

    • Good morning Jorrit!

      That’s a darn good question. You’ll run into the same issue with embedded VF pages in your standard layout – they’re being served from different domains.

      I’ve run into the same thing – but I haven’t been able to figure this one out either. At least to my knowledge, you’re out of luck. =(

  2. Andy – This is great stuff. I’m sorry I missed you at DF2012 but there are too many sessions to cover! I downloaded and installed your demo in our org and was wondering if I can just launch the demo VF page to check it out.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s