Microsoft 365 Community Community Demos, 23 Feb 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building Feedback Sidebar with SharePoint Framework

Description

In this 9-minute developer-focused demo, Matteo Serpi delivers a web part that enables SharePoint site users to provide feedback on various sections of site pages. The web part renders a button in the right sidebar that calls up a general form containing a text field, rating stars, and button to send feedback to back-end. The form can be appended to any web part(s) on page. Uses PnPjs findControl, and Feedback Sidebar function - buildFeedbackConfigFromPage.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on February 23, 2023.

Demo Presenter
• Matteo Serpi (Avanade)

Supporting materials
• Sample - Feedback Sidebar | https://adoption.microsoft.com/en-us/sample-solution-gallery/sample/pnp-sp-dev-spfx-web-parts-react-feedback-sidebar/

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

A

B

Let me briefly introduce myself I'm Matteo I'm, a software engineer at and I'm going to show you today, a simple web part. We based on a real case scenario developed for one of our customers, and so basically, we needed a way to allow our users to provide feedbacks about all the features and and about all the tools they find in their SharePoint site.

B

So we developed a simple web part, A, really simple web part that renders a button in a fixed position on the right side of the page, as you can see here, and when the button is clicked it, it brings up a panel that shows up a form for a photogenetic feedback about the site.

B

There is a text area and a five-star rating component and, of course, a button that sends the data to the backend for every other web part within the page. There is an accordion that contains the form for for the related feedback.

B

Now the the web part itself is is quite simple: there's really nothing relevant to say about it.

B

um What makes this sample interesting from our point of view is the way the panel is built because there is no manual configuration at all um the web part retrieves all the content from the page directly from from the page itself, and this is done using uh the uh the client-side pages module of pmp.js that allows us to work on client-side pages, with the find Control Function that you can see that you can see here. We are able to find and iterate over all the page layout controls that we found within the page.

B

Here you can see a snippet from from the documentation and I will come back later to this when we, when we see the code, this is our sample of all the data retrieved for a single white part. We found on the pair on the page and, as you can see, there are a lot of useful information. There are info about the webpart position, the ID, the title, the description and and so on, and this is our uh is our actual implementation. We retrieve all the content from the page for each web part.

B

We got the title and the order, which is basically the the position within the page. All the duplicates are removed. We don't want to ask feedback for different instances of the same web part and, of course, the feedback report itself is removed from the list, because in this particular case it doesn't make sense to ask feedback about the feedback feature, and let me show you our quick demo.

B

This is my SharePoint site. This is my own page and, as you can see here, I've added some web Parts in the home page. There is the new what the news web Parts, the YouTube web part some quick links, Yammer conversation and Bing Maps and, as you can see here, there is my my little feedback button. You know in this sticky position in the on the right side of the page.

B

If I open up the the sidebar I will find the the generic feedback form. I can leave a comment here. Let's say: I love this site, I can rate it. Let's say for star and of course, send my feedback and for uh all the weapons that I have added on the page.

B

There are all the all my accordions with all with the form for the related web part.

B

As you can see, there is the the form for uh for the feedback about news, the form for the feedback about the YouTube, what part and so on.

B

Now, let's edit the page- and, let's add let's say the recent documents were part- sorry for this typo here it is my new web Port, let's publish the page again and this time I, if I open, my sidebar uh I can see my a new form for my newly added web part, which is indeed the the recent documents. Of course I can leave a comment.

B

I can rate it and I can set another feedback about my new section in the same way, let's edit again the page, let's remove the new swap part, for instance, publish the page again and, as you can see, the uh the form related to the news web part is now gone because, of course, my web part is is not on the page anymore.

B

Let's jump quickly to the code we saw before this function, which is our build feedback from conf from from page and what's Happening Here, we. uh Basically we get the client the client-side page, using the page URL that we retrieve from the from the webpart context.

B

Then we iterate over all the page layout controls we found on the page and we create this simple object, which has only the in this case the title and the position of the web part, and we push it in into into a list. Then we removed all the duplicates as we see before, and we removed the the feedback web part itself.

B

And finally, we sort the this list. We sort these uh all the all the the page layout controls we find by by position in order to show uh the feedback forms in the same order uh of the web, part that the user found in its own page and the last scene.

B

The last thing I want to show you is the the function that actually send the feedback to the backend, and this is what you will find in the in the sample published on the sample solution gallery and, of course, this is just a sample and and as you can see here, the only thing it does is to print the the payload of the feedback to the to the console. Of course, you are it's up to you.

B

What to do with the with the data you collect uh from your users, you can save them to Azure Point list. You can send them to a database. You can log them to Azure application inside and and so on. In this case, this function always returns a success. That is what what the form show was on SharePoint, with the with the success message and I. Think that's it. That's all. Thank you.

A

Great stuff Mateo. Thank you very much for coming on and and sharing that with us and obviously the first time that you've spoken on. This call hope it's uh the first of many uh and that you've encouraged other people as well to take that step like we talked about at the beginning. If you want to come and talk on the call like Mateo's done, then just send a request in and uh and we can get you on, uh but great example.

A

I love that uh particularly the console.log at the end uh did make a chuckle a little bit um but uh yeah, leaving that open to everyone's uh kind of imagination, and you could take that further- um is. Is this available as a sample or or will it.

B

Yes, it's available on the Microsoft sample solution gallery and on the pmpjs repository as a sample on the as a Wattpad sample. Yes,.

A

Perfect, thank you. So if you, if you've liked what you've seen go, go, take a look at the samples gallery right. Thank you. Thank you very much, foreign.