How to: Star rating in Analyst Portal

Applies to Portal V3 and V4
The 5 Star rating provided in the Enduser Portal once a request was resolved (or cancelled) stores its information in the following extension properties, added when importing the ITSM Portal management packs:

• CustomerSatisfaction (Contains the actual rating value 0-5. Datatype: Int)
• CustomerSatisfactionComment (Contains the comment from the user that rated the request. Datatype: String)

Make star rating feature available in Analyst Portal

Before you can add the star rating to any analyst form you must "install" this feature in the analyst portal. Follow the steps below to make the star rating feature available in your analyst portal:

• Copy the File itsmportalV3\Areas\EndUser\Views\Forms\RateWI.cshtml to the folder itsmportalV3\Areas\Analyst\Views\Forms\
• Download the following File: analystRateWI.js (See Appendinx if you cannot download JavaScript files)
• Place the JavaScript file in itsmportalV3\wwwroot\lib\custom\ (create the custom folder if it does not exist yet).
• Restart IIS (type iisreset in a cmd prompt)

At this point the star rating feature can be used in the analyst portal.

Add star rating control to Analyst WorkItem Form

To add the star rating control as it is available in the EndUser portal just add @Html.Partial("RateWI") on your custom form file wherever you wish to render that control.

Example

Let's add the star rating control to the Incident Analyst Form header as an example as shown below:

To do this, follow these simple steps:

• Create a copy of the file itsmportalV3\Areas\Analyst\Views\Forms\WI_Incident\WI_Incident_DefaultForm.cshtml in the same folder.
• Name the copy WI_Incident_DefaultForm_custom.cshtml
• Open the new custom file to edit
• At the end of the emo_header section (after line ~52) add the following html markup to add a new column including the star rating control:

<div class="col-sm-3">
    @Html.Partial("RateWI")
</div>

• Save your custom form file and open any Incident in status cancelled or resolved in the analyst portal. The star rating control will be rendered in the form's header and can be used as in the EndUser Portal.

Show rating comment on Analyst WorkItem Form

Adding the rating comment of the user that submitted a star rating can be added to the Analyst Form as any other string property by using the itx-stringcontrol, described in the ITSM Portal customization guide.
The rating comment is stored in the property CustomerSatisfactionComment.

Example

Adding the following html markup on the Incident resolution tab...

<itx-stringcontrol property="CustomerSatisfactionComment" columns-span="12" required="false" multiline="true"></itx-stringcontrol>

... result in the following rating comment control:

Add rating column to Analyst View

The star rating submitted by the users can be displayed in Analyst Views column. However, these ratings will be displayed as number ranging from 0 to 5 instead of the 5 stars.
Adding this rating column is done within SCSM console by editing the correspondig view.
The rating is available in the CustomerSatisfaction property.

Appendix

Content of analystRateWI.js(In case you cannot download it due to security concerns):
Create an empty .js file in the itsmportalV3\wwwroot\lib\custom\ folder, then copy paste the contents below

/*
 Rate WI feature from enduser portal ported to be used in Analyst Portal.
*/

(function () {
    'use strict';
    var app;
    try { app = angular.module('itsmPortal.analyst'); }
    catch (e) {
        // module not found, exit
        return;
    }


    app.directive('itxRate', itxRate);
    itxRate.$inject = ['$location', '$rootScope', 'backend', 'dialogUI', 'localization'];
    function itxRate($location, $rootScope, backend, dialogUI, localization) {
        return {
            restrict: 'A',
            require: 'ngModel',

            link: function ($scope, $element, $attr, $ctrl) {
                // clean up if needed
                $element.on('$destroy', function () {
                    dispose();
                });

                // do real linking
                link($scope, $element, $attr, $ctrl);
            }
        };

        function link(scope, element, attr) {
            scope.ratereadonly = false;
            scope.rate = null;

            if (!(scope.$parent.formContext && scope.$parent.formContext.CustomerSatisfaction)) {
                return;
            }

            if (scope.$parent.formContext.CustomerSatisfaction.Value > 0) {
                scope.ratereadonly = true;
                scope.rate = scope.$parent.formContext.CustomerSatisfaction.Value;
            } else {
                var queryParams = $location.search();
                if (queryParams.rate && parseInt(queryParams.rate) > 0) {
                    showRateUi(scope, parseInt(queryParams.rate)).then(function() {},
                        function() {
                            if (scope.ratereadonly !== true) {
                                attacheWatcher(scope);
                            }
                        });
                    return;
                }

                attacheWatcher(scope);
            }
            return;
        }

        function attacheWatcher(scope) {
            scope.$watch('rate', function (newValue) {
                if (newValue > 0 && scope.ratereadonly !== true) {
                    showRateUi(scope, newValue);
                }
            });
        }

        function showRateUi(scope, rate) {
            var dialogScope = $rootScope.$new();
            dialogScope.rate = rate;
            return dialogUI.showDialog(localization("EndUserRateRequestDialogHeader"), '<form name="commentForm"><div uib-rating max="5" enable-reset="false" read-only="false" ng-model="rate" state-on="\'rating-star full\'" state-off="\'rating-star empty\'" /><div class="input-group col-md-12"><textarea rows="3" class="form-control" ng-model="commentText" /></div></form>', dialogScope, { okFormCheck: "commentForm" }).then(function (dialogData) {
                scope.$parent.formContext.CustomerSatisfaction.Value = dialogData.dialogScope.rate;
                scope.$parent.formContext.CustomerSatisfaction.IsDirty = true;
                scope.$parent.formContext.CustomerSatisfactionComment.Value = dialogData.dialogScope.commentText;
                scope.$parent.formContext.CustomerSatisfactionComment.IsDirty = true;
                scope.ratereadonly = true;
                scope.rate = dialogData.dialogScope.rate;
                dialogData.dialogRef.close();
            });
        }

        function dispose() {

        }
    }

})();