SharePoint 2010

Friday, March 30, 2012

Show/hide web part with the use of a simple HTML button and java script.

I want to show or hide a web part on a page with the help of a simple HTML button.
SharePoint 2010, "Edit HTML source" feature (see image) helps a lot in doing so, as, with its help you can put an existing web part in a DIV tag and then you can change the 'display' property of that DIV tag.

As soon as you click on this the window that will open up will have a small code for your web part (that you want to show/hide).

Just at the start of that code write your DIV tag and also supply an ID to it, say,

<div id="Toggle" style="display: none;">
..... - web part code - ....
</div>

JavaScript:

Write a small code, that will look something like this:
----------------------------------------------------------------------------------------------------------------------------------

<html>
<head>
<script type="text/javascript" language="javascript">
function ShowWeb()
{
if (document.getElementById("Toggle").style.display == "block")
{
document.getElementById("Toggle").style.display = "none";
}
else
{
document.getElementById("Toggle").style.display = "block";
}

}
</script>
</head>
<body>
<input name="Button1" type="button" value="Show/Hide" onclick="ShowWeb()" style="width: 140px; height: 40px">
</body>

</html>

--------------------------------------------------------------------------------------------------------------------------------
Save this in a text file and upload it on your site.

Go to the page again and add a Content Editor web (CEWP) part just above your main web part. Edit this CEWP and in the URL section give the URL of the text file.

Save the page and that's it! The "toggle" button is ready to display or hide web part.

Monday, February 20, 2012

SharePoint 2010 'Search Results' page design.

Requirements:

I had the following requirements in my current project related to the search on the site collection:

"Did you mean xyz" i.e. spelling suggestions, to appear on the search results page.
Remove the "search connector" icon to be removed from the results page.

Constraints

You cannot edit the "Osssearchresults.aspx" page because it's an application page.

At the same time i also have the main constraint of not to create a new 'Search Center' site as I need to have the branding restored on the search results page. And as soon as you change the master page and CSS for search results page you run into all sorts of problems! So this was ruled out.

What I did

Go to the pages library of the site.
Click on "New Document" and select Blank Web Parts page. I selected this layout because I think that I will get the best layout of the results page in this template only.
I named it as "Results.aspx" .
Add all the web parts on this page in the following manner. Be patient you have to add 8 web parts! :-)

In order to get the "Spelling suggestions", edit “Search Core Results” page and check the check-box corresponding to SHOW MESSAGES.
In order to remove “search connector” icon, edit the “search action links” web part and ‘uncheck’ the option. There are other options that you'll see.
Till now, this is just a simple page. In order to make it a search results page, go to the site collection settings and select “Search Settings”.
Select the first option and write the relative URL in the box as: /sites/blah-blah/pages/results.aspx. Do the same for the "Site coll. page" i.e. the third option.

Now you'll receive the search results on this page.

One last thing - Edit the "Search Box" web part and under "Miscellaneous", in the 'Advanced Search page URL' and 'Target search results page URL' write the complete URL of your new search page: http://abc.xyz.com/sites/blah-blah/pages/results.aspx.

You'll see n number of things when you'll edit these web parts (esp. 'Search Core Results' and 'Search Box' web parts) that you can do without writing a piece of code!