Friday, January 11, 2013

SharePoint Go Back Button on Search

What's up with SharePoint Search? It has some nice bells and whistles, but when you do a search, how do you go back if you don't find what you want  -or-  just want to get back to where you started? Sure you have the back button on the browser, but for some reason that just seems so unfulfilling. Everyone else is using the  history.go(-1) but the problem with that is that it fails if the user does more than one search. Who is with me on this?!

Well, until someone slaps me in the face with a better idea, I came up with this simple solution. To create a link back to where you started, you need capture where they are coming from and hang on to that information until the user is ready to go back from where they came from. I can't remember why using server/app variable couldn't or wouldn't work (probably because we are on SharePoint Online) so I decided to try cookies.

Here is what it will look like:



This requires the browser's cookies to be enabled. Most people do and so do we, within our company, so it works fine for us. Also, it works regardless of the site collection the search is being launched.

1. Start by editing the result page for your searches by clicking on Page - Edit.These default pages are /yoursearch/pages/results.aspx and /yoursearch/pages/peopleresults.aspx.

2. Edit the fourth line in the script below to reflect your search site.

3. Copy the script to a text file. Save the file and upload it to your search site.

4. Add a CEWP - Content Editor Web Part where you would like the button/link to appear. Point the web part to where ever you put this file within your search site.


(BTW- I tried the history.go(-1) option and it doesn't handle the scenario of the user doing multiple queries before wanting to go back.)

Let me know if you like it or if it makes you want to toss your cookies. I don't have much design sense, so if you have a better idea of how to put it on the page, please let me know. I am probably forgetting something you need to get this to work so post a message with any questions.

Cheers!

Carlos

<script type="text/javascript">
_spBodyOnLoadFunctionNames.push("returnGoBackURL");
function returnGoBackURL() {
 //*******************Specify your url search site here*********
 var rootURL = 'https://mydomain.com/searchURL/';
 var lastURL = document.referrer;
 if (lastURL.substr(0,rootURL.length) != rootURL) {
  setCookie('lastURL', document.referrer, 1 );
   document.getElementById('returnURL').href = document.referrer;
 } else {
   document.getElementById('returnURL').href = getCookie('lastURL');
 }
}

function setCookie(c_name,value,exdays){
 var exdate=new Date();
 exdate.setDate(exdate.getDate() + exdays);
 var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
 document.cookie=c_name + "=" + c_value + ";path=/";
}
function getCookie(c_name) {
 var i,x,y,ARRcookies=document.cookie.split(";");
 for (i=0;i<ARRcookies.length;i++)
 {
   x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
   y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
   x=x.replace(/^\s+|\s+$/g,"");
   if (x==c_name)
     {
  return unescape(y);
     }
 }
}

</script>
<center>
<a id='returnURL' class='returnURL' href="#">Go Back</a>
</center>
<style type="text/css">
.returnURL {
 -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
 -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
 box-shadow:inset 0px 1px 0px 0px #ffffff;
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
 background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
 background-color:#ededed;
 -moz-border-radius:6px;
 -webkit-border-radius:6px;
 border-radius:6px;
 border:1px solid #dcdcdc;
 display:inline-block;
 color:#777777;
 font-family:arial;
 font-size:15px;
 font-weight:bold;
 padding:6px 40px;
 text-decoration:none;
 text-shadow:1px 1px 0px #ffffff;
}.returnURL:hover {
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
 background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
 background-color:#dfdfdf;
}.returnURL:active {
 position:relative;
 top:1px;
}
</style>   

1 comment: