Cloudspokes.com recently wrapped up a challenge titled “Magical Disappearing Salesforce Button with jQuery” and I couldn’t resist not entering. For starters it’s a pretty rad name for a challenge as anything with the words “magical” and “jQuery” in it get me excited. This challenge is now closed for new entries and I’d like to share my submission. Rather than the typical blog type post I’m going to vlog it! This is the first time I have posted something with this much detail so I’d love to get feedback. Are vlogs the way of the future or should I stick to the tried and true formula of written posts? Let me know.
The best way to watch these is to go full screen and the change the playback quality to 720p.
First up is a high level overview:
Next is a 15 minute deep dive that pulls back the covers and gets into all the juicy details.
If you had trouble seeing the markup and script in the video above here is the sidebar html component that makes the magic happen:
<!-- We can locate this div with the script below, traverse up the DOM and then hide the entire sidebar component. -->
<div id="sidebarComponentLocator">If you see this, something is broke with Dynamic Button functionality.</div>
<!-- Import jQuery from google CDN, could also be static resource-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">/*Immediately create a unique alias for this version of jQuery to prevent conflicts with other js libraries*/var j$ = jQuery.noConflict();/*Determine what type of object is currently being displayed on the page. Only confident way to do this is get object prefix */var objectPefix = window.location.href.substring( window.location.href.indexOf('.com/')+5, window.location.href.indexOf('.com/')+8);/*Query the records from Dynamic_Button__c object as soon as possible, don't wait for DOM ready event*/var result = sforce.connection.query("Select Button_Name__c, Field_Id__c, Field_Value__c from Dynamic_Button__c where Object_Prefix__c = '"+ objectPefix +"'");var records = result.getArray("records");/*Execute this code block once page DOM has fully loaded*/
j$(document).ready(function(){/*Hide the sidebar last as this is lowest priority. First priority is show/hiding the buttons.
Find the sidebarComponentLocator, then find parent div with class 'sidebarModule' and the hide it*/
j$("#sidebarComponentLocator").closest(".sidebarModule").hide().prev().hide();/*First loop through the dynamic button records and hide any that are on the layout. We must first hide all the buttons
as the Dynamic Button records only contan the 'show' logic*/for(var i =0; i< records.length; i++){/*Hide buttons define in Dynamic_Button__c object*/
j$("input[name='"+ records[i].Button_Name__c.toLowerCase()+"']").hide();}/*Now loop through the Dynamic_Button_Records and show button if field value matches that define in record*/for(var i =0; i< records.length; i++){/*Get the value from the field on the page layout*/var recordValue = j$("#"+records[i].Field_Id__c+"_ileinner").text();var showValue = records[i].Field_Value__c;/*Show the button if the value of the field on this record matchs the setting in the Dyamic_Button__c*/if(recordValue == showValue){
j$("input[name='"+ records[i].Button_Name__c.toLowerCase()+"']").show();}}/*Everything above is cool and provides an easy to use interface for the logic but you could always hardcode the logic like so...
First get value from the ninja field, this Id would need to be changed
var ninjaSkillValue = j$("#00NE0000000d4hc_ileinner").text();
/*Hide Ninja Attack button if Ninja Skill picklist value is not 'High'
if(ninjaSkillValue != 'High'){
j$("input[name='ninja_attack']").hide();
}
*/});/*If you are wondering why this file has multiline comments for one one...for some reason single line
comments cause the script to break, something funky with salesforce and javascript in the sidebar.*/</script>
I’ve always wanted to create a jQuery plugin but what to build? There are plugins out there for nearly everything…except for one. Unicorns and rainbows! That’s right, my first jQuery plugin combines the awesome powers of jQuery, unicorns, and rainbows to provide an awe inspiring internet experience. I’ve whipped up a dedicated page for this plugin and you can check it out with the link below:
This blog also focuses a lot on salesforce.com/force.com development and for the visitors familiar with these products you’ll be happy to know that I plan to create an installable package for salesforce.com that will enable use of UnicornBLAST inside salesforce.com.
I know what you thinking. Where have you been!?! No decent posts in over three months! Nothing but promoting yourself and posting advertisements. What happen to the guy that used to post all sorts of sweet nuggets of goodness on his blog? Dreamforce 2010, the holidays, a ton of real job work, and this little guy….
…all got in the way, but enough with the lame excuses. Let’s get down to business.
WARNING: This post is a bit long but I think it’s a good read so grab a coffee, get comfortable, and start making your brain grow.
I’m going to cover a topic I have wanted to look at in more detail for a long time. It revolves around Visualforce and more specifically the performance of Visualforce. Visualforce is great in that it allows you to build front end pages connected to a huge scalable database in less than a day. This ease of use does comes with a price. Visualforce is slow. Rerender operations can take way too long and latency to the servers is definitely not amazing. Depending on the use case latency may not be a huge problem but slow rerenders can make your app feel really sluggish. There are several reasons for this but the main issue is something called the viewstate. Queue ominous music now. Read more…
Many people reading this may already know what I am about to say but I’d like to announce some really exciting news. I will be co-presenting (with @JoshBirk) a session at Dreamforce 2010 on how you can use Visualforce with jQuery to build some wickedly awesome web apps.
I think this is really exciting for a few reasons. The first is that this particular session was chosen by the people for the people. On the Dreamforce Ideas website it is the most up voted session and all around idea. This means there are a lot of other people besides me excited about jQuery and how it can be used with the force.com platform.
Another reason I find this really exciting is that this will be my 4th Dreamforce and the first one I recall having a dedicated session to a JavaScript library like jQuery. One reason is that in the past 4 years JavaScript libraries have made HUGE gains in features and functionality. It will be great to see some alternatives to the typical *insert product name that rhymes with t-rex* session about building rich internet apps as I personally feel there are very few things *it* can do that most JavaScript libraries can’t.
I used to hate and despise JavaScript but jQuery has made be a believer. Rumor has it this session is filling up fast so if you are at all interested in learning more look for the session titled “Developing Applications with jQuery” in the Dreamforce agenda builder.
I finally got around to submitting a paper for Dreamforce 2010. The title…..wait for it……wait…..”Take Your Visualforce Pages to the Next Level with jQuery & jQuery UI”.
Visualforce is great for building solid and scalable web apps. Where it falls short is enhanced web 2.0 (I actually cringe at this term) usability. It lays a solid foundation but lacks slick UI features that users of today’s web expect and will soon demand. jQuery and jQuery UI make it incredibly easy to add enhanced functionality. In this presentation I will show best practices, pitfalls to watch out for, and of course show off some slick apps that use jQuery. What this won’t be is an advanced deep dive on jQuery. This presentation will show anyone who has a little web and Visualforce experience how to apply jQuery to projects they are working on as soon as they get back to work.
Salesforce has seriously pushed Flex the last few years but I guarantee you that 90% of the time I can build the exact same functionality in less lines of code with jQuery. It’s time to show some diversity at Dreamforce. Simply look at this trend for google searches.
jQuery is the most popular javascript library out there today and it even beats Adobe Flex in terms of people looking for more information. If Flex gets a dedicated session at Dreamforce so should jQuery!
If you are a regular reader of this blog you know I’ve got a quirky style with a touch of humor thrown in there. I’ll be sure to carry this over to my presentation unless salesforce makes me be all serious and professional, BORING.
If you like this idea please hit the link below and cast your vote.
Popups suck. Everyone hates them, but it wasn’t always like this. There once once a time long long ago when popup actually displayed relevant information related to the site you were browsing. This was in a time before tabbed browsing and advertising behemoths. Then came advertising on the web and popups galore. Here begins the downfall of the popup. It wasn’t long before popups became incredibly annoying and web users closed them without a glance. Popups were used, abused, and are now the scum of the internet user experience.
So why this brief, and quite frankly masterfully written story on the history of popups? The help link you can add to Visualforce pages is a popup. There are a few reasons I don’t like this. One, it is a popup, and people hate popups. Two, you also have to manage an entirely separate page for what could be a very simple help dialog. And 3, it just doesn’t provide a good user experience. It feels so 1999. Read more…
To be honest I sort of feel bad about writing this post. I have already reviewed, ranted about, and tweaked the new salesforce.com UI, but here comes my third consecutive post related to this. I promise my next post will be about something super cool and radtaculous you can do with salesforce!
We hoped to enable the new UI in the next few weeks and like any good admin or developer I checked all of our custom Visualforce pages to make sure everything still looked and worked correctly. Everything started out so smooth. Everything was looking good. My basic, and for the most part, static Visualforce pages seem to work fine.
A while back Jeff Douglas posted on his blog how to embed a Flex slider into a visualforce page. This is pretty slick and can be really useful, but I’m not a really a fan of Flex (I’ll post about that later) so today let’s look at doing the same thing a little different.
Instead of using Flex to build the slider I will show you how to do this with javascript. This requires less code and I feel it is easier to implement.
We are going to add a super nifty ultra slick slider withonly 16 lines of javascript code.
My posts have been lacking lately but in the next few weeks I plan on creating some super slick demos that mix jQuery and Force.com into a delicious concoction of wonderfulness. Before I do this I’d like to go over the basics of setting up jQuery to play nice with Force.com (or salesforce.com, all the same).
If all we need is jQuery, the first thing we need to do is download it here here: http://jquery.com/.
There will be two versions, one is considered production and the other development. These actually contain the same code but the production file removes all unnecessary spaces.
This smaller version allows the script to be downloaded quicker by users viewing the page and will provide a better user experience to those with less bandwidth. Read more…
