Custom Search Results in KnowledgeLake Imaging for SharePoint - Part 3

by Scosby Friday, December 10, 2010

Introduction

This post uses Imaging for SharePoint version 4.1 and requires the SDK. Contact KnowledgeLake to learn more about Imaging for SharePoint or the SDK. Contact KnowledgeLake Support to obtain the latest SDK if your company already has a license.

This post will demonstrate how to create a Silverlight Search Results control in a SharePoint Solution. This post will use the DataGrid control available in Microsoft’s Silverlight Control Toolkit. When doing any development work, one should always test in a staging/testing environment before going live to a production server. Class files are available for download at the end of the post.

The User Control

The project will use the Silverlight Toolkit’s DataGrid for displaying our Search Results to the end user. Add a new user control to the KLSearchExtensions project, and name it CustomQueryReults. This name should be used exactly as shown otherwise KnowledgeLake Imaging for SharePoint will not recognize the user’s custom control.

XAML

<UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"

             x:Class="KLSearchExtensions.CustomQueryResults"

             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

             xmlns:viewModel="clr-namespace:KLSearchExtensions.ViewModel"

             xmlns:controlsToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"

             mc:Ignorable="d"

             d:DesignHeight="480"

             d:DesignWidth="640">

    <UserControl.DataContext>

        <viewModel:CustomQueryResultsViewModel x:Name="Model"

                                               PropertyChanged="Model_PropertyChanged" />

    </UserControl.DataContext>

    <Grid x:Name="LayoutRoot">

        <controlsToolkit:BusyIndicator IsBusy="{Binding IsBusy}">

            <sdk:DataGrid x:Name="dataGrid"

                          AutoGenerateColumns="False"

                          HorizontalAlignment="Stretch"

                          VerticalAlignment="Stretch"

                          Margin="4" />

        </controlsToolkit:BusyIndicator>

    </Grid>

</UserControl>

 

DataContext

The User Control’s data context is an instance of our ViewModel. In XAML, the User Control should look similar to the following, where the XML namespace viewModel points to your ViewModel’s project namespace (in this case it is KLSearchExtensions.ViewModel):

LayoutRoot

The User Control’s root element is a Grid. Add the Silverlight Toolkit’s BusyIndicator to the Grid. The BusyIndicator control hosts the actual content of our control, but allows the user to display an information message during loading or searching. Add the Silverlight Toolkit’s DataGrid to the BusyIndicator control. Be sure to set the AutoGenerateColumns property to false, the Search Results will be dynamically built for the user to bind to the grid.

Code Behind

A Strongly Typed ViewModel

The user will benefit from creating a convenience property to get an instance of the ViewModel from the User Control. Create a new private property named TypedModel. This property will encapsulate a strongly typed instance of the ViewModel for our User Control. In other words, the property returns the User Control’s DataContext property as an instance of our ViewModel. The code should look like the following:

 

Strongly Typed ViewModel Code Sample

        private CustomQueryResultsViewModel TypedModel

        {

            get

            {

                return this.DataContext as CustomQueryResultsViewModel;

            }

        }

IQueryResults Interface

Implement the IQueryResults interface from the namespace KnowledgeLake.Silverlight.Search.Contracts. After implementing the interface, the Error event will be defined. This event is raised by KnowledgeLake Imaging for SharePoint when an error occurs during the loading of the Search Result extension. The user should not raise this event, but the user can handle this event. It is important to note, since this is a Silverlight application the user will have to log to IsolatedStorage on the client’s machine or call a webservice to record the error. However, handling this error is beyond the scope of this post.

 

The IQueryResults interface members OpenExecuteSearch (method) and Query (property) will be implemented as wrappers around the User Control’s ViewModel members. The ExecuteQueryStringSearch method is beyond the scope of this post and will not be implemented. The interface members’ implementations should look similar to the following:

 

IQueryResults Interface Code Sample

        public event EventHandler<KnowledgeLake.Silverlight.EventArgs<Exception>> Error;

 

        public void ExecuteQueryStringSearch()

        {

            throw new NotImplementedException();

        }

 

        public void OpenExecuteSearch(string keywords)

        {

            this.GetTypedModel().OpenExecuteSearch(keywords);

        }

 

        public string Query

        {

            get { return this.GetTypedModel().Query; }

            set { this.GetTypedModel().Query = value; }

        }

ViewModel PropertyChanged Event

The PropertyChanged event is declared in the User Control’s XAML and wired up to an event handler called Model_PropertyChanged, this handler must respond to the Query and SearchResultSource properties. The method should look like the following:

ViewModel Property Changed Code Sample

        private void Model_PropertyChanged(object sender, PropertyChangedEventArgs e)

        {

            var model = sender as CustomQueryResultsViewModel;

 

            switch (e.PropertyName.ToUpperInvariant())

            {

                case "QUERY":

                    model.ExecuteQuery();

                    break;

 

                case "SEARCHRESULTSOURCE":

                    this.RenderResults(model.SearchResultSource);

                    break;

 

                case "MESSAGE":

                    this.DisplayMessage(model.Message);

                    break;

            }

        }

Displaying Search Results

Create a method called RenderResults which takes a parameter of type SearchResultSource. This method will render the search results into the DataGrid. If the user has added or removed columns to the query since it was last executed, the UpdateColumns property will evaluate to true. In this scenario, it is necessary to clear the grid of all columns and rebuild the grid.

 

The SearchResultSource.ViewColumns items are all represented as a property of each item in the SearchResultSource.Results collection. The SearchResultSource.Results property is dynamically built to contain the corresponding ViewColumn’s value when bound to the DataGrid.ItemsSource property. In other words, these are the rows of the grid with the column values included.

 

Displaying Search Results Code Sample

        private void RenderResults(SearchResultSource result)

        {

            if (result.ViewColumns != null)

            {

                if (result.UpdateColumns) //user changed result columns on the query builder

                {

                    this.dataGrid.Columns.Clear();

 

                    foreach (ViewColumn column in result.ViewColumns)

                    {

                        var item = new DataGridTextColumn();

                        item.IsReadOnly = true;

                        item.Header = column.FriendlyName;

                        item.Binding = new Binding(column.InternalName);

 

                        this.dataGrid.Columns.Add(item);

                    }

                }

 

                this.dataGrid.ItemsSource = result.Results;

            }

        }

 

If the end user added or removed columns to the query, the method clears the grid’s columns and rebuilds them from the SearchResultSource.ViewColumns collection. As the user iterates the ViewColumns collection, be sure to create a new Binding for the column using the ViewColumn.InternalName property. This binding enables the grid to display the appropriate column value for each item in the SearchResultSource.Results collection. This is powerful functionality provided by KnowledgeLake Imaging for SharePoint. Essentially, the user does not need to worry about what columns the user chose to include in the query and how to bind those columns to the Search Results.

 

 

 

 

Download Files: CustomQueryResults.zip

Blog Posts In This Series

View full size...

Finished Custom Control

Tags: , , , ,

IT | Programming

blog comments powered by Disqus