Microsoft 365 Community Community Demos, 23 Apr 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: COVID Information Web Part

Description

In this 8-minute developer focused demo, Robin Agten calls an open source API to pull country specific COVID data points assembled by Johns Hopkins University, into the COVID Info web part. 3 data points (Confirmed Cases, Deaths, Recovered) are collected by country, by time period and rendered in a table and graph. There is only one mandatory configuration requirement - enter the iso2 country code. Conditional coloring of data optional. The Data is pulled into the web part via the Corona component. The web part uses PnP React Controls. Office UI fabric is used in the component. This demo is extracted from the bi-weekly PnP community - SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded April 23, 2020.

Presenter: Robin Agten (Delaware) | @AgtenRobin

Supporting materials:
• COVID 19 information web part | https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-covid19-info
• COVID-19 SPFx information web part | https://digitalworkplace365.wordpress.com/2020/03/21/covid-19-spfx-information-web-part/

All Microsoft 365 & SharePoint Community - PnP demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/m365pnp

A

Everybody I hope everybody is doing well and these uncertain times and that everybody staying safe. So my name is Robin octa and I'm an office 365 and I just developer at Delaware.

A

You can find my contact information here on the screen if you want to get in touch later, so I'll be giving a short demo about a covert 19s plx information map box that I built I'll, give a short demo and I also explain some of the key features in the code to the goal of this webpart was to inform the users of my internet about the corona situation for a specific country. So I'd give some specific statistics and you also have the option to view an historical evolution.

A

The data is coming from an open source API, which is used which uses data from the from the Johns Hopkins University.

A

So let me dive into the demo, so I have a demo site collection here and my web part so I have the PNP usable control used to configure my web part, there's only one mandatory property, which is the ISO to country code. If you do a quick, Google search from the ISO to country code, you can easily find them. I use this code because it's also the code that is expected by the API. So, if I put in, for example,.

A

See who's that there's a demo issue going on here and there's no data available anyway, you can put in needed to let us code of your country. We also have some other configuration properties like history button. If you, you know enable this one I'll show it on the slide. Again, you get this icon here which allows you to see an overview, an historical overview in a graph form.

A

We can provide an optional link to view more statistics. Let me try and see if we can get some data or if we really have an issue.

A

Let me try and find all right webparts, so I can show you the actual data shown in the screenshot, so you have an example of the live data.

A

So you see we have some up counters, which dynamically count up and you can configure these accounts also using the configuration slider so key and the file in seconds how long it takes for the up counters and then we also have a property pain who use book control from the PMP initiative to let you choose different colors for the three different statistics, so you can see for the three different statistics. We have some different colors.

A

You can define them also in the web, part properties.

A

So then, let's get into the code. So we have the basic scaffolding on our SPF X project with a main map box file.

A

As you can see in the end box, we use the usable controls for the property field, colors packet, which is a very nice tool to let you pick colors on your web of properties, properties and then in our component itself.

A

We use a lot of stuff from the office, ey fabric library, so model icon, buttons and stuff like that, and also we have the place all the control from that a PNP has B of X reusable react controls.

A

So when the component is loaded, we will actually load the data from the open source API, which I've added into a corona service in here. So you can see the URL of this API in here we have two endpoints that we use, one is for the latest. We actually get the latest statistics of a specific day and you also have one endpoint for the time series which gives us an array of all the historical data for a specific country.

A

We use this HTTP client.

B

Sorry sorry Robin consume slightly. It is really really also never histories. Everybody has four 4k screens. Nowadays, it's better it's better or if you can go one more step. That would be better.

A

Yeah sure excellent, thank you so, like I was saying I'm using this HTTP client provided by the SPX framework, it's very easy to let you create third party API tools, so just using this line and this endpoint, you will get a results from the from the API which we can then show in our web part and so going back to the box.

A

We use this count up control, which is an open source package provided on NPM, which says that she'd be funnin and number and duration. How long it takes to do this up count.

A

The big thing we have in here is the model. So let me try to show you here so if we click on this historic I, can we get a model where we can show graphs?

A

So with that icon? You can get this model open where we can show cross for the specific statistics, so we have a model from the opposite of Qi library, and the model itself is more or less the same. We also need use a pivot control to have different tops for the different statistics and we use this is it's the heat source library, which is a very, very cool library which that you easily implement custom graphs and your application.

A

So that's basically a very high-level overview of what component boss, it's too bad that it's not working. Maybe there's an issue with the with the API, because I'm not getting any data batch.

A

But anyway, if you go to the blog post, you you can see it working in action. That's it for me. Thank.

B

You very much Robin for that. A very cool thing, obviously, a very timely demo on kind of the stuff, the data we can kind of show around. What's going on in the world and very cool as well, of course, to see the code and get you know another perspective on just how to how to build these web parts and how to see usage for all those reasonable controls, so a really fantastic sample and demo. Thank you. So much for that.