Star Rating: a new way to rate documents and info with Microsoft Lists - Fedes365/Microsoft-Lists-Templates GitHub Wiki
Introduction
Recently, Microsoft has introduced a disruptive change in Microsoft Lists: setValue. When applied into a list's JSON formatting, it can render action buttons which modify the items internally, without opening editors or forms.
Later, what I personally consider a game changer has been implemented by some Microsoft 365 developers and enthusiasts. The almost infinite possibilities offered by setValue in real use cases are demonstrated by Tetsuya Kawahara, Michel Mendes, Dennis Goedegebuure and many others, which started sharing a lot of colorful and interactive samples.
Some days ago, a communication manager asked me to check if SharePoint could enable users to submit a quick feedback on items displayed in a list. Then, I had a look to the list's settings and stumbled upon a rating feature that looked a bit like a "legacy" solution (details here).
After adding this rating column, I immediately noticed 3 main issues: โno formatting options, โ no voters details, โnot fully compatible with SharePoint modern experience. While asking to myself if there was something better to implement, an idea popped into my head...
โญ setValue action: a basic star rating column
If you just need a basic tool to rate files (e.g. documents downloaded from the Internet) and other items, a number column with 0 default value and JSON formatting may come in handy. Based on the star you click on, setValue action will update the RATING column shown above with a number from 1 to 5 and visually displaying 1 or more filled stars. If needed, the X close to the star icons will reset your rating to 0. Obviously, this is a very basic example, whose code is available here.
โญ setValue in a ๐ด๐ฎ๐น๐น๐ฒ๐ฟ๐ ๐๐ถ๐ฒ๐ to get a quick feedback from users
A more advanced solution is a "rating system" made up of two different views: 1) a list view where a site owner can collect feedback data and 2) a gallery view where users can interact to submit their ratings. โ ๏ธThe list view should display the items based on the Author column = [Me] condition to prevent users from accidentally viewing and editing all data.
โ๏ธ Preparing the list view
To achieve this result, you'll need the following columns:
| COLUMN NAME | COLUMN TYPE |
|---|---|
| Title | It's the default Title column |
| RATING | Required number column with 0 decimals, 0 default value and no thousands separator |
| AVERAGE | Required single line text column |
| AGGREGATE | Required number column with thousands separator |
| VOTES | Required number column with thousands separator |
| VOTERS | Required people picker column with multiple selection enabled |
| DETAILS | Required multi-line text column with simple text (NO RTF) |
| PICTURE | Optional image column to upload pictures for the gallery view, recommended for a better user experience |
| DESCRIPTION | Optional single line text column, recommended for a better user experience |
| LINK | Required hyperlink column to let users click on the OPEN button displayed in the gallery view |
๐น The AVERAGE column is a single line of text type because of a current bug affecting column numbers as reported here. ๐น The RATING column should contain the following JSON to make everything work properly. ๐น The DESCRIPTION is meant to contain a short description up to this lenght: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ๐น LINK is a multiline text column to overcome the 255 maximum characters limitation of the standard hyperlink one. ๐น VOTERS will contain the voters' names along with ๐ ๐น DETAILS column, which provides additional info about what rating has been submitted for a specific item.
If you also apply this JSON to format the list view, this is the result you would get ๐
โ๏ธ Preparing the gallery view
Given that setValue is supported in gallery view too, for each item displayed it's possible to let users submit their ratings by clicking on the star icons. Furthermore, each user will get a different message based on his/her personal rate. If an item has an average rate >= 4.8, then a special icon and "Top rated!" caption will appear. The special png icon used in this example is available on Flaticon and I saved it in the main document library with star.png name (Shared Documents/star.png).
After applying the JSON code provided here, you should get this result ๐
And here is what a user would see if a gallery would be displayed through a SharePoint web page embedded in Microsoft Teams ๐
