Displaying Custom Facets in the Contact Profile

In our previous post, we explained how to create custom facets and store them in xDB. In this post, we're going to show you how to display custom facets in experience profile.

Experience profile lets you monitor the behaviour of contacts that have interacted with the website. It allows you to search a specific contact, either via a name or email.

If you click on the contact, then you will be able to view the contact profile as shown in the image below. This is cool right?! However, you may find that it is not exactly perfect as Sitecore does not automatically display custom facets.

In order to to achieve this, custom code is required. Therefore, we're going to show you how to create a custom tab in the contact profile and display custom facets step by step.

Step 1 - Create custom facets

In our previous post, we had created a newsletter subscriptions facet and stored it in Sitecore xDB.

If you want to learn how to create custom facets, you can refer to our previous post here.

Step 2 - Create Web API for Retrieving the Facets by Contact ID

This is much like any other WebAPI that you will have created, and we would recommend applying access restrictions to the API for security reasons, you can apply Sitecore's existing security filter called AuthorizedReportingUserFilteruse, which is defined in Sitecore.Cintel.dll.

Once you have completed the implementation of your API, the next step is to register the API in route.

Step 3 - Create SPEAK Script

The SPEAK script will call our API, so firstly, we're going to create a folder called "Subscriptions" under /sitecore/shell/client/Applications/ExperienceProfile/Contact/Subsriptions.

Next, we then add subscriptionsTab.js and subscriptionsTab.css under the folder (as shown as below).

Associate the created CSS in the core database.

You will need to add style item in core database and point at the css file. The defined css will be loaded automatically when the contact profile page is loading.

Associate the created JavaScript in core database.

In this step, we've created a new custom tab, called "SubscriptionPanel" and PageCodeScriptFileName is where you should associate with the JavaScript that we have just created above.

In order to verify that what you've done so far is correct, check that the new custom tab "Subscription" exists, and that both subscriptionsTab.js and subscriptionsTab.css are loaded after contact profile page is loaded.

The next step is to write a script for retrieving the data via the custom API you created above. Sitecore use SPEAK as a framework for developing Sitecore application with a consistent interface. The syntax is very simple to follow and extend.

Step 4 - Binding JSON Object to the Controller on the Custom Tab

The last step is to display the Json data on the custom tab.

In the code snippet, you will find this code cintelUtil.setText($that.WhatsOnValue, jsondata.WhatsOn, true);. This sets TextBox "WhatsOnValue" within the controller, so it contains the JSON value. Then, the next question is how to define the "WhatsOnValue" textbox in Sitecore? Don't fret, we will show you how this can be done!

Add text rendering (Note: because we're using SPEAK 1.1 framework, we will have to select the text rendering under SPEAK 1-1).

Set the ID to "WhatsOnValue", this is the ID where the cintelUtil.setTextto function is referring.

Congratulations!! You've done all the code and configuration. Now let's check out the result, rhe "subscriptions" tab should display in the contact profile page as well as the custom facets associating with the contact.

We hope that you found this post is useful and enjoyed the article.

— Zhen Yuan - June 2017