Advanced Search as a Home Page Component

March 29, 2010 Appirio

Glenn Weinstein

Like many SFDC users, we wanted to reduce the clicks needed to run an Advanced Search.  ShamrockCRM posted a clever trick for adding Advanced Search as a custom Home Page Component, which has saved us lots of clicks over the past year.

However, one frustration with the solution is that SFDC waits until a given page finishes loading, and then puts the cursor into your new Advanced Search textbox.  This is annoying if you’ve already started scrolling through, say, a lengthy detail page, only to have your browser jarringly yank you back to the Advanced Search box.

After thinking hard about a clean solution to this – we’re in tricky territory, after all, with SFDC’s undocumented and sometimes hard-to-divine behavior governing its left sidebar – Chris Bruzzi and I stumbled upon a pretty clever new trick. 

The general principle was that we needed to prevent the textbox element from getting focus until the user really wanted to do a search.The first “aha moment” was the idea of setting the textbox to read-only, until the user moused over it.  Good idea, but read-only textboxes can (and will) get focus.  How about disabling the textbox?  This is a better solution since a disabled control can’t get focus.  But, it also can’t respond to mouseover events!  So we settled on putting a 1-pixel-high invisible image above and below the textbox, and tying the mouseover to these images.  Good, but not great – users could still manage to get their pointers into the textbox without touching the images.

Then Chris had the second “aha moment.”  What if we actually showed just an image of the search box, and then when the user moused over it, we replaced the image with the real search box?  Brilliant!  This works perfectly, and seamlessly.

The modified code looks like this:

  id=”searchForm”

  action=”/search/SearchResults?searchType=2&sen=0&setLast=1″

  method=”post”

  name=”advsrch”

  onmousemove=”if(getElementById(‘textBoxImage’)) {document.getElementById(‘textBoxDiv’).innerHTML=’‘}”>

 

   

 

Note that you’ll need to upload an image file of the search box as a Static Resource, and then replace the URL above (/resource/1269872073000/TextBoxImage2) with a link to your Static Resource.  Here’s an image you can use, which is based on the new Spring ‘10 UI:

TextBoxImage2

We added the “Go” button to the image because we found that if the image only contains the textbox, its alignment compared to the Go button was shifting slightly during the image-to-textbox replacement.

We are now happy users of an Advanced Search component that doesn’t steal focus until it’s time!

Previous Article
Google App Engine – Don't write in isolation
Google App Engine – Don't write in isolation

Mauricio Desiderio With Google I/O kicking off in San Francisco this week, Appirio will be sharing tips we’...

Next Article
Integrate Chatter & Twitter on Google App Engine using OAuth
Integrate Chatter & Twitter on Google App Engine using OAuth

Jeff Douglas At Appirio we’ve been excited about Salesforce Chatter for quite a while. We firmly believe th...