Microsoft 365 Community Community Demos, 13 Jan 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building Emoji Rating Web Part with SharePoint Framework

Description

In this 13-minute developer-focused demo, Siddharth Vaghasia shows a simple way for employees to give feedback on internal communications (news/article/post) and for managers to view sentiment in report. Web part uses star-based rating system, captures text comments, stores ratings in SharePoint list, and aligns data to page name. Configurations – link to list, background colors, ratings text, emoji images, enable/disable comments and count. Use a Power Automate flow to add web part to page at creation. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on January 13, 2021.

Demo Presenter: Siddharth Vaghasia | @siddh_me

Supporting material:
• Sample - Emoji Ratings | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-emoji-ratings

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

A

Today, I will be presenting an spfx uh sample webpart for collecting emoji based reaction or feedback a little bit about myself, I'm siddharth vagasi, I'm microsoft, mvp and independent consultant. These are some of the social handlers through which you would be able to connect with me. uh This is the link to the report to this webpart. If you wanted to use this webpart, there's an documentation around on how to use it, etc.

A

So, let's start with the driving factor. Okay- and we all know how feedback is important right, be it be a positive or negative.

A

uh So what I have seen was um we have public news which are there on the news site or the public blog post or articles which we have wherein I have seen an emoji based feedback, which we will see at the down of the page where people can basically react to that particular news or articles. So I thought of you know what, if we can build something similar which can be used by the organization who are using microsoft, 365 and publishing their internal news as in news in the organization?

A

What if we can build something similar and collect employees or users feedback as an emoji reaction on this news and everything right so, but this web part is not just limited to news: it's basically an spfx webpart. So what we can do is we can use this webpart on wiki articles if we have a knowledge base to basically collect the user feedback on a particular knowledge base, and also it can be used in the blog post if you are having an internal block on sharepoint right.

A

So basically, this kind of web part would allow us to get the reaction of the news or articles within our organization itself and it can be deployed as an spf expert part.

A

Let's see some of the features, so the web part will allow you to basically configure the header text, the rating text and the images which you can be used. Basically, you can use different kind of emojis, which you wanted to use which are configurable as an property.

A

We can choose the rating from basically one rating to maximum file rating, so it means if you want, and the feedback rating based on just one. Two and three that also can be done. There is a configurable option to show the total count of the rating which user has given on a particular news as in badge, then there is an also config level option wherein we can choose the whether you want allowed to add comment while they are providing the feedback, and this can be disabled.

A

Also, if you just want a pure emoji based web part, it will also display current user's rating selection. If I would have already rated a particular news or an article, it would display that. Okay, I have rated this by having a highlighted background. It does also have an update way to change the rating.

A

All of this rating would be stored as in sharepoint list and uh to make it more usable. uh There is an option in the web part configurable and the webpart property uh configuration thing wherein we can basically create the list on the flies where we wanted to choose the where to choose the list we wanted to create, and then that list can be configured as in the webpart property, where the whole rating data should be stored, and there is an also option too for the admin to basically choose the background color.

A

So these are some of the features, so, let's quickly see the demo so consider. This is the news or an article or news of an organization. uh What I have did I have added that web part. So this is how the web part would look like, and as of now I have already, my logged in user would have already reacted to this particular news. So I can see the color in the highlighted thing and we can also see how many people have basically selected a particular rating for this particular user for this particular page.

A

So all this data is dependent on the page name. It means uh the data is stored against the page name and based on that page name. The data will be filtered and would be displayed here, and there is an option to basically add comment to it and then submit the feedback again to update the feedback.

A

So now, let's see the property windows.

A

So from here, basically, we would be able to choose where we wanted to store the rating data. um If we basically are kind of using the same uh web part for at multiple places in the single site it it will allow you to basically choose the list and which will be configurable using this button. It will automatically create a new list based on the list name which we have provided. If at all, we wanted to.

A

uh If you are using it for the first time, and we just wanted to dynamically- create the list, then this is the rating text, which would basically we would be able to configure the text which is displayed on the top of the webpart and from here we would have a property collection, uh property thing, proper field collection data, wherein we would be able to choose what should be the titles of each rating, which we wanted to do so.

A

Basically, it will allow us to configure the titles of the rating, and it will also allow us to set the emoji or the image which we wanted to use. While we wanted to display as a part of uh the feedback collection. So here, as I said, you can either choose uh from one to five. You can either put uh if you want three rating system, just configure three rating system and you wrote: okay only put the three uh ratings uh images in the web part right. Then there is an option to enable and disable comment.

A

uh There is an also option to enable and disable count, and we can also choose to basically configure the background color of the web part right now to make this more usable like. We would know that whenever a news has been created, it might be created by some content team or probably somebody who would be handling the news and everything I was. I thought of you know having this and automation wherein as soon as the news has been created, we should be able to add that news into uh the web part right.

A

So uh my friend koench helped me write and power automate through which, once we would be once we will basically able to uh whenever we add a new part or a new news, post. Okay, uh it will basically automatically add this webpart onto that page, so that the actual content that I don't have to go and configure this webpart every time we wanted to do it. So, let's quickly see that demo I'll just use any blank page.

A

And I'll just pause the this thing, uh so this flow basically uh is using.

A

The sharepoint rest api to uh when an item has been created or modified on that particular page library, where we are first seeing that if the current page has been a news page or not, will the promoted state is either news then check out the page and get the webpart uh id the webpart id? We will be able to see from the uh webpart manifest file, uh then what it will do.

A

It will uh basically compose a variable where it will concatenate the current uh page properties, which we have and add the web part properties which we wanted to as a part of configuration by basically adding that a particular web part into that page, and then it again saves the page, and then it's published the page now so consider this automation can be done wherein as soon as the news is being published, we would be able to automatically add this paper.

A

This can be, they uh done other ways also, but it's just that the whole use case which I was trying to demonstrate would create would be incomplete. If you don't have automation in place, because whenever the news is being created, we don't expect the content. Writer to basically go and add this webpart to the page right now, let's quickly see uh if the web part would have been added here, it has not. Yet probably it might take time while we are waiting for that.

A

What I'll do is, let's quickly see uh the code walkthrough, so it is a typical spfx webpart, which we have built now in the property pane configuration, we are using uh spfx, uh reusable property, pane controls to basically get different types of configuration which we wanted to create.

A

We are using property field, data collection with the title and the image url to store the emoji images and the emoji titles or the rating titles which we have and then the other properties like enabling account and comments and everything right for uh list creation. um Basically, we are using uh pnp for all the rest operation, pnp js, for all the rest operation which we have, and for that uh I have created an sp service, uh a provider class wherein we have all the methods which we have to use, while basically interacting with the sharepoint.

A

So starting with get items will basically get all the items from the particular list. uh The gate rating- sorry, this method is not used. This method is used. It will basically get all the rating list items from that particular list.

A

The add writing. Item method would be used whenever a method whenever the user would be rating on a particular item and the request object would have uh the page name, the rating which user has selected and uh the user who has uh who has given the rating right and same way we have update.

A

So this is typically crude operation on that particular sharepoint list, which we are, which we will be doing, and this is the uh create list with column method which will basically check whether the same name list already exist or not if it exit it won't create, but it will display some error message. If not, it will create it uh once the user clicks on it right now coming to the component. uh What we have is in the render method, uh the typical user interface, which we create.

A

uh We are using pnp placeholder control to basically allow user to configure. If the property are not been set, uh then there is an div which displays the rating text on the top, which is basically the header text and then using the emoji collection, property field, property collection data. We are looking through it and we are creating. The badge is enabled it means if the count is enabled, then only we are creating the batch.

A

Otherwise we are just simply using the displaying the rating images which user would have selected and below that we would be displaying the rating title right and if the comment is enabled we have a text field which will basically capture the user's comment and add it in the sharepoint list right and then on the button click we have a submit rating which basically calls the sp service provider methods.

A

This is the logic where we are basically using the indexes of the column, because we have a five rating index uh mechanism which we have so the columns are fixed like rating one, two, three four and five, but the user can use any text which we wanted to store. So to do the dynamism.

A

What we are using, we are using the switch index wherein we are selecting the indexes and everything and uh basically making that rating field dynamic in the nature right and then the page name to be stored and then a typical method wherein we are adding the rate item, and if it is successful, you just display a dialogue saying that your rating has been successful, successfully submitted, etc.

A

So this is the typical uh code. Walkthrough I mean typically in a way the operations are simple which we are doing in the sharepoint thing. Let's quickly see if the automation has worked correctly, I hope so it has not. uh It has not. Probably it might have failed or something, but we have this thing in place wherein we are once a user creates a news. The web part will be automatically added.

A

uh We are planning to write a blog post also, so this uh like how to automate this thing, which we would share later on the social media, uh and the last point which I wanted to cover is the sharepoint list schema which we have, uh which is very simple in nature. We have title of the user, current logged in user, the page name, uh the user, who has added the rating.

A

So we are storing the email address to have the uniqueness, and then we have the columns like rating one, two, three four and five and the comment which we have done so yeah. All the data has been stored here and basically been captured in the basically been captured in the rating way. We wanted to do it and if anything we wanted to update here as in comment what it will do, it will basically update the rating, and it will also change the rating to that particular item which we have selected so yeah.

A

That's it from my side, thanks bessa and over to you.

B

Thank you, sit, hurt, really really cool stuff and and super clean implementation, and don't worry about the small demo hiccup there, but it's great to see that automation thinking behind of the scenes as well. It's all about the inspiration as well for the community.