Come see me at Dreamforce 2012!

Good morning!

I am excited to announce that I will be speaking at two sessions at Dreamforce this year!

Enhancing the User Experience with jQuery

jQuery is a JavaScript library that enables easy access, traversal, and manipulation of the Document Object Model (DOM) in web applications. Join us to learn how jQuery can enable you to realize the full potential of rich internet applications that leverage HTML5. From table sorting to animated transitions, from Ajax interactions to accelerated JavaScript development, this session will provide the foundation for changing the way that you write JavaScript.

For those of you that read my blog, you’ll notice that I did a very similar presentation at Cloudforce San Francisco in March this year.  I’ve expanded / improved the presentation and added a really cool new “drag and drop” section that deals with Opportunities and Opportunity Products.  I’m excited to show it off!  After the presentation, I’ll post it all up on GitHub for everyone to share.

Bringing the Salesforce Platform to the local level with Developer User Groups

I am the Minneapolis Salesforce.com Developer User Group leader, and was invited to share my experiences and perspective on how awesome user groups are and why you need to be part of one.  =)

Haven’t signed up for Dreamforce yet?  I can help you out on the cost.  Use the code “SPKREF” to save 20% on the registration fee.  Hope to see you all there!  Let me know if you are coming and we can connect up.

Salesforce and jQuery – now available as a package!

Hello!  Due to a large number of requests, I’ve published my files used in the San Francisco Cloudstock 2012 jQuery presentation to a private link on the AppExchange.

https://sites.secure.force.com/appexchange/listingDetail?listingId=a0N30000008Z4moEAC

Enjoy!

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…

jQuery find: Input Field Masking

Quick post for today…

Man I love jQuery.  I used to spend hours recreating scripts and tweaking them for websites, but thanks to this little gem I found written by Josh Bush:  http://digitalbush.com/projects/masked-input-plugin/

Great little plugin – one line of code on your field for phone numbers, zip codes, or any other fixed-format / length string…awesome!

jQuery = crack for web developers.

So in my new digs, I’m a Salesforce APEX / Visualforce developer.  I had been working with Salesforce for years before coming to Demand Chain Systems, but once I leapt back into the consulting realm, I needed to really kick things up a notch.

Learning how to do things more-or-less the “right” way with APEX development was interesting.  Salesforce themselves along with the user community do an AWESOME job documenting everything as well as helping each other learn how to use things in the real world.  That said, there is kind of a gap for relative newbies getting cranked up into what I call a “conversational” level of knowledge – meaning that you can quickly lay down the foundations to a development project without having to Google anything or look back in previous code for “now how did I do that before?”.

Once you get that down, you can start playing with more of the user-focused interface stuff and general eye-candy.  Enter jQueryUI.  Amazing.

I’ve read about jQuery and worked with it lightly in past lives, but I happened upon a project where I needed some pizzazz – specifically creating a spiffy and extraordinarily easy-to-use interface with some slick flair.  The client said that in delivering the requirements, we needed to have a good measure of “fun factor”.  I can do that.

The best part of my job is learning new technologies to deliver awesome solutions to my clients.  If being presented with a challenge, learning how to do it, and coming through with the sound of jaws dropping on the other side of the table was crack, call me an addict.

The latest need was for the management and scheduling of time-based tasks across multiple resources.  After about 800 lines of written CSS / jQuery code, which through some Salesforce <apex:repeat> and rerendering <apex:outputPanel> sections, we have abotu 3,500 lines of CSS / jQuery code powering about 1,000 lines of again dynamically-generated HTML code with 1,400 lines of an APEX controller powering it all behind the scenes.  All CSS-based page layouts, rather proud of myself.

The biggest “gotcha” here was that this web-based solution (using Salesforce) was replacing an entrenched Windows application.  Right clicks, drag-and-drop, resizing, and a bunch of other traditionally “non-web” things were required and expected.  Again, enter jQuery.

Here is a quick screenshot – with parts blanked out and masked to protect the client (and the innocent).  What an awesome project and I’m so jazzed to be a part of it.  Not going into a crazy-level of detail on the blog here (this was built for a client and that wouldn’t be fair to them) I want to touch on the major design points and how both as a regular web developer and Salesforce / APEX / Visualforce developer – the technical tenets used here open an entirely new world up to you.

jQuery is unfortunately quite daunting to start playing with.  It consists of a few include files and a butt-ton of documentation, with a few very basic examples on their website and a loose smattering of real-world application amongst the community.  HOWEVER – I recommend that every web developer out there go out and learn this technology.  There are so many features just in the basic library that can be used with minimal actual coding (versus hundreds of buggy lines doing it yourself) not to mention the hundreds of plugins for just about anything you can think of that I can’t believe I didn’t start using this more sooner.

I had been a <TABLE> guy pretty much since I started coding HTML.  Short, simple, sweet, and predictable.  This project taught me the power of a CSS-driven DIV / SPAN framework.  Always a little more cross-browser testing and tweaking that needs to be accounted for, but your user experience has no comparison.

I’m going to be putting up some more “real-world” and “best-practice” jQuery examples on the blog here in the coming days to hopefully help those of you who want to start playing around with this stuff.  Through MUCH of my own trial and error I hope to share what I have learned with the masses.  We’re all a much better community because of it.