View the contact's orders in the Sitecore Experience profile using SPEAK
In this blog I want to show how to extend the Sitecore Experience Profile with the placed orders of a specific contact. One of our requirements was to create a customer view where all data is accessible from one place.
Experience profile
Onze technische blogs zijn in het Engels. Dit doen wij omdat wij menen dat technische kennis van Sitecore en Sitefinity grensoverschrijdend moet zijn. Wij leren veel van buitenlandse developers, wij delen onze kennis ook graag met hen. Mochten er in de code fouten zitten of punten ter verbetering, dan gaan we graag het gesprek aan.
Introduction
In this blog I want to show how to extend the Sitecore Experience Profile with the placed orders of a specific contact. One of our requirements was to create a customer view where all data is accessible from one place. Since Sitecore 7.5 the Experience Profile was added to the platform.
For this blog I have used Sitecore 8.1 revision 151207 (update 1). You can download the sources and item package for this blog from Suneco on Github and it will work on a clean installation. For development with SPEAK I would recommend using Sitecore Rocks.
Requirements
The requirements for this blog are as follows:
All contact data should be accessible in one place
The orders of the contact are stored in an external Ecommerce solution and need to be integrated with the Experience Profile (xFile)
Create a custom tab in the Experience Profile and show the list of orders related to the customer
When an order is clicked, a dialog needs to popup showing the order details, including the order lines and product details
The approach
To achieve this solution the following steps need be taken:
Create a web service to provide the required data to the Experience Profile application
Create the user interface to show the order overview and the order details
The web service
To have access to the orders of a customer a web service needs to be created. This web service can be configured as a pipeline in the “ExperienceProfileContactViews” group of het pipelines section in the configuration of Sitecore. The name of the pipeline corresponds will be used.
You can access this pipeline using the following url:
~/sitecore/api/ao/v1/contacts/[ContactId]/intel/get-orders-data?&pageNumber;=1
This URL contains the contact identifier ([ContactId], a unique identifier) and the name of the pipeline (“get-orders-data”) to execute.
The processor where the configuration is pointing to is a custom pipeline which derives from “Sitecore.Cintel.Reporting.Processors.ReportProcessorBase” of the “Sitecore.Cintel” assembly. If you implement the process method you will get access to the current visitor id by receiving the report parameters (args.ReportParameters.ContactId).
With this identifier you should be able to get the orders for this specific contact. In this part you should make a connection to your Ecommerce platform, but in this example I get a static order list from code.
After retrieving the order list you need to transform this data into a “System.Data.DataTable”. First identify your result columns and then add the content fields to this data table. For an implementation, check out the “GetOrderData” processor in the sources.
At the end, update the “args.ResultSet.Data.Dataset[args.ReportParameters.ViewName]” with the filled data table. If you have done it correctly the resulting Json of the processor will look like the following screenshot:
The Userinterface
How to start with Speak
The first thing to know is where to start with Speak. In Visual Studio use Sitecore Rocks to open the Sitecore Explorer and navigate to the Tabs folder of the Experience Profile application in the Core database (path: sitecore/client/Applications/ExperienceProfile/Contact/PageSettings/Tabs)
Implement the orders overview
Add the Orders Tab
Create a new Item based on the “Tab” template and change the display name to “Orders”.
Add the OrderPanel Tab
Under this order tab, create a new Item with the name “OrderPanel” based on the “Tab” template.
Apply the layout to the Orders tab
To provide a lazy loading mechanism to load the order overview, add a “LoadOnDemandPanel” control. Bind this rendering to the OrderPanel tab, using the database property (set to Core database) and the ItemId property (set to the OrderPanel tab ID). The progress indicator can be set up to show any progress activity when the load on demand panel is busy.
Apply the layout to the OrdersPanel tab
On this tab set the layout (“Speak-EmptyLayout”) and add a GenericDataProvider (set it’s ID to OrdersProvider) and a ListControl (set it’s databinding to “{Binding OrdersProvider.cidata}”). Then add a SubPageCode rendering the tab and point it to a javascript file on disk.
After setting up the presentation the last step is to bind the results of the web service to the List Control. For this you can use the following script:
This script initializes the data provider (the name of the provider must match the ID of the “GenericDataProvider” on the OrdersPanel) and gets the data from the website. The list control automatically binds the data to the results of the web service.
Implement the order detail dialog
The next step is to extend the order overview with a mechanism that pops up a dialog containing the order details.
Add the Orders Detail Dialog
Create a new item, based on the “Speak-TaskPane” layout and give this item the name “OrderDetailDialog”. Remember the ID of this item.
Place the DialogWindow control
On the OrdersPanel tab:
Add a DialogWindow control (id: OrderDialogWindow)
Add a LoadOnDemandPanel (id: OrderDialogLoadOnDemandPanel, database: core, ItemId: Id of the OrderDetailDialog)
In the JavaScript for the OrdersPanel tab extend the existing JavaScript with the behavior that will open the popup and pass the order object to the dialog.
Apply the Order Detail Dialog layout
On the Order detail tab the following controls needs to be added to the layout:
Set the layout (use “Speak-EmptyLayout”)
A border and text renderings for Order number
A border and text renderings for Order date
A List control for the Order lines overview
The logic behind the popup will act exactly the same as on the OrdersPanel tab.
You also need to provide the implementation for the order lines List Control. Check the example on GitHub to data bind a list control for the order lines.
Finally, when the dialog is configured correctly, the popup will appear like the following screenshot:
Conclusion
It is not very difficult to extend the Experience profile of Sitecore. You just have to implement some web services and create some views in SPEAK. The only thing you need to know is where to start. Then just do it!
Resources
For this blog I have used the following resources:
https://doc.sitecore.net/speak
https://www.sitecore.net/da-dk/learn/blogs/technical-blogs/getting-to-know-sitecore/posts/2014/09/using-custom-contact-data-part-1-experience-profile.aspx