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.

Follow me

Tobias Zimmergren

Founder / Consultant / Advisor at TOZIT AB
Tobias Zimmergren delivers high-quality articles about business and technology around the Microsoft scene.

Tobias focuses on advisory and consultancy for the Office 365 and SharePoint offerings from Microsoft.
Follow me
  • Aniruddha Biswas

    Excellent!!!

    • http://www.zimmergren.net/ Tobias Zimmergren

      Thank you Aniruddha

  • http://twitter.com/Alexandros_IV Alejandro Fadil

    HI Tobias, great post!!

    One question, is this posible to do in SP2010? to create the xslt using the visual options from SPD2010.
    I have tried but i cant find an option to import the xml to create the DVWP on with that result data.

    is there another way to achive something similar (to create XSLT with no knowledge of it)

    Thanks

    • http://www.zimmergren.net/ Tobias Zimmergren

      Alejandro, see the comment from Sushi above. He’s done it in SharePoint 2010.

      Cheers,
      Tobias.

      • Kris Harvey

        Great post. Is there a way that I can make the columns sortable?

        • http://www.zimmergren.net/ Tobias Zimmergren

          Kris, I haven’t been working with MOSS 2007 for many years now (Currently on SP 2013) so I wouldn’t dare to say how you’d do that from the top off my head. But everything is possible :-)

  • Sushi

    I did it in SP2010 it worked
    Thanks a Lot

    • http://www.zimmergren.net/ Tobias Zimmergren

      I’m glad to hear it.
      Cheers.

  • Saksham1503

    a very detailed and step by step procedure. Great Job!!

    • http://www.zimmergren.net/ Tobias Zimmergren

      Thanks.

  • Tudor

    I am trying this in SharePoint 2010 where I am using a Core Search Results Web Part but when I change the XSL to the one you provide I am not getting an XML output in the search results. What I get is like this:

    1 1481 100000000 System Account System Account 0 http://server:port/teams/dps/Lists/Task List/DispForm.aspx?ID=1……… and it just goes on for a while, not sure what to do, any ideas?

    • tudor

      Nevermind, figured it out, I was missing a tag in the copy, thanks for the great tutorial!!!

      • http://www.zimmergren.net/ Tobias Zimmergren

        Fantastic. Thanks for the updated comment!
        / Tobias.

  • fsdf

    Thank you sir. u made it somple

    • http://www.zimmergren.net/ Tobias Zimmergren

      Cheers

  • Hajira

    thanks alot…………

  • Karki

    Works great!! Thank you for the post!!!

  • Pingback: Resources for SharePoint Search Results Customization | Lionadi's Tunking Blog :)

  • Kris

    Nice post. I’m having an issue though. I can only see 10 results max. How can I setup the paging for my search results?