Microsoft 365 Community SharePoint, 5 Nov 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Implementing a World Clocks web part with SharePoint Framework

Description

In this 19-minute Developer - focused demo, Jerry Yasir steps through a sample that extends the single World time clock sample to include multiple clocks. Analog clock faces change color by time indicating day, evening, night. Clocks and values for multiple locations are stored in the SharePoint list. Time is calculated using a custom formula. Leverages reusable controls – React Analog Clock and React Clock (digital). Uses PnPjs today, Microsoft Graph in future. Order clocks and toggle to render on-page. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on November 5, 2020.

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

Supporting materials:
• Repo - World Clocks Web Part | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-world-clocks
• NPM - React-Clock | https://www.npmjs.com/package/react-clock
• NPM - Analog-React-clock | https://www.npmjs.com/package/analog-clock-react
• PnP Library - PnPjs | https://pnp.github.io/pnpjs/

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 and welcome everyone. My name is jerry asser and I'm a microsoft mvp for office apps and services. First thing: I want to acknowledge that I've been mvp for a few years, and this is my first demo at pmp and something that's not part of my main job. So um you know it's something that I want to admit before anybody actually catch something in my code. So um I am I'm not office. 365 architect. I don't do development as full time or something like that.

A

It's all learning that I did through a pnp with stuff and and some other uh you know all the training that's available on the pnp uh github sites. So um I took look at some of the samples and I decided to build something that I was working on.

A

So this is the pnp world clock web part uh that I, uh the idea came from the pn, the the office, the sharepoint online uh world time web part, but the idea was to actually develop it to make it reusable so that we don't have to add it to every page and start writing the location company so giving you the some of the uh the. So in this next 15 minutes or so we'll be looking at the overview of the web part and then looking at the demo and the code, so it will be quick.

A

I would not be taking a lot of time, um so the behind the scenes uh for storage of the the blocks, the we use the sharepoint list and the sharepoint list is very basic list with the title of the location and the gmt value, which is in the positive or negative gmt or utc time. uh You can enter that time.

A

uh Additionally, you can also your your web part uh or your clocks, usually setting the order of the value very traditional, uh the uh once you do that you can also set those clocks to active or inactive. So when you uh display those web parts on the page, only the active one will appear on the page. uh Additionally, the the web part is responsive.

A

So if you put it in a smaller zone or a smaller section, it will automatically resize itself to the appropriate size for the for the formula for the date time, calculation is done using a custom formula. We are not using I'm not using any uh of the uh dst time zone calculation fee values. At this moment it was my first though there were some examples that you can use to check. If the current time zone has a dst and then it will apply the updates automatically.

A

uh This version does not have that for reading sharepoint uh data. We are using pnps. It was simple at that time. uh First learning so I thought that's a best option to have the the two types of clocks that the web part uses are the analog clock uh or analyze lock both are available on github. They are free to use. So I I picked them uh instead of creating everything from scratch, and I think I will not be able to create them anyway.

A

uh So, uh let's quickly jump into the demo switch to my sharepoint site. So you can see that I have the uh web parts added to the home page. um I was playing with it. So let me add it to screen, and you can see that I have uh the web part is right here you can edit the properties of the web part you can enter the title of the web part. Then you have to select the list. So I'm using the list selection.

A

uh You know property pane from spfx, so to select the list and you can set up three different type of properties. You can allow the web part to have time so right now you can see that the time is set to off and if you turn on the time it will actually show you the time in the digital format, which is the live clock time, and you can also show active or inactive clocks. So if I turn it off right now, I have only um all of them active.

A

Maybe one of them not so um show title is also a section. I can actually turn it off if I like to actually not show any title. So that's the simple web part um more. If you, if I go and customize the section you can see that will automatically expand and take the full space. If I publish the page, you can see that the the web part will move on on the full space. Additionally, if you see that the web part also has um each clock has a different, uh you can say theme.

A

uh The theme is predefined in the webpart code, so the based on the time of the the of the day, the web part will show a different color. You can see that the white is uh new york, so it's a morning time, so it will show a small tooltip and it's having a great day uh if it's the evening so you'll see that the the gray or light gray color will be used and it's in the night it will use a light, uh a dark uh black color.

A

So this is the the basic vapor theme. uh The web part uh analog clock will automatically update uh the at this moment. I'm not showing ticks on it, so that you know it's basically very annoying when all the ticks are moving at the same time. So seconds is not visible on the screen. That's why I've hidden it. But if you want to take a look at the the list behind the scene, you can see that this is the list you can see.

A

We have all the locations defined and we can set those active or inactive or set the order and the gmt values are right here.

A

So before we move on to the next one, let's typically take a look at the code, so I must admit this will be a very basic code. For many of you have been developing uh react-based applications. It was my first so um excuse me for anything um that you feel funny in it. So the the web part uses a few properties.

A

You can see that some some properties like selected list that are visible on the screen, uh lower location, is the the method that is used to get values from the up from the list using pnpjs. um The web part is very simple query. Using get list items command, you can also have the show active, only or show title properties uh in to display those properties. I'm using the property field list, picker uh simple, it's straightforward, um just configure some of the basic values or maybe um in in reality.

A

I went to the samples and looked at some of the samples, and I was able to understand how easily easy it was to actually implement that um for the show time I'm using the the property pane toggle simple again. This is not a training, so um very basic stuff, that's in the web part, but in the implementation, um I've the implementation is done basically and the most of the stuff is in the componented mount.

A

uh The clocks are actually a clocks collection, sorry, uh the uh so, when I get all the items from the locations I loop on each and every one of them, and I mentioned that this is using a custom formula to calculate the date time. So this is where this happens.

A

This is where we are getting the the time it's actually a custom formula available on the internet, so you based on those values of the gmt, you calculate the the date of the time value and I'm using moment.js to actually making sure that I have the correct time and once I have the time I calculate the the basic time of the day value um and add that string logic. This could have been done a little bit better, but I I felt just for fun.

A

It will look nicer to have this kind of a message, so it checks. If the time is you know from four to like six p.m. It's a day and then, if it's a, you know a little bit later it's evening and then later rest is night um once it's done. Basically, I'm pushing all those the string um values that I'm still collecting, uh including the clock.

A

So you can see that I have an analog clock and analog log is basically that the whole clock visible on the screen and if the user choose to show time, then I'm using the simple clock which is actually uh the react live clock that you can use I'll. Show you the demo of those clocks pretty very quickly.

A

So once uh you you, the loop is finished in the end, I'm adding those blocks in the clock, selection and you can see I'm adding them to the state and then below in the in the render component uh run method, I'm actually just displaying them in the container div. So, for me this was the very first web part, so I used as much as knowledge as I can from the existing samples and from my learning and eventually it worked, but then more I studied.

A

I found that this may not be the right way of doing it, but I'll talk about it in in a second, but before I move on to the next one, I want to go back to the browser and show you the both the clocks that I'm using so you can see. This is the analog clock and it's actually pretty cool. You can see that the theme is done using json, so you can actually design different themes and then implement them in the web part. Whatever you like, it's all customizable.

A

The other clock is the react, live clock which is a digital clock, so you can see there are some so so many examples there um for the format and the time zone you can set them manually or you can set them through the web part.

A

Now, before I close, let me jump back to the slides, so the uh as I said that the initial implementation of the web part was not that great, it's all, looping and and defining the component, so I'm working on the second release of the web part the the first update I'm doing there is that I'm not allowing the user to enter the time uh or gmt values, uh as is like, plus five or minus five. Rather, the list will have all the predefined um globally identified time zones.

A

So you will be selecting a gmt plus five. uh You know for us or uh eastern time and and other time zones. uh Then it will also already automatically detect the daylight savings.

A

If, if the location has a dst on it will automatically update the the time the whole implementation will be done using react components so that we don't have that in the render and in the in the component, bit mount an option that I'm trying to implement that we, the web part, will provide you an option to either use pnpjs or microsoft graph so that, let's say you have a single list in the in the root sharepoint online site, and you want to use it everywhere else in all the site collections that you have so that way, microsoft graph will be powerful because you will add the web part and choose that I'm going to use microsoft graph, and this way you will be able to select the reusable list from the root site collection you can.

A

Then this will also allow you to add the same web part as a tab in microsoft teams which will make it a lot more reusable than it is right now. uh The final is the. uh There is one minor issue that I um you know because I was not showing the the time on the web part, uh but if you, if you notice that the time does not tick, so I think that's something that you can consider as uh not having enough skill set in react.

A

So I was trying to fix it so that when, uh when the time is added on the page, the the web part moves or the time moves to the with the second. So you can see that right now the show time come back, but it doesn't move it just sticks to, as is so that's part of the next release, I'm working on it based on the available time, but hopefully um you know very soon. I will be able to push it back to the samples and last you know, teams is everywhere.

A

So, of course, uh I will add the implementation of the web part too, so that it can be added to teams as well. um That's all that I have I've added the slides for the referee. What I use in this web part, um I will be happy to answer any questions on on the samples or in the chat. Thank you very much.

B

Patrick and cherry, don't don't stop yet because we do have some time. I just wanted to, let's reiterate some of the things so, first of all, cherry awesome jobs, and this is really really great, um like a learning exercise on using individual packages here and there and then combining them, and and it's good that you have that kind of a hey, the next steps. I will learn these things and that's a great way of absolutely learning things. So don't and don't feel too bad about hey.

B

This isn't necessarily the right way of doing implementing things, but hey it works um in the end. That's all that that matters right, so you we can always improve the code uh um into the as much as we want. So that's a separate discussion. Can we go back on the code? uh So? Can we can we briefly go back on the code because you jerry been joining on this community course, but every now and then we have obviously also new people here um so calling out, for example, that the web part title and a placeholder.

B

These two controls are both coming from the react controls. So the bmp spfx react controls. So if you go all the way up, can you show the package just making sure that everybody is aware of this because you don't have to implement these things? These are super widely used across the world by third party and developers directly from the bmp spfx controls. So those are really really great. uh Reusable controls for everybody and same applies actually for the property, pain controls right.

B

So absolutely if we go to the property pane and just scrolling up again just showing the package name, because that that's a good reference for finding then additional information because and that's a property pain. You didn't use bmp property bank controls here on. Did you you? No, you didn't no.

A

I did not, I thought it was. I didn't looked at it as much as I wanted, but um I just took the the sample that I use as a like. A learning step had these implemented, so I thought it's using, but definitely in the in the next implementation I'll be using the pnp one.

B

Yeah, absolutely just just sort of curiosity: where do you actually get the list of lists from the site? So that means that you have the code piece for that one in here right, I'm sorry, the list of lists list of lists. You had a list in the drop down. Oh yes, it's right here and that's to get locations. Yeah.

A

So exactly so, it's right here, yeah! So yes, speaker, yeah,.

B

And this calls the the operation where no, this is property field list speaker- and this is this- is not out of the box control. Isn't it.

A

I think this is really yeah. Do.

B

We have the effects property listed. That's what I'm actually looking for.

A

Yeah so exactly.

B

So it is a pmp spf, x control, so again, open source community contributed control for people to take advantage. That's what I was looking for so now, just out of curiosity, uh how hard was it for you to actually make all of those things happen, just if there's new people in the game in this call, who are being told that you need to implement stuff in spfx? How hard was it and and what any any other learnings just to recap your learnings on this journey.

B

A

The the the overall design I have been, I had developed applications for sharepoint for a long time, but mostly the web parts old style web parts. This was different because I had to make sure that I learned the react pieces of it nicely. You know it was not simple as just dragging the button and clicking on it and getting it done. uh I I think I struggled in the mostly in the properties implementation first, but once I get away from that, I you know I was mostly thinking the classic development.

A

Where, oh you know, when there's a method called property change, I have to have a method called on property field change. So I was thinking more on that, but then I realized that these are kind of the overall out of the box, implementations which I don't have to worry about.

A

If I bring I, if I configure my properties nicely and then I know that, for me, the most important method is the selected list where I have or the selected list where I know that when the user is selecting the properties from the from the property pane they're actually selected in the in the in the in the property. Now I can play with that property when the property change, I don't have to worry about implementing that on property chain method.

A

So when that uh challenge was away, the next was, of course, what is the best way to render the components and- and it was not about uh the hard you know if spfx part was pretty okay. You know I was able to understand how, to uh you know, write in the code nicely and make it run, but once that part was done the pieces were you know what is the best way of rendering um should I render it as component? Should I render as a code?

A

So initially I did just rendering directly, as I would say, a gsx.

B

Yeah and that's obviously, this that part is, is always debatable. So of course, if you are a academically, you want to do academically correct react, then you create components and not inline code, but again it's it's the in the end, the react components are being rendered as an html to the browser, as well so they're being transformed to html. So it's not a really a I wouldn't charge anybody for doing both so but again depends on the coding standards and approach and and and all of that so but really cool. Thank you. Cherry for this.

A

One just one comment I want to have that I didn't find: um maybe we can work on it, so you know I should work on it, but I didn't find a place where I can have this like a full, uh step-by-step process to actually develop something. I I know everything is there lots of stuff is there, but I I couldn't find one way of implementing.

A

uh Let's say how to read the the the list collection and then from the list collection. How to make. You know, select the list and get the items and then show them in the web part. There are lots of samples out there, but the problem is every sample is using its own technique. There's no one way of doing it.

A

Somebody's using you know eye collection, somebody's using arraylist somebody using different methods, so that made it really hard for me initially to uh to make pick one and easy and and most feasible method of reading those values.

B

Yeah yeah absolutely makes sense and- and I think, even on our samples and tutorials, I think we should slightly more focused on the react and and really do an end-to-end story with react and office ui fabric or fluent controls, because that that's anyway, the direction where we're heading and and for those who are like wondering why react well. Microsoft has chosen react as the framework. Technically you can use angular, but most of the reusable controls are available in the react. So that's what, if you can choose react for spfx so awesome.

B

Thank you very much yep. Thank you, cherry for that.

A