Search component UI – Fast and the furious.

To implement a search UI quickly, we can use the content editor web part to generate the UI. After you get the UI on track, how do you get the search working.

1. Add the search core results web part to the page.

2. Configure the search core results web part:

1. a) Set the number of results to display.
3. b) Set the selected columns that you want to display. These columns are basically managed properties which can be changed/added in the shared service provider. Once you add the columns that you want, they can be rendered using the XSL for the search results web part.
5. c). Set the Cross-Web Part Query ID property to “User Query”. This value tells the web part to pick up the search criteria from the query string.

d) Change the XSL, so that it renders the results as you require. I have mentioned an easy way of generating the XSL at the end of this blog.

The search results web part works on query string parameters.

1. The parameter “K”: This parameter can be used to specify keyword or any other managed properties that you want to include and search for. For example: if you have a managed property called “StoreLocation”, then you include the following in the value of the K parameter. http://server/pages/default.aspx?k=StoreLocation:Illinois

You could add the keywords to the K parameter in addition to any managed property.

Now that you know what the search results web part expects, all we have to do is to write a small javascript in our Content Editor Web Part which will gather the values from all the controls and generate this query string. Once this query string is generated, add the following statement to the end of the javascript, window.location = window.location.pathname + strGeneratedQueryString;

This will redirect to the same page with the correct parameters and the search results will come up.

Revolutionize Your Business With Generative AI

From product design and software development to virtual agents, content creation, and reporting, GenAI is transforming business. Our AI experts help you unlock GenAI’s full potential and drive growth.

Let’s Get Started

You could add another button to clear the search results, all you have to do on the click event of the button is to clear the query string and redirect to the same page.

window.location = window.location.pathname;

* You will have to write some additional script to make sure the controls in the Content Editor Web Part retain the values that the user has searched for.

XSL Generation:

I learnt this technique from one of Patrick Tisseghem’s books.

1. Edit the XSL from the search core results web part.

2. At the end of XSL, where you find a match for the root element (“/”), add the following statement : <xsl:copy-of select=”*”/>

3. Save and let the search component render.

4. Right click on the page and hit View Source.

5. Locate the XML that is generated by the search results web part.

5. Save this XML as results.XML ( File name is irrelevant)

6. Open Sharepoint Designer, and open any aspx page that you could use for your temporary work.

7. In the data source library, add a new data source for XML. Import the results.xml.

8. Now drop a Data View web part, and drag and drop the columns from the xml data source that we just defined.

9. You can now edit the xsl as you would for any data view web part. Add grouping, sorting etc.

10. Once your done, go to the source view and copy the XSL style sheet element from the data view web part and paste it in your search results web part xsl editor window.

Now you have a brand new rendering of the search results.