Month: February 2020

User Rating Scorecard, Part III

Posted on | by snhackery

“All things are created twice. There’s a mental or first creation, and a physical or second creation of all things. You have to make sure that the blueprint, the first creation, is really what you want, that you’ve thought everything through. Then you put it into bricks and mortar. Each day you go to the construction shed and pull out the blueprint to get marching orders for the day. You begin with the end in mind.”
— Stephen Covey

I like the way that my 5 star rating scorecard widget came out, but I still want to be able to do more than just stars, and be more flexible than having just a 1 to 5 rating system. Ultimately, it would be nice to be able to customize things a bit more with different icons or images, be able to pick your own colors, and even have a different image for each rating value. As always, I would want to have a default value for just about everything, so your wouldn’t have to specify most of that if you didn’t need or want to, but it would be nice to have the option. I’d like to be able to support the following customization attributes:

  • snh-max – this would be the upper limit on rating value, and I would make it totally optional, with a default value of 5, which seems to be pretty universal for most use cases.
  • snh-icon – this would be the name of one of the stock Retina Icons, which again, would be optional and default to star if you didn’t override it.
  • snh-image – this would be a link to an uploaded image file, which would serve the same purpose as the snh-icon, but provide the ability have a custom image not found in the stock icon set. Obviously, you could only have one or the other, so there would have to be some hierarchy established in the event that someone specified both an icon and an image.
  • snh-image-array – this would be an array of links much like the snh-image attribute, but instead of a single image, it would provide the capability to have a different image for each rating value. Again, there would have to be some kind of hierarchy established to avoid a conflict between an array of images, a single image, or a single icon.
  • snh-name – this would be the text equivalent of the icon or image, and would default to Star, to match the default icon. This name would be used in some of the labels, and would allow you to replace labels such as 1 Star with 1 Bell or 1 Thumbs Up.
  • snh-plural – this would just be the plural version of snh-name, and really only necessary if adding an “s” to the end of the word didn’t come out right. In the examples above, 2 Stars or 2 Bells would be OK, but 2 Thumbs Ups wouldn’t be right, so you would want to add snh-plural=”Thumbs Up” to fix that.
  • snh-icon-color – this would give you the ability to choose the color of the selected icon, and again, I would make this optional and have a default color selected so you wouldn’t have to specify this unless you wanted something different.
  • snh-bar-colors – this would be an array of HTML colors codes that would give you the ability to choose the colors in the vote breakdown bar chart. Like most other items on my wish list, this would be optional and there would be default values that would be used in the event that you elected not to customize this particular parameter.

These are all of the things that I can think of at the moment, but I am sure that others will come up over time. Of course it’s one thing to have all of these ideas in your head and quite another to actually write the code to make it happen. At this point, these are just ideas. If I want to actually see it in action, I will have to actually do the work!

Generic Feedback Widget, Part X

Posted on | by snhackery

When I added the User Rating Scorecard to my Generic Feedback Widget, I only wanted to show it when appropriate, so I added an ng-show attribute to the snh-rating element:

<snh-rating ng-show="data.includeRating" snh-values="data.ratingValues"></snh-rating>

I did the same thing to the snh-form-field element for the rating entry for the very same reason:

<snh-form-field
       ng-show="data.includeRating"
       snh-model="data.rating"
       snh-name="rating"
       snh-type="rating"
       snh-label="Rate this {{data.tableLabel}}"/>

Providing a rating and viewing the cumulative results of ratings was something that I wanted to be optional, as including a rating in feedback is not always appropriate depending on the use case. To populate the data.includeRating variable with the desired alternative, I created a widget option, which I defined with the following JSON option schema:

[{
    "hint": "Set to TRUE if you want to include a rating with the text feedback",
    "name": "include_rating",
    "default_value": "false",
    "label": "Include Rating?",
    "type": "boolean"
}]

Once the option schema has been established, editing the widget instance in the Service Portal Page Designer will pop open a modal dialog where you can check a box to indicate that you would like ratings to be included for this instance of the widget.

Option dialog in Service Portal Page Designer

In the server side script, I look for this option and use it to determine the value of the data.includeRating variable.

data.includeRating = false;
if (options && options.include_rating) {
	data.includeRating = true;
}

This makes the widget a little more flexible, as you can check the box for one circumstance and leave it unchecked (the default) for others. Checking the box will get you the rating score card, user ratings under each user comment heading, and the ability to rate the item when you provide feedback. Without the box checked, all of those items are removed from view.