Microsoft 365 Community Microsoft Teams, 17 Jun 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building team time zone assistant Teams solution with SPFx v1.13, including Viva Connections Card

Description

During this 21-minute developer-focused demo, Julie Turner and Derek Cash-Peterson deliver a Team Time Clock app as a Teams app, Personal app and as a Viva Dashboard Card (SPFx web part + Adaptive Card extension) based on a solution originally created by Bob German (Microsoft) @bob1german. On Card, see high level information (people and time) and deep link into Teams to schedule meeting experience. Based on when people prefer to meet (green times), select time by aligning green fields in time slot. Full code walkthrough, many features. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on June 17, 2021.

Demo Presenters:
• Julie Turner (Sympraxis Consulting) | @jfj1997
• Derek Cash-Peterson (Sympraxis Consulting) | @spdcp

Supporting materials:
• Sample - SharePoint Framework Reference Samples | https://github.com/pnp/spfx-reference-scenarios
• Article - hTWOo v0.3.0 released – Teams Splash Cards, Placeholder and demo | https://n8d.at/htwoo-v0-3-0-release
• Tool - ABOUT HTWOO UI | http://my.n8d.at/hTWOo

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

So um we're going to be presenting a project that julie and I are working on. It's a team clock app, um so I'm derek cash peterson and I'm here with julie turner.

A

We work at some praxis consulting out of boston, and so the big question is: why did we build this application and the biggest reason for us was that working across time zones is really really hard, and you know we have tools like teams, and that makes it a lot easier, but in general, just sort of like navigating time zones and multiple locations across the globe is just very challenging.

A

We had two main goals with building this app. The first was that we wanted to know exactly what time it was for each member of my team so that I know if it's okay, I know whether or not somebody is you know it's dinner time for somebody or whether they haven't woken up yet, um and you know especially now that we we've all been remote for so long.

A

That line between work and home has been blurred, and so this helps us sort of work that out a little bit better and the second goal was to have the ability to figure out what time is least horrible for everybody, especially when you need to schedule meetings around the globe. I work with a team in japan and I work with a team in europe and I'm in the east coast in the us and so trying to navigate those multiple time zones is pretty challenging all right.

A

So that's the it for the slides, we're going to run right into a demo. We've gone and we've built this as both a teams app and a personal app. So I'm going to start here with the teams app and when you load the application, it automatically pulls in everybody who is a member of the team and and gives you a visual representation of where they are in the world and what time it is for them. So you can see over here.

A

We've got jamie in alaska and it's 6 34 in the morning for them, uh and we've got uh carter over in tokyo and it's 11. Yeah it's 11 35 in tokyo, and so we've grouped each person here uh based on their time zone or what time it is for them. So they may not necessarily be in the exact same time zone, but they it's that's the same time for them, based on the offset we've, also provided sort of a handy, visual indicator that you know for ken in chicago and mike and dublin it's.

A

This is our our day time and whereas we've got carter and alex it's night time for them and it's early morning evening for jamie over in alaska. So it's a really easy way for you to visually see what time is it for folks?

A

So this works for both internal and external users, so we needed to provide a way to manage the different members of of the application. So we have a manage world clock members and from here if this was a super large team, you could come in here and you could search for a user and it sort of just comes up and pulls it all. This is a manageable list.

A

We've built it so that you can come in and especially for external users, you can actually set the time zone for them, so say they're, not in teams all the time you can come in and I can set mike's time zone to his his time zone in dublin or I can, if I'm traveling, I'm in the new york times zone right now, and I can go ahead and like if I'm going to go to chicago next week.

A

I can change this to chicago so that when folks come in and they look they'll know I'm in chicago and that's what time it is and because this is a team app and we sort of make an assumption that teams are more project based. We also provide the ability to specify which times I'm working on this project, so you can see next to my name. I've got a little profile icon and so say it for this project. I work on it monday, wednesday and friday.

A

We've got the entire grid laid out red being times that you're, not working, yellow being times that you might be able to work on this project occasionally and green is your sort of standard working hours. So, if I was working on this monday, wednesday and friday, I could completely block out in red, tuesdays and thursdays, and this gives you the ability to sort of customize.

A

You know based on maybe you're working with a team in asia and you flex your hours. So maybe you work from 4 am to later in the afternoon and you're you're done at 2pm your time. So it really provides a level of flexibility here.

A

We also give the ability to create views now, like I said this is 10 users. So it's no! You know it's it's easily adjustable, but what if I wanted to create a list of users that were say just the ux folks, so I can come in and I can create a new view called ux members and I'm going to add, alex derek and stefan and I'm going to click save and now you can see it filters down directly to that.

A

Those three people, one thing to know is that there's no security trimming on these, so you know don't create a view called people I don't like, um but I'm going to switch back to the default view so that I can see everybody and so that sort of covers the first item there, which is how do I know what time it is? The second goal was: how do I schedule meetings?

A

Well, I need to schedule a meeting today with ken julie and mike and myself, and so there's a little person icon next to every name and you click the person icon and then it goes through, and it looks at that schedule like the one that I just showed for me and it bases it on their time zone and tries to find the times that work best for everybody, and you can notice that if you sort of click through here, you can scroll through based on the different days, and it looks to me like across the four of us.

A

You know, we've got 10 and 11 is the reasonable time. If I hover over this box, I can see it's going to be 9 o'clock for ken it's going to be 3 o'clock in the afternoon for mike, so this works out. So I can click 10 the schedule meeting button lights up and then I can actually click on it, and it brings me over to a deep link into schedule. The meeting in teams- one thing to note is that external users, mike is an external user. It does not.

A

We don't have the ability to add them directly to the invite line, so we added them to the body and you can actually copy and paste and just add them in okay.

A

So that is the team app, and we also created this as a personal app. The personal app works the same as the team, app with the exception that it pulls your users, the users that you're most closely interacted with via the graph, as well as your contacts from your outlook. So this is the personal app and you can see. We've got a few different users here. These are pulling some folks that are, in my contacts like I said, the biggest difference here with this one.

A

Is that it because it's a personal app it pulls folks that you are connected to via the graph and also folks can't um they don't have the ability to edit your personal app. So you can actually set their time zones and their profile themselves. So we've got stefan here and I know he's in vienna, so I can actu. I can set his time zone here um and I can also set his working hours here as well, uh because obviously folks can't do that.

A

I can also go into azure id and, I can add a new member and I can search for jane, say I got a new. um You know a new employee, I'm a manager and I got a new employee. They got added. So I can click. The add button and now jane is part of my team and I can adjust and put this together as well. So I can set her to melbourne she's in melbourne and I click save and now this will update and put her in the appropriate spot.

A

This refreshes periodically, so you don't actually need to refresh the page she'll, just pop up um and again same functionality. You know, if I'm a manager I can select director. I can create a view of my direct reports and I can try to schedule a meeting with all of those people, so I can come in and I can go like this and go wow. There's really not a good, a good time between all of these people and all of these time zones. um So I can look, and I can say well.

A

5 am for me is really bad, um and so I can sort of start talking to people and see whether or not it makes the most sense or maybe jane doesn't attend the meeting. And then we've got a little bit more. No, we don't a little bit more wiggle room, um and so that's the personal app julie did. I miss anything.

B

No, I think you did fine all right.

A

And now please sure yeah.

B

Let me quickly share my screen. Okay, so let me see, are we sharing? I've got red, everybody can see, okay, so I'm showing uh the viva dashboard, and so again this is preview code using the 1.13 beta 5 review, release of the viva connections. Preview, that's out for some users that are in the preview, uh and so what I've done here is built a dashboard card for that world. Clock app. So this world clock app is only gonna. This viva dashboard item is only gonna show personal information.

B

So what it does is when you click on the card itself, then it's going to deep link into teams and when you come into teams, I'm going to just use the web client because it's easier, it's going to take me right to the world clock app and then what I can do is I have this added button that says view team and when I click the view team button, then I get all the members of my different views. So if I had three views, I have a family view here.

B

I have my friends view and you can see that it shows um all the people that are in that view, what time it is for them and the addition of whether it's day or night, with that cool little sun, slash uh moon type of uh icon and then the last piece of functionality is we have on each one of these cards this schedule a meeting button.

B

So when I click the schedule meeting button that does a deep link passing in the view id so that when we come into the world clock app, we get right into that view that I clicked on and now we can go through the process of scheduling a meeting uh and picking a time that works for that team. So visually that's what the uh this personal app. So it does so now.

B

Let me um let me do the code review and hopefully I can get through this in in some quickness, so we've got in our our sharepoint framework solution. We've got two sections here: we've got the web part for the world clock and in that uh section there we have all the services and everything we needed to make, that world clock app work, um and then we have the new edition of the adaptive card extension.

B

So if we go into the adaptive card extension folder, we can see that we have all the code to manage that and so we're going to start by going into the teen time zone, adaptive card and so we'll have it on init function, and we have this in our web part as well, that we use as the teams tab or the personal app. So we do need to configure things.

B

So we register the cards that we're going to use the card itself and the quick view um with some initialization for the pmp logging and to set up pmpjs, and then we also have there on lines: 49 and 50, where we're initializing our world clock service and so that passes in all the information it needs. We are using the personal app version, so it's going to initialize it for that, and then it's going to set the state of the dashboard app. So we have the current config. So that's that can that blob of json?

B

That is the configuration for the personal uh app. So it's all that information about that. What our default view is and then the base teams url for the deep linking for the the teams, and so then now, if we go and look at that card view, the card view is super simple.

B

In this example, um it's really just specifying the card view, so we don't have to specify a template because that we've picked which template we want and in this case we're going to use the basic uh card view, but we do need to pass in the data that we're going to use. And again this is pretty hard-coded. We just have a string for the pri, the title and a string for the primary text that icon property is set to this icon, black and white, which is an import from a file in our assets.

B

If we look at this image.ts, we can see that we defined the image in there and that's passing it back into the card view, so it loads the the nice little image of the black and white logo for the solution. Now. The more interesting piece of this is in the quick view.

B

So if we come into the quick view- and we zoom in here on the code, what is really happening here same as the card view, but for the quick view we have to specify our template or we want to specify our template and we want to specify our data. So the two are going to merge together um and then uh all the places where in our template we have data placeholders. The data will then merge together. So it's exactly like a mail merge in word.

B

To be honest, so we've got our data function here and in our data function um at first. Well, let me see if I can use my laser pointer here, so we've got our laser pointer here and so we're going to get the view which is going to get the remember. I set this current config on the state and so we're going to get the views and the current based on the current view, we're going to get that view.

B

So now we have that view and we're going to look at all the members in the view and we're going to then create the data set. The way the template will understand, so we're going to walk through each member and figure out what their current time is. So that line right here line 53 is going to go, get the current time based on their time zone.

B

I'm going to show you that function in just a second and add them to this members list and then last but not least, it's going to set up the url for the deep linking so it takes that base url and adds this sub entity id with the view id so that it can deep link into teams and the world clock web part that is in the teams tab or in the personal app knows how to unravel that sub entity id to load us right into the right view.

B

So that's going to load into that and then this is the get time function and so each member, if you notice, when derek, was doing his demo has a time zone, and so when we want to get the time for a member we're going to look at what their time zone is and then get their time and then based on what hour of the day it is we're going to set a property to whether it's day or night for them.

B

So once we have that information, then when we render the card using the template and here's the template, um we can uh show uh that nice little icon one way or the other. Now, I'm I'm gonna just quickly run through this. So we have this header here. This column set is the header and you can see this first column section here uh lines 14 through like 22. This is the previous button.

B

So that's that back arrow that scrolls, through the view we have the previous and then as we scroll down, we have the title block and then we have the other section, which is the next button. So that's that header right there and then we have another container that shows uh it is going to be uh an array of items based on the members object, so line 64 right at the top there.

B

You can see it's looking at the members uh uh piece of our data, that is an array of members, and so then it's going to put on the display name and the current time. And if I scroll down here a little bit more based on which icon, if they're day or night, it's got a a nice url to an image so that it knows which icon to put and then last but not least, we have that schedule meeting button down at the bottom.

B

That's going to have the url for the deep link to schedule a meeting. So let's come back quickly into the quick view and scroll down and look at that on action. So this is the this is where the the previous and next buttons at work.

B

So when we come in here we're going to check the action type and then if the auction is the previous button, then I'm going to go find the view that was previous in the list and I'm going to set up the new view id and then I set the state on line 81 and when you set the state on line 81, what it does is re-merge the template with the data refreshes, the data and you get uh a new merged card, and so that's how it changes.

B

What it looks like it's it's the same as a render method in yeah. So then we have the next and that does the same thing all right, and so that's all my code and.

C

Julie, um I know that you've you've been scripting this and everything give me go back on the uh on the on the json uh structure and just to go back on the json file, where you showed the cars and just to kind of explain for those who are not familiar yet on the private preview and that this is the basically the adaptive card, rendering mechanism of the card, so whatever you're seeing in the card is basically adaptive card, but yeah. You can then react on those things in spfx.

C

Is that the right way of saying that.

B

Yeah, so what you're talking about is the template? Can you see that I just scrolled it into view um so you're saying that in the template right? So this is our header here. This column set right here and these columns. So that was our header in the members section here. This members is the thing that gets the data from the data structure in here so over here I said that I was going to have um members right in our data structure and I'm going to set that in our return value.

B

So I'm returning from our data, the quick view, data and the interface for that is the title, the url and the members. So the this data structure is what is passed into that template, and so, if we go back to the template, whoops sorry wrong button. If we go back into the template this string, uh this format here says which data object I want to use to render into this template. Is that what you're asking.

C

Yeah and given the timelines and everything else I'm going to skip my demo, the the real live demo, I'm going to talk about that in a few minutes. But can we can you go back still on the solution and show the cart one more time? And let's, let's talk about that, a bit just to educate everybody in this call. So first of all, viva connections uh is gonna, go to uh preview later this year uh in summer or autumn time frame, um but from a ux perspective, starting from the 1.13.

C

You can already start building these cards, uh which we'll see in a second.

B

Yep hold on. Let me just pull it back over I'm reloading my page, so.

C

There and basically these are then those cards which are in the viva connection mobile. So you as a as a customer or as a partner, you can build a mobile experience.

C

A native mobile rendered experience, which will be super fast render efficiently, where you can implement using spfx and this card models, and obviously it doesn't look precisely like this when you're rendering that in a mobile experience- and we will show all of that gradually new demos and if you saw the demo from the last time on the sharepoint framework, uh sharepoint framework community called potentially well. We have shown some of the demos related on how this renders in the in the mobile areas as well yeah.

C

But this is basic idea here is that you will have the vivo connection application where we have different kind of cards. People can design their experience and then individual card behind of individual cards there's an application, an experience, but you can quickly, for example, check like in this case this application. You can use that to check.

C

What's the time zones of my team and my my closest to working colleagues, and then, if needed, you can go directly deep linking to the application so in the mobile device as well, and that's where we are kind of a heading with the vivo connection, mobile experiences as well, so really really cool stuff.

C

From that perspective, now we are, we have two minutes, so I'm gonna steal back. Thank you. Thank you for that demo, really really cool stuff, julie and.

A