Microsoft 365 Community Community Demos, 7 Dec 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building a custom React News Web Part

Description

In this 15-minute developer-focused demo, Alison Collins’ presentation opens with a demo of her SPFx ReactNewsWebpart that displays thumbnail, article, link to article, preview description, creation date, likes and comments from SharePoint site(s) the logged in user is authorized to view. In properties, select display style (stack, single), show author, and select sites to search. Instructive code walk-through includes – web part updating, news post data storage, calls to get data, and pagination. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on November 4, 2021.

Demo Presenter: Alison Collins | ReactIntern

Supporting materials:
• Sample - SharePoint News Posts with SPFx | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-news
• PnP Samples site - Samples by Framework | https://aka.ms/spfx-webparts
• PnP SPFx Controls - Reusable React controls for your SharePoint Framework solutions | http://aka.ms/pnp-react-controls
• Blog site – Graphgod | https://graphgod.dev/
• LinkedIn - Alison Collins | https://www.linkedin.com/in/alison-collins-53192b219/

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

Hi everyone, I'm allison collins and I'm an spfx developer. I've been programming for more than six years and I love doing it. Every day below I've got some links to my blog linkedin and the web part I'm going to be presenting today.

A

So what is this sample useful for? And where can I find it? This video is going to be going over the react news web part and you can find it in the pmp spfx open source repository.

A

I wanted to customize the sharepoint news out of the box weber, so I created it with some of the features I wanted. These include pagination comments and likes. This webpart is great for user adoption because it enables you to see news from sites with comments likes and is in a user-friendly format.

A

Speaking of that web part, let's see a demo on it all right, so I'm in my site and I'm going to click edit know that there are already news posts pulled back from my news. Webpart.

A

My web part gets all of the news posts from the site it is deployed on by default. You can add sites and deselect sites, and you will see their news post being added. Let's go ahead and add some.

A

You can also toggle the style to single or stack, and everything will stay the same. Just the style will change.

A

You can also make the creator of the news post hidden or shown.

A

We also get back the comments and likes of each news post. So if I wanted to, I could go in and see this summer. Scavenger hunt newspost could go into that by clicking on the title and then I could scroll down to the bottom and add in a like and a comment.

A

We will see when we refresh this, that the number of likes and comments will go up.

A

All right, let's jump into the code portion I'll, be going over how we update the web part on componentdid update for adding or deselecting sites how we store the data for the news posts.

A

The calls we use to get the news posts and the data and the pagination.

A

We're going to kick off with the first component rendered named react newswebpart.tsx.

A

We have some cool stuff going on in here. So let's dive into it.

A

When the web part mounts, we call the get method in this get method. We have an if-else statement to check if you have any selected sites in the property pane.

A

If there are no sites selected and it was called by the component mounting, we assign the url variable the current site's url. Then we get all the news posts on the current site by calling the sharepoint service getinfo method.

A

We then go through each news post and get the comments and likes and add them with the other news post information to the variable e.

A

If the component should reload, because a new site was selected or deselected, we'll change the state of the reload property from true to false.

A

If the user has sites selected, however, we just go through the same process repeated for every site before we dive into what this reload property is and how we're updating the web part on change. I wanted to give a quick picture on what this does so. Here's a picture of the web part with no site selected and you can see it pulling back the current site's newest post to display.

A

Let's see what makes the web part work when you select or deselect a site. I have this set in place, because I realize that whenever I selected a site, I had to reload my web part for the change to take place instead of the style changing toggle, where it auto reloads. So I use a combination of state and component did update to have this work. Let's see the code.

A

In the property pane configuration method inside react, news web part typescript file. We have a property field, site, picker control. When the property changes it calls the on property, pane field, changed method.

A

In here we have an if statement to check if the property that you updated was a site or not. If you did update the selected sites, then we go ahead and create a constant called value, cast it to the I property field site array.

A

We then assign that variable the new value with all of the new changes, while casting that information to the same thing.

A

Now, if the value and opposite of the length of value are true, meaning that the user has no size selected, then we say: ok, then reassign the property site to be empty and refresh the property pane.

A

If not- and there are some sites selected, go ahead and change that to the value in refresh as well.

A

Do you remember in our componentdidmount method how we had a condition to check if the parameter passed to it was to update or was a default? I don't expect you to remember that. So it's on the slide, but look here so we have when the component mounts, we send the text default as the choice parameter in the get method, because you can't have sites already selected. If you just added the web part right.

A

Well, when you update a web part, we have a choice to pass either update or default. What this means is, if your previous sites don't match your current sites, do this and what we do is we check? If there are sites in there or not?

A

If there are sites, then we want to call the get method to update, and if there are no sites say the user has deselected all of them. We want to get the default sites.

A

Why we actually set the reload property, be true or false, is so that our child components update as well as we pass that state as a property to them.

A

We have the same thing in single style in stack style as in the react news webpart file we just looked at, but let's go over the differences.

A

So the first thing you'll notice, is that we assign some variables and then have the same. If statement determine what to do yet. This time there will be different news posts instead of different sites to compare as properties for the parent component did update. We had just called a method, but in this case we just get the first three news posts and get all the values down to what they should be when you reload the page, for example, you wouldn't expect to stay on page 2 i3.

A

If you reload a page, you would just suspect it goes back to the first page and that's essentially what we're doing here. If you have the same news property, but another property has changed and something happened. We just do the same thing, getting the first three news posts, but then we make sure we are not updating the web part too much, because that will make the code error and you will reach the maximum update status. So we just stay inside three objects.

A

Well, that might be it for the component did update function. We are just now getting into its children. So let's explore.

A

Let's hop into what happens behind the scenes to give the users the ability to navigate through pages of three in the web part. This is my favorite part of the web part and I'm so excited to share it.

A

In the render of the stack style and single style, I have two buttons and the page account the back and next buttons on click go to the back index methods.

A

The page count is stored in the state property account since we're getting the pages in groups of three. We divide the number of news both by three and then round up to the largest integer we round up, because it doesn't really make sense to have two and a half pages when the amount of news posts can't be evenly distributed into pages of three. We also have a ternary operator to determine if the buttons should be disabled or not.

A

These are there so the user knows you can't go back or move forward anymore, and so it doesn't break my code, of course, for the next button. It's disabled when your current page is at the max length of news posts you have or more well, let's see what's happening in each of these methods.

A

In both of the style components, we define and use the next and count properties, the next property increases by three and account increases by one for each page. We also define the properties, update, count and rendered news. The update count actually keeps track of if a reload is needed, because a new site is selected or deselected, the rendered news property is going to be assigned to the three news posts of the current page.

A

We have to assign the renderedness property the first three news posts when the component mounts so that there will be newsposts to display. So, let's see what goes on in there.

A

In the component did mount method, we set the array, count min and max variables. What the min and max are used for is to get the range that we need to get the first three news posts that we want to render. Since there are the first three news posts we want to get the max to be equal to the minimum zero plus four. We go through each of the news posts and check to make sure we're getting the right post. We have to have less than four posts. Three.

A

We then set the rendered new state property to be the news post, we're getting as well as starting next at three because we're getting the first three. Additionally, we set count to one because we're on the first page and update count to zero. You may be thinking if this is how you get the first three. How do you get the next room.

A

Almost exactly the same way, we define the same variables, but the definition of min and max are a little different. What we're doing here is we're getting the current number we're on. If we go to the next page, we're at six news posts, we then define min as the state property next and a max variable to four added to the min variable, because we want to be just one under four, which would be three news posts.

A

With our back method, we have the same variables with a little bit different values for the min variable. Since we're going back, we subtract instead of adding the way to make max work, is to go back 6 an extra 2. like with the next method. We want to have that extra space, so we can get the 3 news posts, but we do this by taking 3 and subtracting 1 instead of adding.

A

We then replace the state value next, with its current value subtracted by 3, because we're going back, 3 and then subtract 1 from the state value count, because we're going back a page now, I'm going to go over the class that makes the sharepoint rest api calls to get the news post.

A

Here is our get info method that gets the information on each news post. We then create a new web object and pass the current site to it. This way we can get the base part of the url to query.

A

We then say: okay get the list from there that match the title site pages then locate what we want specifically to get by selecting the title, description, thumbnail and then some more information.

A

We have a filter for the promoted state equal to, because that is the promoted state of every news post in sharepoint sites, and we don't want to get pages.

A

We do have to expand the author id to get the full name of the author to use.

A

After we get that information we mount through each item, we create a variable url, which is just going to be the current site's url and then the location of the news post after it. This is so that, if you click on the title of the news post, it will take you to that news post.

A

We also push the author's full name. The news title description create a date and more the banner image. Url is going to be the thumbnail of the news post. It just has a different name to get it after we get the site, we return the information and then the method that calls this in the react. News part goes on to map through this and we'll get the comments and likes with the id and url of the site.

A

In here we go ahead and get our information in a similar format.

A

We create a new web object by passing the current site's url and then use that for our call in our call, we say: get the lists that match this title site pages and then check the items to see if they match the current news post id and get those comments.

A

I create a variable and assign it the length of the comments to let you know how top level comments there are, but I also go through each of the comments to check for replies and add that into the amount of comments variable now, let's see how we get the likes.

A

It's the same way: we format our code in a try, cache statement again to catch any errors, create a web object for the current site and then use that for our call. But in the call we get the get liked by information.

A

This actually gets more than just the account like the name of who actually it was liked by so I can hopefully use that in version 2 of the weber.

A

Thank you for letting me present and you can see the demo and additional resources below have a great rest of your day.