How to Implement Search Functionality with Sitecore SPEAK

SPEAK Introduction

Sitecore SPEAK is a new UI framework to develop custom rich web applications where this technology allows a new canvas for application development, replacing complete UI which designed to edit applications using a variety of content types easily and data tracking tools and visualizations.

SPEAK Search Functionality

This post will explains the steps that need to be followed to implement a search functionality with custom data source. Here, we will create a custom component called Order Search and place it in Sitecore Client and allows to display orders inside the Sitecore UI base on the search criteria (In this blog post, the result would filter based on the title field from the ORDERTABLE).

• First, navigate to Sitecore Client node → Your Apps and create a folder called OrderSearch

• Right click the OrderSearch folder and Add → New Item and create an item called OrderSearch of the type Speak-ListPage

• Click OK and change the browser title of the new item to OrderSearch

• Navigate to sitecore → shell → client in Solution Explorer and create new folder as YourApps and under that create another folder called OrderSearch to group SPEAK components (This is not a must users can arrange the components as they desire).

• Add a new Speak Component to the OrderSearch folder by Right click on it Add → New Item

• Expand sitecore, click Speak and select SPEAK Component and Name it as OrderSearch

• Click Add and you will be asking to create a sitecore Item which should be located inside the OrderSearch Speak-ListPage Item in Sitecore → Client → Your Apps → OrderSearch

• Other than the above item, Sitecore will create OrderSearch.cshtml and OrderSearch.js in sitecore → shell → client → YourApps → OrderSearch folder and in the same folder create a new controller class and name it as OrderController

• OrderController.cs would looks like as below, there we created a simple action called Find which reads an input value, perform database search and returns Json object as the result.

	using Sitecore.Web;
	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Web;
	using System.Web.Mvc;
	namespace be.absi.kbs.web.sitecore.shell.client.YourApps.OrderSearch
	{
	public class OrderController : Controller
	{
	public class Order
	{
	public string Title { get; set; }
	public string PubID { get; set; }
	}
	public JsonResult Find()
	{
	var input = WebUtil.GetFormValue("input");
	var orders = new List<Order>();
	System.Data.SqlClient.SqlConnection conn = null;
	try
	{
	conn = new System.Data.SqlClient.SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings[0].ConnectionString);
	conn.Open();
	using (System.Data.SqlClient.SqlCommand cmd = new System.Data.SqlClient.SqlCommand())
	{
	cmd.Connection = conn;
	cmd.CommandType = System.Data.CommandType.Text;
	cmd.CommandText = "SELECT [title],[pubid] FROM ORDERTABLE WHERE [title] like '%" + input + "%'";
	using (System.Data.IDataReader dataReader = cmd.ExecuteReader())
	{
	while (dataReader.Read())
	{
	orders.Add(new Order()
	{
	PubID = dataReader.GetString(dataReader.GetOrdinal("pubid")),
	Title = dataReader.GetString(dataReader.GetOrdinal("title")),
	});
	}
	}
	}
	}
	catch (Exception ex)
	{
	throw ex;
	}
	return Json(orders);
	}
	}
	}

view rawOrderController.cs hosted with ❤ by GitHub

• Open the OrderSearch.cshtml file and declare the input parameter and bind our data (using KnockoutJS) to UI by adding the following markup as below.

	@using Sitecore.Mvc
	@using Sitecore.Mvc.Presentation
	@using Sitecore.Web.UI.Controls.Common.UserControls
	@model RenderingModel
	@{
	var rendering = Html.Sitecore().Controls().GetUserControl(Model.Rendering);
	rendering.Class = "sc-OrderSearch";
	rendering.Requires.Script("client", "OrderSearch.js");
	rendering.GetString("input", "input");
	var htmlAttributes = rendering.HtmlAttributes;
	}
	<div @htmlAttributes>
	<table class="table table-hover">
	<thead>
	<tr>
	<th>Title</th>
	<th>Publication ID</th>
	</tr>
	</thead>
	<tbody data-bind="foreach: output">
	<tr>
	<td data-bind="text: Title"></td>
	<td data-bind="text: PubID"></td>
	</tr>
	</tbody>
	</table>
	</div>

view rawOrderSearch.cshtml hosted with ❤ by GitHub

• Now we need to declare our input and output parameters in OrderSearch.js to make the API call.

	define(["sitecore"], function (Sitecore) {
	var model = Sitecore.Definitions.Models.ControlModel.extend({
	initialize: function (options) {
	this._super();
	this.set("input", "");
	this.set("output", "");
	this.on("change:input", this.orders, this);
	},
	orders: function () {
	var input = this.get("input");
	$.ajax({
	url: "/api/sitecore/Order/Find",
	type: "POST",
	data: { input: input },
	context: this,
	success: function (data) {
	this.set("output", data);
	}
	});
	}
	});
	var view = Sitecore.Definitions.Views.ControlView.extend({
	initialize: function (options) {
	this._super();
	}
	});
	Sitecore.Factories.createComponent("OrderSearch", model, view, ".sc-OrderSearch");
	});

view rawOrderSearch.js hosted with ❤ by GitHub

• In Sitecore Explorer, right click on OrderSearch Speak-ListPage Add → PageSettings to create a Page Settings and Drag and drop the OrderSearch item to it, if it is not created automatically.

• Then select the OrderSearch item in OrderSearch → PageSettings → OrderSearch and right click on OrderSearch Sitecore item Add → New Item and create a new template and call it as OrderSearch-Parameters.

• Right click on the OrderSearch-Parameters.template and select Set Base Templates and check ComponetBase template and click OK.

• Then add two parameters under Data as Input and Output as shown below

• Double click on OrderSearch Sitecore item and browse the OrderSearch-Parameters.template to Parameters Template section

• Right click on OrderSearch Sitecore item then select Tasks → Design Layout and add two new renderings, TextBox and OrderSearch by clicking Add Rendering on OrderSearch.layout and if required browse the Layout to /sitecore/client/Speak/Layouts/Layouts/Speak-Layout

• Then double click on the OrderSearch Rendering item and set the Value of Data → Input to {Binding TextBox1. Text} to get the input value for search criteria.

• Final Output of the Search Functionality would be as follows

• You can access the page by typing http://< HOST-NAME a>/sitecore/client/< ITEM-PATH > in the web browser

Conclusion

The aim of this blog post is to provide a simple guidance step by step to implement a search functionality with sitecore SPEAK. It’s been described how we can create and configure the sitecore item with parameters, retrieve data from a custom data source which returns the result in JSON format and bind those retrieved values with KnockoutJS to display on the web browser. The approach that we used has more control as we used to define our main business logic (Find()) in a controller (OrderController).