MOSS 2007: Customize the Search Result (using XSLT) - Part 3 - Customize using SharePoint Designer 2007

Author: Tobias Zimmergren
Url: http://www.zimmergren.net

After being rather busy the last couple of weeks due to taking the SharePoint Certifications as well as tutoring some MOSS 2007 Development around the country it has finally begun to lighten up again. Being the geeky nerd that I am (Yeah, like you aint?), of course the first thing that comes to my mind is to complete the two articles about customizing the Search Results Page with a third post on the subject which will show you a trick to use SharePoint Designer to generate your custom XSLT. These posts are by no means any in-depth articles on the subject, but rather a pointer to get you started on the journey. If there's interest to create a more in-depth article series about the subject, don't hesitate to contact me using the contactlink from my blog or leave a comment to this post.

Please refer to the previous articles if you have any questions about editing the xslt for your Search Result. They can be found here:
MOSS 2007: Customize the Search Result using XSLT
MOSS 2007: Customizing the Search Results Page (XSLT) - Part 2 - Add highlighting

Step by step

First of all, take a look at this picture to understand how it looks before the changes are done (this picture illustrates a standard-layout of the Search Core Results WebPart that is shown when you perform a search in the Search Center)
searchresultsthree1

Modify the XSLT of the Search Core Results Web Part to get the raw XML

The search results are actually based on plain XML (which is why we can use XSLT to customize the appearance of the results to a high extent) so what we will do here is to basically use standard XSLT to get ALL the XML elements displayed in the search results as raw XML. This is done because we will use this raw XML in SharePoint Designer to generate some good looking XSLT markup for our Search Core Results Web Part.

Replace the existing XSLT markup from the Search Core Results Web Part with the following snippet (which basically just give us the raw XML output when searching):

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/>
<xsl:template match="/">
<xmp><xsl:copy-of select="*"/></xmp>
</xsl:template>
</xsl:stylesheet>

searchresultsthree2

Now if you publish the page, you will see a result like the result in the following picure, which illustrates how the raw XML could look:
searchresultsthree3

Make use of the raw XML that SharePoint generated for us in the Search Core Results Web Part

Copy all the raw XML data (including the <All_Results> tags and save to a new XML-file (I named mine rawsearchresult.xml)

When you've copied down the raw XML and saved the file, launch SharePoint Designer 2007 - Let the magic begin!

Use SharePoint Designer 2007 to customize the XSLT for your Search Result Page in SharePoint 2007

Launch Microsoft SharePoint Designer 2007 and open up your SharePoint site (by going to "File" - "Open Site.." and enter the url to your SharePoint site (in my case, it's "http://zimmergren" and hit open)

Next, choose File - New - "ASPX" to create a new ASP.NET page. Note that you do not need to save this page because we will only use the page as a base when we customize our XSLT using SharePoint Designer. Later, when we are satisfied with the presentation of our search results, we will simply copy the generated XSLT and close the new .aspx page and ignore the changes.
searchresultsthree4

Now from the File-meny choose "Data View" - "Insert Data View" to insert a standard DataFormWebPart.

Note, when inserting the aforementioned Data View, the Data Source Library is opened/displayed in the top right pane (if you havn't customized the appearance of SPD) as seen here:
searchresultsthree5

In this newly opened Data Source Library we will expand the node that says "XML Files" and choose "Add an XML file...". Browse to your XML file that contains the raw XML and hit okay.
searchresultsthree6

You will be confronted with a question asking you to import the file into SharePoint, press Ok. When you've hit OK until you're back on the aspx-page, you will see your newly added XML file under the "XML Files" node in the tree in the Data Source Library and in my case it's called "rawsearchresults.xml".
searchresultsthree7

Click the dropdown of your file, and choose "Show Data". Next, choose the tags/entities that you want to include in the presentation of your Search Result by holding down Ctrl + clicking the ones you'd like to insert.
searchresultsthree8

Simply drag and drop those items onto the DataFormWebPart on your ASPX-page and it will automatically render the XSLT for you, like so:
searchresultsthree9

Now, either manually edit the presentation of your search results - or choose the quick edit for your DataFormWebPart and click "Change layout...".
searchresultsthree10

On dialog, choose your desired layout to base the presentation of your search results on.
searchresultsthree11

When we've done this, SharePoint Designer automatically renders the XSLT for us (based on the XML File we chose, that contains our raw XML for the Search Results (which is also why we get the nice preview in SharePoint Designer))
searchresultsthree12

Now, that might not be the best layout to use for displaying the search results on a page.. So we will have to do some manual tweaking in order to get the presentation of this XSLT to fully fit our needs and demands.

Something that is important to note is how we can e.g. change the title to become a hyperlink that links to the acutal object by choosing the title-element and using the Quick Edit to change some properties. Note that I changed the title to a Hyperlink, which links to {url} that is part of the Search Result and also setting the title to {title} which also is an element in the Search Result.
searchresultsthree13

Do all your manual tweaking (either by customizing the XSLT from the source view, or as the previous picture illustrated) and continue to the next step.

Tip: You can of course add Sorting, Filtering and Grouping aswell by simply choosing it in the same dialog that we chose to change the layout..

Use the XSLT that was rendered by SharePoint Designer 2007 in the Search Core Results Web Part

Switch to Split View or Source View, and copy the entire <xsl:stylesheet> tag and all content.
searchresultsthree14

Now simply paste the generated XSLT into your Search Core Results WebPart's XML-section.

NOTE: If you can't see the entire Web Part and thereby not being able to access the edit-button, you can simply enter the querystring: ?contents=1 which will take you to the Web Part Maintenence Page for your site, where you can delete the webpart, and then add a new one as usual, and edit the XSLT of the new Search Core Results Web Part instead.

Publish the page, and behold your new presentation of the Search Results. Please note that I didn't make any heavy customizations to my XSLT and therefore it's rather steril, but you can make some major changes in the XSLT and in SharePoint Designer if you really want to customize the display of your Search Results.

This is how my presentation of the Search Results look like:
searchresultsthree15

I love feedback and comments :)

If you liked this article please leave a comment with feedback so I know that people read it, otherwise it's boring to write these step by step illustrated articles.

Cheers, and good weekend.

Published: Oct-28-07 | 11 Comments | 0 Links to this post

MOSS 2007: Customizing the Search Results Page (XSLT) - Part 2 - Add highlighting

Author: Tobias Zimmergren
Url: http://www.zimmergren.net

In one of my previous blogposts I wrote about how you easily could alter the XSLT of a the Search Core Results Web Part on your Search Results Page in order to achieve a customization to the presentation of the output.

In this article I will scratch on the surface of some more XSLT and show you how you can implement the HitHighligting Template in order to achieve colored/customized display of the search words you entered.

What is the HitHighligting Template?

Well, basically the HitHighligting template offers you the ability to highlight words that are used in your search. It offers you the possibility to highlight words in the following three result sections: Title, Url and Description (And that's basically all you need, mostly)

searchresultstwo1

Study the following XSLT, as per MSDN:

<hithighlightedsummary>
<c0>SharePoint</c0> <c1>namespace</c1> provides types and members that can be used for working with a <c0>SharePoint</c0> site <ddd /> a top-level <c2>class</c2> that represents a <c0>SharePoint</c0> site and provides access to its collection of subsites <ddd /> <c0>SharePoint</c0> <c1>namespace</c1> and a brief description of each.
</hithighlightedsummary>
<hithighlightedproperties>
<HHTitle>Microsoft.<c0>SharePoint</c0> <c1>Namespace</c1></HHTitle>
<HHUrl>http://msdn.microsoft.com/library/default.asp?url=/library/en- us/spptsdk/html/tsnsMicrosoft<c0>SharePoint</c0>_SV01017995.asp</HHUrl>
</hithighlightedproperties>

You may notice that the sections hithighlightedsummary, HHtitle and HHUrl elements contain childs (<c0>,<c1> etc). This basically means that for each instance of the words entered in your search, you get a set of highlight-tags that encloses that word. This is the default behaviour of the SharePoint Search. First word gets <c0>, second word gets <c1> and so on...

How do I add the Highlighting functionality?

Note: If you do not know how to access the XSLT of the Search Core Results Web Part, view my previous post on the subject.

In order to customize the presentation of the search result and make your words highlighted, you basically only need to add some tags to the XSL-template for each search word you want to highlight as you can see in the screenshot below.

Now locate the following section in your Search Core Results Web Part (It already exist):

<xsl:template name="Hithightlighting">

And since this template exists from the beginning, all you really have to do is to customize the style attribute and add a color property of the <b> tag (I replaced it with a <strong> tag instead, for sake of standards)
Then you can simply specify the styles for each highlighted word as picted in the following screenshot:

It's simple as that. I hope this helped some of you to get started on some basic Search Core Results XSLT customizations.

Published: Sep-01-07 | 4 Comments | 0 Links to this post

MOSS 2007: Customize the Search Result (using XSLT)

Author: Tobias Zimmergren
Url: http://www.zimmergren.net

Since people have been bugging me to get started with the blogging again, I guess I should just take their advice and get to it.

This blogpost will cover the basics of customizing your search results-page using XSLT.

I will in a later blogpost also show you how you can use SharePoint Designer as a tool to create the actual XSLT for you in combination with the DataViewer Web Part, and then how you can modify the created XSLT to match whatever specifications you've got in your designs.

I would recommend creating a new Search Page and Search Results Page to use, but for this little demo I'll just use the default search page and search results page.

Let's get started then..

First of, take a look at the search results page (the page you see when you've made a search):
customsearchresultsone1

From here, take the following actions:

Choose Site Actions -> Edit Page
Locate the "Search Core Results" web part, and choose "Edit" -> "Modify Shared WebPart"
Locate "Data View Properties" and choose the huge "XSL Editor..." button :)

You should now see something like this:
customsearchresultsone2

Now all you need to do (if you wish to use the existing properties) is to add your custom xhtml (I tend to say xhtml instead of html to mark the importance of web standards and cross-browser compatability).

I just added some style-attributes to the body div and the results template span-tag to mark my point. I did by no means put any energy into making this look nice. Please believe me ;)

And this is the final "stylish" outcome:
customsearchresultsone3

What have we accomplished today then? Well, nothing big at all. Just a little tip on how you can customize the Search Result presentation with minimum knowledge or efforts. I however will in one of my next blogposts let you in on a little tip on how to use SharePoint Designer and the Data View Web Part to create the custom XSLT for you fully automatically instead of customizing the existing XSLT with your own xhtml. That basically means that it's dead-easy to change the looks, layout and appearance of the search results in a much more extensive!

That's a wrap!
By the way; I love comments and try to answer them, feel free to add one while you're here :)

Published: Aug-23-07 | 2 Comments | 0 Links to this post