Software Product Docs

How to: Show Customer Satisfaction in Analyst Portal

When an Incident or Service request was resolved the customer has the possibility to rate the handling of the request, e.g. with a 5 Star rating and a Satisfaction comment.

This data is stored in the Customer satisfaction class extension of Incident or Service request:
* System.WorkItem.Incident.CustomerSatisfaction.Extension
* System.WorkItem.ServiceRequest.CustomerSatisfaction.Extension

The class extension consists of 2 properties:
* CustomerSatisfaction : Int32
* CustomerSatisfactionComment : String

This guide will explain to you how you can display this data in the Analyst portal in a new tab of the Incident or Service request Form.

Create Tab

First we will create the custom tab that will later be included into the Form.
The following Example shows how to create the customer satisfaction tab for Incidents.

  1. Create the following File: itsmportalv3\Areas\Analyst\Views\Forms\WI_Incident\WI_Incident_CustomerSatisfactionTab.cshtml
  2. Paste the following code in your file: 
<div class="tab-pane" id="satisfaction">
    <div class="card-block collapse-card" itx-disableall="formContext.Status.EnumName != 'IncidentStatusEnum.Resolved' && formContext.Status.EnumName != 'IncidentStatusEnum.Closed'">
        <div class="header"><a href="#" class="heading pull-left"><span ng-bind="formContext.CustomerSatisfaction.DisplayName"></span></a><a href="#" class="arrow-collapse-btn pull-right"><i class="icon-dropdown_up"></i></a></div>
        <div class="collapse-content">
            <div class="form-group">
                <div class="row">
                        <itx-stringcontrol property="CustomerSatisfaction" columns-span="4" required="false" read-only="true"/>
                </div>
            </div>
                <form role="form">
                <div class="form-group">
                    <div class="row">
                        <itx-stringcontrol property="CustomerSatisfactionComment" columns-span="12" required="false" read-only="true" multiline="true"></itx-stringcontrol>
                    </div>
              </div>                                
            </form>
        </div>
    </div>
</div>
  1. Save the file.

Now that you have created the new Tab you need to refer to it in the default Form of your WorkItem.
The following Example shows how to add the Tab to the default Incident request Form.

  1. Create a copy of the file itsmportalv3\Areas\Analyst\Views\Forms\WI_Incident\WI_Incident_DefaultForm.cshtml
  2. Name the new file WI_Incident_DefaultForm_custom.cshtml
  3. Open The new file
  4. In the emo_tabs section, add the following line which will add the corresponding Tab-button 
<itx-tab header="<span ng-bind='formContext.CustomerSatisfaction.DisplayName'></span>" id="satisfaction" />
  1. At the end of the document, add the following line to tell the webapplication to load the previously created Tab file: 
@await Html.PartialAsync("WI_Incident/WI_Incident_CustomerSatisfactionTab")
  1. Save changes and check results in the portal

Your custom default form should look like the following example: 

@using itnetX.ITSMPortal.Models.Forms
@using itnetX.ITSMPortal.Models.EMO;
@using itnetX.ITSMPortal.Shared.EMO;
@using itnetX.ITSMPortal.Models.MVC;
@model FormModel
@{
    ViewBag.Title = Model.FormName;
    Layout = Model.Layout;
    Model.CSSClass = "incident-block";
    Model.Disabled = "formContext.Status.EnumName == 'IncidentStatusEnum.Closed'";
}
@section emo_tabs{
    <itx-formtabs>
        <itx-tab header="@GlobalLocalizer["GeneralTab"]" id="general" />
        <itx-tab header="@GlobalLocalizer["ActivitiesTab"]" id="activities" />
        <itx-tab header="@GlobalLocalizer["ChildIncidents"]" id="childincidents" ng-if="formContext.IsParent.Value == true" />
        <itx-tab header="@GlobalLocalizer["ResolutionTab"]" id="resolution" />
        <itx-tab header="<span ng-bind='formContext.CustomerSatisfaction.DisplayName'></span>" id="satisfaction" />
        <itx-tab header="@GlobalLocalizer["SLATab"]" id="slainfo" />
        <itx-tab header="@GlobalLocalizer["RelatedItemsTab"]" id="relateditems" />
        <itx-tab header="@GlobalLocalizer["HistoryTab"]" id="history" />
    </itx-formtabs>
}
@section emo_header{
    <div class="col-sm-3" itx-events-workitems>
        <ul class="list-unstyled">
            <li><b ng-bind="formContext.Status.DisplayName"></b><span><i itx-statusicon="formContext.Status"></i><span ng-bind="formContext.Status.Value"></span></span></li>
            <li><b><i class="icon-assign"></i></b><span ng-bind="formContext.AssignedUser.DisplayName.Value"></span></li>
            <li><b>@GlobalLocalizer["CreatedOnHeader"]</b><span itx-datetime="formContext.CreatedDate.Value"></span></li>
        </ul>
    </div>
    <div class="col-sm-3">
        <ul class="list-unstyled">
            <li><b>@GlobalLocalizer["SLAHeader"]</b><span ng-show="formContext._SLAOveralStatus"><i itx-statusicon="formContext._SLAOveralStatus.Status"></i><span ng-bind="formContext._SLAOveralStatus.Status.Value"></span></span></li>
            <li><b ng-bind="formContext.FirstResponseDate.DisplayName"></b><span itx-datetime="formContext.FirstResponseDate.Value"></span></li>
            <li><b ng-bind="formContext.FirstAssignedDate.DisplayName"></b><span itx-datetime="formContext.FirstAssignedDate.Value"></span></li>
        </ul>
    </div>
    <div class="col-sm-3">
        <ul class="list-unstyled">
            <li><b ng-bind="formContext.ResolvedDate.DisplayName"></b><span itx-datetime="formContext.ResolvedDate.Value"></span></li>
            <li><b ng-if="formContext.ParentWI">@GlobalLocalizer["ParentWorkItemHeader"]</b><span ng-if="formContext.ParentWI"><a href="#" ui-sref="analyst.openForm({instanceId: formContext.ParentWI.$Id$.Value })" ng-bind="formContext.ParentWI.Id.Value"></a></span></li>
            <li>
                <b>@GlobalLocalizer["AttachedFilesHeader"]</b>
                <itx-attachmentsdropdowncontrol property="FileAttachments" />
            </li>
        </ul>
    </div>
}
@await Html.PartialAsync("WI_Incident/WI_Incident_GeneralTab")
@await Html.PartialAsync("WI_Incident/WI_TroubleTicket_ActivitiesTab")
@await Html.PartialAsync("WI_Incident/WI_ChildIncidentsTab")
@await Html.PartialAsync("WI_RelatedItemsTab", new RelatedItemsSettings() { AttachmentsAlias = "FileAttachments" })
@await Html.PartialAsync("WI_Incident/WI_Incident_ResolutionTab")
@await Html.PartialAsync("WI_Incident/WI_Incident_CustomerSatisfactionTab")
@await Html.PartialAsync("WI_SLATab")
@await Html.PartialAsync("HistoryTab")