Microsoft 365 Community SharePoint, 28 Jan 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Connecting to external APIs in SPFx – case Soccer Highlights

Description

In this 16-minute Developer-focused demo, Jerry Yasir has created a useful Soccer highlights web part to demonstrate the ease in which you can call a Public API inside a SPFx web part. The API provides match highlights, videos in HD, and the ability to watch live games. Display in flat mode or in filmstrip view via custom React components, or by using the Filmstrip control from the SPFx samples repository. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on January 28, 2021.

Demo Presenter: Jerry Yasir (DXC Technology) | @jerryyasir

Supporting materials:
• Documentation - Build apps with the Teams Toolkit and Visual Studio Code | https://docs.microsoft.com/en-us/sharepoint/dev/spfx/connect-to-anonymous-apis?WT.mc_id=m365-15744-cxa
• Blog Post - SharePoint Framework Design Series: Layout Patterns — Part II | https://tahoeninjas.blog/2019/07/31/sharepoint-framework-design-series-layout-patterns-part-ii/
• Repo - SharePoint Framework Client-Side Web Part Samples & Tutorial Materials | https://github.com/pnp/sp-dev-fx-webparts
• Sample - Soccer Highlights Web Part | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-soccer-highlights

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

Hello, my name is jerry asser, I'm a microsoft mvp for office, apps and services. I work at exe technology as a collaboration architect, so today I'm going to show you a very interesting sample that I developed for an internal at home scenario that I faced in the in the last holidays. So basically in the next 10 15 minutes I'll show you how I developed this web part. So the the basic idea behind this sample was.

A

um You know, as I told everyone last time, that I was actually I'm not a developer, but I uh you know like to learn things especially around sharepoint framework development. So while I was learning it, I saw my kids actually searching on the internet for the crazy soccer videos or the recent soccer highlights, but so they were going to youtube and they were going to uh the you know, google or bing and searching for those highlights.

A

But during that process I I saw that they were actually getting a link to the sites which were not actually safe for the kids, the the sites have uh you know, dialogues and alerts and messages, and some some pictures that definitely should not be visible to you to young some kids. So that's where I thought of building something that where they can go and safely browse the content without worrying about those links.

A

So I started looking for something, and I was mostly looking for an api that I can simply use and utilize inside my web part. My learning was also about the react components, especially the class level components, because I was not very familiar with that.

A

So I thought that I can build something like a hierarchical component, where I can display those videos in a certain ways that they can easily browse them and they can see almost all the detail, that's available by the by the api so and I ended up finding a github repo that has link of a lots of public api that have been categorized by the type of ports, entertainment images, pictures, videos and other stuff. So I was able to grab that api, which is provided by sportback.

A

So this api provides basic information about everything, that's happening in the football world right now, and you can simply call that api directly inside the result is json, so you can just utilize it in your code.

A

So as an overview again, just like I said this web part is just a very basic example of how we can call an external api into an spfx web part. So nothing new. If, uh if you, if you're learning spf x uh as a starter, your first thing you'll do is is use a fetch api.

A

So you will see that how you can call something from from a url and then display it on the screen. The the basic data that is exposed by the api is just the title of the highlight: the the teams that are involved, uh the the actual videos, if you have one or many, uh the the highlights work in different differently in in the in the highlight world.

A

They are shown as a full highlight of the game, so you can see something like 10 to 15 minutes video, where everything is much more detailed or if you are much of you know, like action viewer, you can actually go and see. The highlight like show me the gold one or show me the goal three, so you can see each goal in in and you can pause and and forward as needed.

A

The api does not provide like thousands of videos at one time. As I said, these are actually live. Events that just happen are happening right now, so there are around 100 uh 9200 games that I was able to figure out. It's around 90 between 90 to 100. Videos are exposed through the api.

A

um Once you have the data available, you have a couple of options to display that you can develop everything by yourself. uh You can actually build uh the ui by for using your component, so you can have a video component that shows the the video and then you can have a video list component where you can bind your uh the video to the screen, or there was a second option where they are. You know the api is providing an add-in or a widget that you can easily embed into the page.

A

So initially, my development was mostly around building everything custom, but then I realized that the ui was much simple. It was there were not many options for me to to show, or it will take a lot of effort for me to as a starter, to actually build a great ui and- and that's where I actually dropped a question on the on the samples, github, repo and and thanks for hugos, who actually replying to me about something that was really fantastic.

A

So you can see on the screen that I use the film strip control that basically allows us to display that information in much much richer fashion, without worrying about any of the complexities behind how you you display the information. So I ended up just reading the data and using the the sample that was provided by hugo on his github repo and, of course, one of his great blog series about how you can start developing a great ui using sharepoint framework. I was able to get started right away when I started working from scratch.

A

I found that it would be hard for me. So again, I went back to the samples gallery found one of the one of the web part that was actually developed. I think it was a meeting uh web part that was developed some time ago and I looked at that code ran that sample and understood how those links, work and eventually was able to develop a pretty nice looking web part in the end.

A

So if you see that on the screen, it's actually a film strip that you can move right or left, and then you can also do uh the out of the box paging or you can do custom paging, uh the second mode that I initially developed. I, instead of just removing it. I left it there as a flat mode view.

A

So the flat word mode view is just a vertical view of the videos that you can scroll down very old way of viewing information, but still a valuable information, because I I found that the film strip definitely looks nicer, but when I saw that they have my kids have very small screens and their chromebooks, so they were not able to see them the way and they had to do full screen.

A

So what what feedback I got based on their testing is that that the the full view is or flat mode is definitely helpful because they can see the video without maximizing it. So I left it there and that flat screen is actually is using the custom paging, and I will have to go back and tell you that again, I did not created it from scratch. I started the the basic architecture of how paging worked, uh how you basically collect the data in an object, and you know slice it based on your paging.

A

Once I did the basic paging. I went back and found another sample on the sample gallery and I realized how it works. I made it some testing and eventually use the same idea and implement it in the web part so again, a great way of reusing the components that the community build and and develop it. So again, I if I had to build something for my work or something else. I can actually use the same samples. So let me just go ahead and show you how the the web part works.

A

So, if I switch over to my browser, uh but before I do that, let me show you quickly the the api output. So this is the api. The url is right in here I'll.

A

I will leave it in the in the slides, so you can see that there's a title and there's a url and thumbnail there's a date and then there are two sites that they played the competition name and video, and you can see that the video is actually highlight and in some of the cases the video will be highlight and then there will be a sub level where they will be have more videos available there. So you can actually plug them directly from your code. You can.

B

A

There is definitely a lot of a chance of improvement like the idea of having ability to search based on computation, maybe having a drop down. That shows all the unique computations. So it's something that I did for fun, so I didn't vent for it. But definitely anybody could do that because all the information is available in terms of the github repo. It was right here. This is the api. You can go there and search for github public dash apis, and you can see that there are lots of apis available.

A

You don't have to use the git hub api for your first web part that almost everybody use, so you can pick up any of the apis from here and then play with it, because every api works differently in terms of how you call it. So let's go back to the actual web part. So this is the page I just created. So let me add, a web part so again I'll search, click on plus and search for software and here's the web part.

A

So once I add the web part- and you know- I think I already had it at the web part on the page before so it automatically picked up all the properties. But let me just show you how it works. So if I click on the edit properties, the the first thing you will notice that I am using some of the spfx reusable components on the page other than the the film strip, uh which is the ui fabric.

A

But you can see on the right that I can have a title of the web part that will be visible on the screen. I have a paging uh slider, so I can just control how many videos I want to see, but this control is more applicable to the the flat mode. So if I enable the flat mode, you can see that this goes basically to the the standard full size, video which I'm using the full width of the available so zone. So you can change.

A

You can select that you know and and control how many videos you want to see. So you can set it to one or two, and then your pager will automatically show that. So let me show it back to set it back to the film strip mode and once you click publish, you can then see the the videos you can see that you can scroll to the right. The code base that I have is little older than the code base. uh That's on github, the github is a little bit newer. It has a you know.

A

Some ui issues were fixed and you can look at them when you click on the video, it will open a new window so that you can see in full fidelity, but you can see that if I come here, I'm not going to play manchester game. Definitely not I'm going to play barcelona, so you can see that when I click on play it's playing the video right now I can hear the audio is there, you might not be able to hear it, but it's basically full fidelity view you can click on full screen.

A

You know there are do have some icons there or links there that are displaying because of the widget, and you know using some cool logic. You can actually hide them if needed.

A

One great thing about this widget is that it actually shows you any available live games that are happening right now, so any free games that are happening will appear as green on the top, and, if you click on this link, it will take you to that video link and basically plays that live game as well. So it's also a great way of accessing those videos, and the paging, of course works for them as.

B

A

Showed before works on the more the the flat screen mode, so this is, you know nothing special here. If I just edit it one more time and show the flat mode, so you can see that I have the web part here. I can go to h2 and it will show me the the videos based on and I can scroll down and see the video and play it right away.

A

So it's basically high fidelity video though another thing that I've noticed that on on something like youtube, you find videos of the game that are very recently finished, but they are very low quality. But I found that this api provides all the videos in hd, so you can quickly watch the highlight and move on all right. So with that, let me jump into the the implementation of how I did that.

A

As I said before, this is just a starter code. Somebody who's learning and developing things for fun. The the web part, as I said, basically does use the the the spfx reusable controls. Like the title.

A

I can't believe I always start from scratch and try to do it myself, and then I realize that you can just drag the component or the placeholder inside and it will handle everything for you and then I'm also using the the web part title and the placeholder so that when the web part is dragged to the page, you can actually see a customize button and then you can click on customize it and it looks cool all right.

A

So you can see that the the the actual component that does the main the important job is happening right here in the sports highlight list. So the sports highlight list is the main component that handles all the data and and the display of the information.

A

So all I I do is on this page is: is basically pass the page size and the flat mode options that the user selects and then I go to the list and in the list you can see that if I'm zooming in a little bit, so you can see that it just received some of the initial parameters uh and through the through the props and then make a call to the api right here.

A

So again, as a starter, you can use fetch api or you can use xcs, I'm basically using it, because it's the code look much simpler and once you have the data you can I'm putting it in my in the web part state so that I don't have to. I can easily slice it and paste it once I have the the data ready, I'm actually passing it to the next component, which is the the component that displays the data. So there are two different ways that I'm showing it.

A

So you can see that I have the page items. The page items are actually the the smaller chunk of the the page. So if I say from video one to five th, there will be a loop to handle the cut of the pages, so you can see that I'm adding show showing the the buttons on the page and the same logic is used for displaying the the videos you can picture right here. So if the video is in flat mode, uh you can see that I am using the video list.

A

If the video is using not using flat mode, then I'm using the sports video list as a film strip view. So again, thanks to google uh for providing that component, I've just copy pasted it from the from the sample, and then I developed my own react component that actually showing that information.

A

So let me just wrap it up, so yes, so that you can see that chord is right here, that's to play the the film strip view. So go back, and that's all that I have again. If you have any questions you can put it on the chat and I'll be happy to help.

B

Excellent great job, terry uh related on that one and I'd like to know that uh it's not necessarily a business scenario but again, there's a lot of good cool, learnings related on react, components and status. Switching and all of that in that sample, as.

A