Advanced Search as a Home Page Component

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:

<form

  id="searchForm"

  action="/search/SearchResults?searchType=2&amp;sen=0&amp;setLast=1"

  method="post"

  name="advsrch"

  onmousemove="if(getElementById('textBoxImage')) {document.getElementById('textBoxDiv').innerHTML='<input id=\'searchField\' maxlength=\'80\' name=\'sbstr\' size=\'18\' value=\'\' type=\'text\'><input value=\' Go! \' class=\'btn\' type=\'submit\'>'}">

  <div id="textBoxDiv">

    <img id="textBoxImage" src="/resource/1269872073000/TextBoxImage2">

  </div>

</form>

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:

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!