Sitecore Email Experience Manager (EXM), Importing Contacts and Custom Facets – Part 4

In Sitecore Email Experience Manager (EXM), Importing Contacts and Custom Facets – Part 1, I showed you how you can import contacts from a CSV file into a list in Sitecore. In Sitecore Email Experience Manager (EXM), Importing Contacts and Custom Facets – Part 2, I showed you how you can add to the list of out of the box supported fields when importing contacts into Sitecore. In Sitecore Email Experience Manager (EXM), Importing Contacts and Custom Facets – Part 3, I showed you how you can create your own custom facets and populate them for your contacts as you import them. If you haven’t already read them, head over and read them first.

In Sitecore Email Experience Manager (EXM), Importing Contacts and Custom Facets – Part 4, I’m now going to demonstrate how you can update the Experience Profile for a Contact by Add a new Tab into the User Interface and displaying your Custom Facet information.

Experience Profile Express Tab

Instead of developing all of this code from scratch, we’re going to use a package available in NuGet specifically written for this purpose. No point reinventing the wheel when someone else has already done all the hard work for you.

Experience Profile Express Tab is a package developed to streamline the creation of new tabs in the Experience Profile.

The first step we’ll take is to add the EPExpressTab to our project using NuGet. This will install two packages. EPExpressTab.Core and EXExpressTab. At the time of writing, version 2.0.2 was the latest released version.

To use EP Express Tab, we need to do the following:

  • Create a custom ViewModel that will represent the custom data we wish to display in the Experience Profile Tab
  • Create a custom EPExpressViewModel that will act as a Controller of sorts that will be called by EPExpressTab to populate our custom View Model and pass it to our view
  • Create a View to render the content for out custom tab in Experience Profile

First, let’s create our custom view model. In this example, this will contain just the new Employee fields the same as out custom Facet. Nothing special here. It’s just a standard class to hold our view model.

using System;

namespace Aceik.Feature.EXM.Models
{
    public class EmployeeViewModel
    {
        public string EmployeeId { get; set; }
        public string Department { get; set; }
        public DateTime? StartDate { get; set; }
        public string EmployeeType { get; set; }
    }
}

Next we need to create our EPExpressTab “Controller” class. This class is called by EPExpressTab and is used to generate the instance of our view model and pass it to the view.

using EPExpressTab.Data;
using EPExpressTab.Repositories;
using System;

namespace Aceik.Feature.EXM.Models
{
    public class EPCustomModel : EpExpressViewModel
    {
        public override string TabLabel => "Employee";
        public override string Heading => "Employee Details";

        public override object GetModel(Guid contactId)
        {
            Sitecore.XConnect.Contact model = EPRepository.GetContact(contactId, new string[] { EmployeeInfo.DefaultFacetKey });

            var employeeInfo = model.GetFacet<EmployeeInfo>();

            return new EmployeeViewModel
            {
                EmployeeId = employeeInfo?.EmployeeId,
                Department = employeeInfo?.Department,
                StartDate = employeeInfo?.StartDate,
                EmployeeType = employeeInfo?.EmployeeType
            };
        }

        public override string GetFullViewPath(object model)
        {
            return "/views/Aceik/Feature/EXM/Employee.cshtml";
        }
    }
}

The GetModel method is the action that is called to create the view model instance that will be passed to the view.

The GetFullViewPath method is as described. The method to get the path to the view.

The view itself it pretty straight forward with some inline styles defined, and the html tags etc to render the required custom data.

@model Aceik.Feature.EXM.Models.EmployeeViewModel
<style>
    .employee-border {
        padding-top: 10px !important;
        float: left;
        width: 100%;
    }

    .employee-text {
        display: block;
        float: left;
        width: 150px;
        color: #707070;
        clear: both;
    }

    .employee-value {
        clear: unset;
        padding-left: 95px;
        width: calc(100% - 150px);
        color: #121212;
    }
</style>
<div class="row">
    <div class="col-md-6">
        <span class="sc-text sc-text-value">Employee</span>
        <div class="sc-border employee-border">
            <span class="sc-text employee-text">Employee Id</span>
            <span class="sc-text employee-text employee-value">@Model.EmployeeId</span>
        </div>
        <div class="sc-border employee-border">
            <span class="sc-text employee-text">Department</span>
            <span class="sc-text employee-text employee-value">@Model.Department</span>
        </div>
        <div class="sc-border employee-border">
            <span class="sc-text employee-text">Start Date</span>
            <span class="sc-text employee-text employee-value">
                @if (Model.StartDate.HasValue)
                {
                    @Model.StartDate.Value.ToLocalTime().ToString("dd/MM/yyyy")
                }
            </span>
        </div>
        <div class="sc-border employee-border">
            <span class="sc-text employee-text">Employee Type</span>
            <span class="sc-text employee-text employee-value">@Model.EmployeeType</span>
        </div>
    </div>
</div>

Once this is deployed, along with the added EpExpressTab.config file that is added to the project with the inclusion of the NuGet package, you can now view the “Employee” tab in the Experience Profile that now shows the custom EmployeeInfo Facet data.

So you can examine the solution for yourself, please see below a link to the zip file containing the full Visual Studio solution, CSV files and a Sitecore package for the Import Map configuration items.

AceikEXM.zip

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: