Creating a SPEAK application to list and sort products_Sitecore Cookbook for Developers-QQ阅读中文科幻网

上QQ阅读APP看书，第一时间看更新

Creating a SPEAK application to list and sort products

The traditional Sitecore applications were designed for developers and content authors. Sitecore Process Enablement & Accelerator Kit (SPEAK) UI is a third-generation framework introduced in Sitecore 7.2. There are many SPEAK applications in Sitecore such as dashboard pages, list pages, task pages, and others.

In this recipe, we are going to create a SPEAK application that will be helpful to content authors to see all products on one page and allow them to sort products based on different fields. The SPEAK 2.0 framework was released with Sitecore 8.1 but, as it is not stable and changes are expected in it, we will cover these SPEAK recipes in the 1.1 framework itself.

Getting ready

Creating or editing SPEAK applications is not supported in the Content Editor, so we will use the Sitecore Rocks plugin from Visual Studio to prepare this recipe. You can download this plugin from https://goo.gl/hHK6S9.

To list products, we will use the Products template that we have created in the previous recipes, which should have the Title, Company, Price, and Release Date fields.

How to do it…

We will first create a SPEAK application item:

Open Sitecore Rocks in Visual Studio and create a connection to the relevant website. Expand the core database. Under the /sitecore/client/Your Apps item, create a base folder, Cookbook, where we will create application pages.
In side the Cookbook folder, add a new ProductListing item using the /sitecore/client/Business Component Library/version 1/Templates/Branches/Applications/ListPage template (for Sitecore 8.1) and the /sitecore/client/Business Component Library/Templates/Branches/Applications/ListPage template for earlier versions. So, the item will get a preconfigured layout and rendering details from the standard values of the template.
Select the ProductListing item and press Ctrl + U (or right-click on it in the context menu, and select Tasks and Design Layout). This will open the layout presentation details, as shown in the following image:
View this created application in the browser with http://sitecorecookbook/sitecore/client/Your%20Apps/Cookbook/ProductListing, and you will find a blank page created with some basic components.
We will now create column definitions to show different fields of products. Create a ProductColumns folder under the ProductListing/PageSettings item. Under this folder item, create ColumnField items named Company, Product, and Price. Set relevant values in HeaderText, DataField, and SortField, and tick the Sortable field for all these items:
For the Product item, we will set a customized output so that we will not need to set DataField. Instead of this, we will use the HTMLTemplate field and assign a hyperlink by showing the Title field and passing the item ID in the query string. Clicking on this will open a new page to edit product details, which we will cover later in this chapter. In the HTMLTemplate field, we can get an item's field values using {{FIELDNAME}}, for example {{Title}}. However, you can't find item ID from item fields, so you must have an additional field ItemId in the Product template with standard values as $id so that every created product item will get its item ID assigned in the ItemId field, so we can use it in the HTML template as follows:

Note

Remember to add renderings of SPEAK version 1.1 only as we created SPEAK 1.1 application.
We will now add and configure ListControl in the presentation details. Select the ProductListing item, and open its layout in the Design mode. Add ListControl (the /sitecore/client/Business Component Library/Version 1/Layouts/Renderings/Lists and Grids/ListControl template) to the ApplicationContent.Main placeholder and set its ID as ListProducts.
Set its datasource as the ProductColumns item folder, which we created in step 4. This means that ListControl will show the columns that we created under the ProductColumns folder.
Preview the application in the browser, and you will see an empty grid, as shown in the following image. This is because we have not provided a data source yet (products list) to ListControl:
We will now configure datasource of ProductList to show product details. Add a SearchDataSource rendering to the Page.Body placeholder. Set its ID as ProductDataSource, Database field value as $context_contentdatabase, Language as en, and RootItemId as the root item of the Products page of the master database (/sitecore/Content/Home/Products).
However, this Products section contains products as well as product categories, so all these items will be fetched in this data source. However, we want to show only the products' list. So, we will make a filter here.
In the ProductListing/PageSettings item, add a SearchConfig item using the SearchConfig template. Set its Template field value to the item ID of the Product template of the master database, as shown in the following image. This means that this will filter items that have the Product template:
Now, select the SearchDataSource rendering. In its SearchConfigItemId field, set the value as the item ID of the SearchConfig item that we created before. This will filter the data source by the Product template.
Select the ListProducts rendering, and set its Items field to {Binding ProductDataSource.Items}. This will bind the items of ProductDataSource.
Preview the application in the browser, and you will see a list of products, as shown in the following image:
We will now apply sorting to the columns of the list. Set the ProductDataSource rendering's Sorting field to {Binding ListProducts.Sorting} so that sorting on any column of ListControl will bind the ProductDataSource again, based on the sorting applied.
Preview the page, and you will find that the sorting is working through the columns.

How it works…

You can see that we achieved the listing of products without using a physical layout file, unlike the XAML controls, and this is simpler and quicker. SPEAK applications are stored in core database, under /sitecore/client. By default, there is a folder called Your Apps where you can create your own applications. We created Cookbook folder inside it, where we created our custom application.

In step 4, we created three columns in the ProductColumns folder and set them as the datasource of ListControl so that ListControl will know that it should build columns based on the ColumnField items.

Here, we used the SearchDataSource component to retrieve Sitecore items from the defined root item and the SearchConfig item to filter items from the data source. If you check the View Source page, you will find that the datasource attributes are reflected there, which we defined in step 9. So, you will not see any product details in the Page Source as it is fetched later asynchronously using another request once the page is loaded:

Now, if you check the Network tab in the developer tools or Firebug, you will find a request being fired to the Item Web API as a result of the data source component being on the page, which will return the product details in the JSON format, as shown in the following image. Now, based on the JSON output, the data source is bound to ListControl asynchronously:

In the same way, while sorting, it will again request the Item Web API to retrieve the sorted data source based on the columns and bind this to ListControl.

SPEAK 1.1 provides many out-of-the-box components. In Sitecore 8.1, you can find them in /sitecore/client/Business Component Library/<version number> /Layouts/Renderings based on the SPEAK version number. In earlier Sitecore versions, renderings were available in /sitecore/client/Business Component Library/Layouts/Renderings.

In the next recipe, you will learn how to search and filter in order to extend our product listing page.