Sitecore 8 – Extending Experience Profile – Part 3 – Displaying Contact Facet Collection Property

How to display contact facet collection property

End result:

end-result-newsletter-tab

How to set this up

Source code link is available at the end of this post.

How to setup the custom contact facet

Similar to what we’ve done in the first post, the only difference here is that we are using collection property instead of simple properties.

 

The  updated TC.Sitecore.Analytics.Model.config file

note that we need to register our INewsletterElement as well in order for Sitecore to know which type to resolve during runtime.

An example of how the data is being stored in MongoDB

newslettersubscriptions-mongodb

 

How to setup the web API controller

The updated InitializeRoutes.cs

 

The updated CustomContactController.cs

 

The main reason why we are returning as a ResultSet object here is that the list control rendering expects the returned data in a specific JSON structure.

While going through this I thought of the performance implications if we have a lot of data where we should ideally implement pagination when querying against MongoDB. For this POC, this works fine as for newsletters typically the users won’t have thousands of records to be displayed .

An example on how to implement pagination will be provided in the next post.

 

How to setup a custom tab in Experience Profile

The content tree

newslettersubscriptionpanel-contenttree

Under the NewsletterSubscriptionPanel item you can that there’s NewsletterSubscriptions which based on ListControl template, under that we have the NewsletterName which is using the ColumnField template.

When we use the list control rendering, we can specify what columns are there in the list control and bind the value with a specific property name returned from the API

newslettername-columnfield

 

The full list of the renderings used

newslettersubscriptionpanel-layout

note that there’s “more” button assigned to the layout, but this didn’t actually being used. That’s for future improvements when we implement pagination.

 

Wire things together

As with the previous post, when the NewsletterSubscriptionPanel item is loaded we will trigger an API call to request the data to be displayed in the list control

The javascript file that’s responsible to do this is the newslettersubscriptions.js

 

An example of the API response

http://habitat.dev.local/sitecore/api/ao/v1/contacts/02b2e6c4-d38a-4e30-a18e-b4a31b63907d/newslettersubscriptions/?&pageNumber=1

newslettersubscriptions-webapi-call-request

note that it has to return the response in a specific JSON structure that the list control can consume.

 

Source code

Source code is available in Github

Leave a Reply

Your email address will not be published. Required fields are marked *