Microsoft 365 Community Microsoft Teams, 15 Jul 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building a COVID attestation solution for Microsoft Teams and Viva Connections with SPFx

Description

Through this 26-minute developer-focused demo, Julie Turner and Derek Cash-Peterson walks viewers through a personal app that collects information from users and provides a custom dashboard for working with the results. Dashboard has a Viva Connection COVID-19 attestation card built with Adaptive Card Extensions (ACE) and SPFx v1.13. From Card View, users answer attestation questions in Quick View. A cool capability - questions on Quick View card can be updated by Admin without having to modify Quick View template! This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on July 15, 2021.

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

Supporting content:
• Sample - SharePoint Framework Reference Samples | https://github.com/pnp/spfx-reference-scenarios

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

We're going to present today an application that we built to do covet attestations so for when you, you know, sort of go into your doctor's office or, if you're, going back into the office, so we'll be showing that example for you today, I'm derek cash peterson, I'm presenting today with julie turner.

A

We both work at some praxis, consulting in boston, and so the first question really is: why did we go ahead and build this um and the the story here is: we've all sort of seen this over the last year and a half through covid that you know that you know folks are asking for information when you go to the doctor's office or when you go, you know to drop your kid off at school, or what have you um and they're asking questions about you know. Have you been exposed?

A

What is your potential risk profile so as as companies and countries are starting to open their offices back up, we wanted to provide a way through teams to allow that to happen. We wanted to be able to track who's in the office at any given time, and we also wanted to provide a way for administrators or hr folks or human resources, folks to notify people if they've potentially been exposed. So it's that contact tracing piece.

A

So what we did was we built a team's personal, app that sits inside on the rail and if it's not there by default, you can just go in and click the button. Now for your every you know your average user um they're going to log in and they'll only see self check-in and we've created these questions, so they can come in and they can select say what office they're in you know. We've got japan, we've got boston, so you know they say whether or not they've had a fever. What is their temperature?

A

These are all configurable and I'll. Show that in a couple of minutes, um sort of generic coveted, related symptom questions and then, when they're done, they save the response and they can submit this once a day and at this point their job is done. um This person is, is at home, they're, getting ready to go into the office, so they fill out the form and when they're done, they click submit and then they're on their way they can go to the office.

A

Now. For me, I'm at the front desk and I can see whoever is in the office. I can see all the folks here that have checked in or in the process of checking it. So we built this dashboard. It lets you flick through the different dates, so you can see the different people's names on the left.

A

You can see what office that they've decided to check into.

A

You can also see the date and the time that they've submitted their form and the green indicates whether or not they've checked into the office or not, and then the check-in time that they've checked in at the office. So you can see thor ironsides.

A

um His is the person that just checked in he hasn't checked in yet so he came to the office. I'm going to check him in I'm going to review all of these details with him. What he submitted in that form. There's no uh real personal information in here, so we didn't sort of you know, there's not really hipaa or in the u.s requirements there. So the front desk person can just go ahead and check them in and say. Okay, these all look good.

A

You know maybe ask them to verify that.

A

And then they can check the user into the office, and at this point now it's assumed that they, you know, go to their office, go to their meeting whatever it is. They have to do so because they're at the front desk, the front desk person also has the ability to check in themselves, but they also have the ability to check in a guest so say: there's a guest here to see thor.

A

You know the front desk person can now come in. They can enter that name, they can enter the location and they can fill out the form. On behalf of that person.

A

Now one thing that's a little bit different is that, because this is a guest user and I just ran through this verbally with the guest user, we check them in automatically. So there's no, you know, there's no question because we just ran through it. We don't need to double check everything with them. The other thing that you'll notice is that in the icons on the left hand side, if any of these people were online, their presence would be notified here. So they would have the you know.

A

The teams, whatever the whatever the appropriate color, is red, yellow, green whatever for for teens.

A

So that's the that's the experience for, say the front desk person, but now what? If you are an hr person and you need to notify potential employees of a of a possible exposure by default. This shows the past. You know two weeks, there's search capabilities that lets. You filter this down uh to a specific set of days and you can search by days you can search by hour, I mean by office. So you can check.

A

You know just the folks that have logged uh registered into the boston office and you can also check by person as well.

A

So in this instance we're going to check and see you know what I was doing and you know I was in the tokyo office on the 9th. So if there was a potential exposure there from me, there was nobody else who had registered obviously in the tokyo office that day, because it was closed.

A

But if we look at someone like carter, carter was in the boston office, and so now you can see all of these people were in the boston office at the same time as me, so there's the ability to go in and contact those folks and let them know that they might have possibly been exposed.

A

We also wanted to make you able to administer this through teams as well, so there's a sharepoint backend for this and we're surfacing a list of locations.

A

So you can come in here and we can add a new location, so we're going to add one for chicago in illinois, and this is just a sharepoint text field, so you can just you can name it whatever naming convention you want to use and we also provide the ability to customize those questions.

A

So this is a sharepoint list and if we want to add a new question.

A

We click the new button.

A

And we enter in the title for the question now the way we built this this supports either yes or no questions or text based questions. So if you saw in the original form they were either radio buttons or it was like a an open text field for enter your temperature.

A

um We also support the ability to you know, reorder the questions, so this one's going to be order, 800, which is at the end of the list- and you can edit these just right inside of teams now, if the user goes in and the next person that comes in to register to say the front desk person is registering a guest you'll notice that, at the end of the page, you'll see the question that I just added and now the office is in there as well, and so all of this sits inside a teams app a team's personal app.

A

Now we also built an ace uh for you know uh for the adaptive card extensions and for that I'm gonna hand that, over to julie.

B

Cool, thank you, derek okay. So so now what we're gonna show is the uh the ace as as dare pointed out, the adaptive card extension that we can build with the sharepoint framework 1.13, which vasa covered at the beginning when he was talking about the sharepoint framework updates.

B

So we went ahead and built an ace for the covid app, and so we can see here that the ace is on the dashboard and I have a check in button that gives me that form. So I can go through as a user and fill out my form and then just go ahead and submit it, and so that's a really quick way that I can get right to the form from my dashboard that could be in the mobile experience or whatever, and then the that the configuration itself has me pointing.

B

I have one configuration to point to the site collection where my lists are stored. So that's how that ace gets set up and then further when you click on the ace itself, it deep links into teams and takes us right to that covet app in the private app that loads in teams. So I can get there and you can see that I submitted my uh entry in and I'm good to go.

B

So, let's that's a you know, it's a quick, easy um extension, but let's look at the code a little bit because I think that's more interesting uh for people to see. So let me bring up my code now there we go okay, so this adaptive card extension is another addition to the um the whole solution package that we built. So when we, when we create the solution, originally we had the web parts for the covid app that you saw and that uh coveted admin app.

B

Is that entire solution that derek just demoed? So after that we added an additional adaptive card extension and that comes through with some templates.

B

So what we're going to start with is showing the adaptive card extension main entry point, and so this loads up the extension and we have an on init function here, and this is the thing that starts immediately after the page loads and what we're doing in here is setting up all of the things that we need, so that we know so that the service knows where to get its data where to write its data and how to to work with the data and we're just reusing everything we had already built in the web part.

B

So this this entry here, this cs entry, is the service from the main web part. So if I go down into the web part itself- and I go into the services- that's that covid service right there. So I'm just reusing the same code base and extending that to give me this functionality.

B

So we go through init process and we have some things to decide like the home site, because the personal app is doesn't have a home. It's not like a teams tab where the the home for the solution is in the team, the sharepoint site, where the team is this, the personal app sort of floats without a home. So we needed to tell the covid ace where its home is so that it, the so pmpjs which is what I'm using to go.

B

Get the data from the list knows where to get that data, so I'm pointing to where that home is. So that's one of the things, the configurations of the ace and then we're registering the card and the quick view which I'm going to go up, we're initializing pmp.js, and then we have some setup. We need to know who the user is and what their display name is and checking whether that user is already checked in for today. We need to do that and initializing our service and then setting up our state.

B

So our state for the entire ace so react has this concept of state and the ace has a similar concept of state. So the the entire ace has a state and we're going to set up whether the user can check in or not, we've determined that what the user's id is and what their display name is, and now we can share that with the quick view and the card view.

B

So the card view is the first thing that we load, and that was the card on the main screen. It's super simple: it has a title and a description, there's not a ton to it and so we're just using the primary text card view. There's three different views for the card view: one's an image view, one's a primary text, view and one's this basic basic view, and so we're just saying: okay, we're gonna set up the card and here's the data for the card, so this uh function runs and it sets up the data.

B

So all we're doing is checking. Has the user checked in already and did the service initialized properly, assuming that the user can check in it'll show a string of text that says: hey you can check in and if they've already checked in, then it's just going to show that they've already checked in and that they can't do anything and that will determine whether or not that check-in button shows at the bottom. But the card will always deep link, and so that's what this last function here is.

B

The on card selection sets up an external link and then external link is a deep link in the teams to the entity that this is so that number right there that good right. There is the guide for the web part and you can find that down in the the web parts manifest. So if you look in the web parts manifest that id is the id for that deep link.

B

So let me shut that one second come back, so that's where that deep link url comes from okay. So that's how the card view gets rendered so assuming that the user can then check in they have that button and we've registered that we have a quick view and the quick view is where we can be a little more dynamic and have a little bit more control of what things look like.

B

So in this case we're going to build the quick view- and let me just close this, so we can have a little more space and actually, let me close this, so we have a little more space. So the quick view is where we got the questions, and so now, if you recall the questions are dynamic. We have a list of questions so they're dynamically driven and they can be changed at any time.

B

So we want to be able to dynamically create that quick view which isn't necessarily super intuitive, because the way the quickview normally works is you have a template and you have the data and the two merge together and they display the quickview. And if you know what the template's going to be, then in the quickview template json file, you can build the template putting in markers for where your data should merge in and you're all done. The problem with this particular quick view is that those questions are dynamic. We don't know how many there are.

B

So we don't know how many spots to save for questions, and we don't know what type of question is it a text question? Is it a yes? No question, we didn't didn't really know, that's all dynamic. So the way we went about solving this problem is by creating uh a baseline template. So you can see in here that I have that the json string for the quickview view ace card template. It has a body section that that has a sort of a header. Then it has a text block for the office.

B

We knew it was going to have office. That was going to be one of the fixed things, so I have a text block for the office and then for the office string that the label office excuse me and then I have a an input for the choices for the different offices. Those are dynamic, so we wanted to set up a structure to be able to inject those choices into the the template. Then we have another container and in those container I know I'm going to have a set of items.

B

This is the container that all those questions are going to be injected into and when I go back to the code, I'll show you how I attained that, but we have this container.

B

It has an items array, that's just empty at the moment, but we'll get to that and then last but not least, we have the action set, which has the submit button and the cancel button and we can handle those as well and I'll show you that in a minute, so the only other thing I want to point out is that we have this body, it's an array and it has a number items in it. So the zeroth place item is this. The first place item is this.

B

The second place item is that I I'm pointing it out because we're going to use that information when we come back to the quickview. So let's go back to the quickview and we've set up some data. uh Some uh some uh excuse me types up at the top, let's get into the meat of it. So we have the data section here where we're gonna create the data that is gonna, be merged into the template, I'm going to skip that for a minute and come down to the template.

B

So normally what we would just do is we'd say hey. My template is in this file and I just want to return the template, so we we'd literally do line 72 and then we'd do line 94, and that would be all you'd need to do, because your template would be configured already to have all the placeholders for all the data that you're going to push into it.

B

In our instance, we need to dynamically change that template on the fly, so we're going to load the template in, but then we're going to modify that template as we go along. So in the in the zeroth placeholder of that body array.

B

Remember, I pointed out that the body has a bunch of objects in that array, I'm going to set a display name for the quick view and then I'm going to get all the locations out of our service, I'm going to load those into the location options and so that that can be pushed into the template. For so we have the uh the first one, which is the label for the office.

B

So I'm just gonna have a string that defines that label that I want for the office and then the second option item in there was the choice list for the locations. So I'm going to set the choices to those location options that I loaded from the service which loads them from the sharepoint list, and I'm also going to say the value of that is this location value for that's the the label for the data label.

B

That's going to merge into that, and then I need to build the questions array, and so those are going to go into that items which was the third or fourth, depending on how you, if you're, zero, counting or not and ten to zero count.

B

The fourth item in our uh body array is that items list, and so I'm gonna walk through all the questions that I've loaded from my service and depending on whether it was a yes, no question or it was a text, and since I knew I had only one types, I just have a simple: if here I'm going to create a new, yes, no answer and push it into this item array, and so I've created this constructor.

B

And if we go to the definition of that, you can see that I knew what I needed for the values for that. Based on what the template needed to look like the json object for a checkbox needed to have these values in it. So I built a constructor that allowed me to do that. So then, all I have to do is say push a new. Yes, no answer and I'm going to pass in the questions id the title and the data placeholder for that question.

B

For the yes, no and the text box has two pieces to it, so I needed to push on the text box that has the label and then the text box. That is the answer field below it and again I'm putting on for that text box. With the answer. I need to point out where the data is what's the merging point and what the id is for the question because I'll need that later and then, as I said, I push that into the template. So now, at this point on line 90, my template is now complete.

B

I dynamically altered it in memory so that it would have the questions that I needed and that quick view would look the way. I need it to look so now, when I return my template, it's all modified the way I need to, and now the solution merges that template with the data. So what I needed for the data is to get answers. So I have all my questions.

B

I needed to set all my answers to blank so that they didn't have any answers, so people could finish filling it out right and then I return the answers and then the solution merges the data, I.e the blank values with the template and displays that quick view on the screen for the user to fill out. Now, if you recall at the bottom, we had a submit button and a cancel button, and so the way we handle that is with a feature called on action and so on.

B

Action means when you click one of those buttons it launches this function. This function, then I can say: okay did they hit submit. If they did, then I'm going to go. Look at the data and I'm going to create an entry that I'm going to use our service to submit their answer all their answers into a new line item in the self-check-in list in the root site collection.

B

So basically, all I'm doing is creating a new title for the list item and then I'm building the check-in form so that it matches my list and then I call my service, which I'm using in the main web part that same service and I'm just passing in the check-in item with all the data filled out based on what the user entered, so I'm basically dynamically creating that form in a place.

B

That's super accessible to the user in the dashboard view that they'll have they can they'll have that on mobile, or it could be right on the home page.

B

It's super right in front of the user now granted if they're in teams at home or our team's on their mobile phone they'll be able to get to the covet app that way as well, but this might be the place that they start their day once once these things start gaining and once people start implementing these, the new um viva desktop, which was the the new name for the home site, personal app.

B

They might start there instead and so to be able to have that card and go oh right. Yeah. I gotta check in today and have that right, front and center makes their day go a little faster right and that's what we want to have, instead of them having to click all around, remember to do all those things it becomes front and center. So that is an overview of how the ace was built um faster. Did you have any comments you wanted? Did I miss anything yeah.

C

Can we go back on days just on the ux of the ace, um just to recap what we saw in the code and coming back on so what we saw in the code?

C

This is how it looks like so just to be clear, so 1.13 sharepoint framework 1.13 and which is going to be released within a week when we are recording this community call for those who are watching the video recording, that's the one which will include then the support for creating these cards and these cards are designed for the primarily mobile first experience um to be exposed in the team's mobile experience and you build them with desperate effects. Now can we do you have a video on one more time showing the checking process in here.

B

Yeah, I can just let me just run that again there you go so we're clicking the check in and that's there's our dynamic form. So that's what it then looks like.

C

And then, and that would be rendered actually in a native mobile experience if you are using a mobile when you're exposing or clicking that button in the mobile experience whenever we get all of the the the functionalities rolled out as part of the viva connections, and you build all of that using spfx. So you have all of the goodies within the spf x, accessing data single sign and all of that available.

C

uh Anything else which we wanted to. Are we missing something actually.

B

I don't think so. I think we went pretty deep this time. So hopefully everybody followed along I'll answer questions after if derek hasn't, go ahead, derek.

A

Yeah I've been answering some of the ones in the chat. One thing I just want to point out is: we are going to be releasing this as a sample for folks to see how we did this and that you can, when we release that you can also just download the sppkg file and it will provision itself with sample data.

A

Okay, so you can just you can get it up and running in like five minutes.

B

Yeah in your yeah like, if you have a deaf tenant.

A

B

Whatever and you want to see, you can just go download the sppkg, which is pre-built and in the deployment folder upload in into your tenant, app catalog, get it provisioned, sync to teams, so that it's in your teams in the personal app on the left-hand rail and then you know, go ahead and as soon as you run it the first time it will, if you have, it, will configure itself it'll, give you an option to configure itself with default demo data or you can start from scratch either way. So that's a really good point.

C

Cool excellent, thank you derek thank you, julie, really awesome stuff and it it likes that the sample will be available as part of the 1.13 beta release. So you'll get access technically it's available already uh in the github, but you can't actually run npm install because the 1.13 is not yet out. So julian derek has been bought at the private preview, so they have been having access on the bits.

B

C

That's why we did.

B

The sppkg file, so that you could you can install, even if you don't have the preview bits like vasa just said, and even if you don't you weren't in the preview program, and you don't have the dashboard, you can still download the sppkg file, install it in your tenant and you'll. Get the teams app.

B

You just won't be able to put the ace, even though it's in the package, you won't be able to put it anywhere in your tenant, because you don't have the bits to be able to create a dashboard to put it on there.

C

Until we as a microsoft site, release those functionalities so but we're getting there one step at a.

A