Microsoft 365 Community Microsoft Graph, 19 May 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building a company stories web part for story experience

Description

During this 11-minute developer-focused example, Luis Mañez’s web part renders images (cycles) them with related text on a page like Instagram Stories, as a way to engage social media adept employees. Text, images, and author details are stored in a SharePoint list. The web part uses an existing open-source React component called “react-insta-stories” and several Microsoft Graph Toolkit (MGT) components. The sample is available presently in the PnP Samples repository. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on May 6, 2021.

Demo Presenter: Luis Mañez (ClearPeople) | @luismanez

Supporting materials:
• Blog post - Community sample: Engage your users with SharePoint stories/reels | https://techcommunity.microsoft.com/t5/microsoft-365-pnp-blog/community-sample-engage-your-users-with-sharepoint-stories-reels/ba-p/2325128
• Repo - Company Stories Webpart | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-company-stories

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

Introducing you surprise stories in this demo: I'm gonna show you an spfx web part that is rendering uh images and content in an instagram stories. Tweet reels way.

A

I thought it was a good idea to show content that way to engage your user with content in a trendy way and well you know stories are everywhere, so why not in sharepoint? So apologies in advances, you think it's a it's a bad idea, quick about me section. My name is luis maniff and I work as a chef architect at clear people.

A

I'm a microsoft, mvp in office development, category and well. You can find me on twitter and ping if you have any question, I'm a usual a contributor in the pmp activities. Okay, um let's see it in action. Actually, so I'm jumping in my in my tenon so and let's start the web part edit. The page.

A

At the web part serve my stories there, you are, let me film out a bit, so you can see on the story. Republish the page and well um not a great surprise stories. So you have image the author and you can use the keyboard, so you can go back in the stories it has keyboard support and also if the story has some content and you can see the seymour button and it opens the the content of the of the story.

A

So this is how it works, it's looping. So once it's done, it goes to the to the first story again and where is the data when what I have it's a story: sharepoint list it's a sharepoint list for for stories, so we have the the image content and the author of the of the story. So let's start a new one.

A

If we enter the title, title is not being used. Actually, let's select an image.

A

And let's say something here:.

A

And the alpha that one okay, so now we have another story in our list. So if we go back and reference, hopefully we should have a new story. Yeah and again. If the story has the content, you can see the content here here below so yeah. This is, this is how it works, and now let's go back actually to the presentation.

A

Okay, we've already have seen the surprise that is behind with the data, so, let's dive into the code. Okay first thing is that most of the work in the ui is actually done by this component. This react insta stories package that is available in in npm and also it's open source.

A

So you can download the source code contribute or whatever it's available in github and here in this cmatch first, the minimum that the component requires to make it work is just an array of the different, your image urls and you can use external images or page 64 images on here. So there's an stories component with a storage property, so you just pass dry and it just it just work, as you can see here, there's a table with the different properties for the storage components, so you can define the white and the and the stories.

A

Obviously, if you want to loop or not, you want to allow keyboard navigation and quite a few things. The component is really great and then in the stories uh it works just with with uh image url and also you can use an story object, as you can see here with different properties.

A

So you have more control about the things that you want to to render the story of it allows you to use a url a type, and it also allows to use videos here in the story, the duration of that specific story, header for this story- and this usually would be the user of the of the story and also you can specify the content that you want to render with these similar options and and the styles.

A

Also, it's not here in that table, but there's another content property that actually I'm using in in go and allows you to provide a specific function to entirely customize the way that the story is being rendered, and this is something that we're gonna see in a minute in our code, some more examples of the stories of our eyes, so here in this one, it's specified in the url duration and also the header with the user uh subheading and the profile image of that user and another one with the simmer option.

A

So you can see here how you can specify a function with a specific html that you want to use in the cmor option.

A

Okay in the web part, this is the usual instructor of an spfx real web part. So if we jump yeah in the package.json, you can see the react instance. Storage reference. This is the component that we just saw and in the circle stories web part not much here, but we are overriding.

A

The only need of the web part- and we are as we are configuring here- the microsoft graph toolkit I'm using the microsoft graph toolkit to render the the author with the user profile, image, display, name and an email, and that's because the microsoft graph toolkit is it's really awesome. So it's gonna help us with um with that part of the story and in the render of the web part, just calling the main sharepoint stories uh react component and set in the the context.

A

Okay, we are now in the server storage component, so in the component demand. What we are doing is calling the cell phone rest api to get the data I'm using the render list- data stream endpoint, because it's giving me the image url in the proper format.

A

So I don't need to do anything else and then, when the data is back, we just map the the list. Items to the story, object that we saw in in a moment and update the react state with the with the different stories so in the render component, if the data is still loading we have so when uh this similar component.

A

This is coming from the fluent ui, and this is just a placeholder, a great place holder that is indicating that the data is is being low and once we have the data, we use the stories component from the library, the the react, insta stories package, sending the stories and configuring some properties for allowing keyboard navigation. The the story interval itself by default to four seconds, and we are looping the stories.

A

Okay and in this function we are mapping the the list item from sharepoint into a story uh object with all the proper, with some of the properties that we selected. We saw before so I'm getting the image url, the author id, which is the the user id and the content of the story.

A

So here we are setting the the story, object with the url and the content property and, as I said before, the content property gives you the option to use a specific custom function. As you can see here, the story renderer function and in this case what I'm doing is fully customizing how the stories is rendering the page and I'm doing so, because I want to use the person component from the microsoft graph toolkit to render the user profile with the display name and an image.

A

So I don't have to be calling graph api to do so. The person component is is doing it for me and it's really easy to configure. You just need the user, the user id and configure how you want the avatar and and it's on its own and the rest of the function is just rendering the the url of the of the image with with some with some styling, as you can see here with seymour, this is a high order component from the library as well.

A

That allows you to specify the function that you want to use. If you have more content, so you see the c more link in the in the demo. This is because of this this component. So if the list item has uh the has filled the the content fill, then I'm setting the symbol, property on the story and I'm saying okay, I want to render the content data with this deep layer, the style and so on. So with this function, we have full control about how we render the the story.

A

That's all the sample is already available so feel free to download, give it a try and bring me on twitter if there's an issue or or any question whatever, and that's all. Thank you very much for for having me in the call and yeah again feel free to leave any questions or whatever. Thank you very much awesome stuff. Thank you very much.