Microsoft 365 Community Community Demos, 12 Aug 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Executive room reservation tool for Microsoft Teams and Viva Connections built with SPFx

Description

For this 15-minute developer-focused demo, Julie Turner and Derek Cash-Peterson walk through an app for booking limited rooms by authorized users. See app in Teams and then view the ACE (Adaptive Card Extension) cards with deep links to other Teams apps, in the Viva Connections Dashboard. ACE cards can be targeted to specific users. Look at code for CardView, QuickVew, Card State, button actions and at how data is accessed and merged with template. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on August 12, 2021.

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

Supporting content:
• Samples - SharePoint Framework Reference Samples | https://github.com/pnp/spfx-reference-scenarios
• Get Started – Adaptive Cards | https://adaptivecards.io

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

Today, julie and I are going to share with you an app that we built it's based on executive room reservations.

A

So the concept where um you know- maybe there's only a certain number of uh conference rooms at an executive level or a specific floor that are only bookable by certain people, I'm derek uh and we're presenting and presenting today with julie. We were both. We, we both work at some praxis, consulting uh based out of boston, and uh this is the solution that we built.

A

So the main goals here were to provide better visibility into executive room meeting schedules um to provide an opportunity where people who need to book these rooms can art can book them in the space that they're already working so they're, not leaving they're not going out to a different system, they can do it already right inside of teams. It's about reducing that friction for scheduling those events based on both location and size of the group.

A

um We're also built in some functionality to support targeting for very specific users, because, as you can imagine, that's probably limited to a very small number of people like executive assistants. For you know the c-suite, um and also the ability to share meeting rooms with information for participants, and so with that I'm going to jump right into the demo, and so you can see here. um We've got the upcoming meetings.

A

We've got the strategy session, the leadership meeting, we're going to click on the leadership meeting, and once you click on that, you get a view of the meeting you get the date and the time of the meeting you get the uh the title of the meeting, but then you also get the meeting the name of the room and then the information, the the building number, the building name, the address the contact phone number for it. um Yep we've also got the the a map.

A

So if you want to click, you can see the map of the building. You can also click out into driving directions here. So, if somebody's coming to your meeting and they're staying in a hotel because they're traveling, they can come here and they can, they can put in the information for their um for their hotel and get driving directions or taxi directions. Or what have you?

A

I don't know if anyone saw the demo that julie and I did of our covet app a couple weeks ago, but this if you are using that you can link out to that app as well we're providing deep links. So it shows that you can sort of deep link from one app to another inside of teams.

A

On the left hand, side we've got a picture, a lovely picture of the conference room but, more importantly, actually is a floor plan, letting you know exactly where that room is in relation to the floor that you're on.

A

So you can also see. We've got this strategy session and you can see that there's no room selected now there are 15 attendees here. So we, while the meeting is scheduled, it doesn't have a location. So we need to find the location for that room or for that meeting and by clicking on it we're brought to this to the screen where we've got two main rooms that will fit this number of people.

A

They both happen to be in the building called main house, so the two conference rooms are baltic and atlantic one holds 20 people and one holds 15., and so we're just going to explore a little bit we're going to click on baltic, and so you can see, we've got the same information, the name of the building, uh the name and the location of the building, the contact information, um and then we've got some some information that helps us request the booking of that room, but we're gonna.

A

We don't like the look of this room for this particular meeting, so we're gonna select a different one. We're gonna go back and we're gonna select atlantic and we see the same information here. We've got the picture. We've got that uh we've got the floor plan, but now we're going to go ahead and book it. So we can put in our primary contact emily's our primary contact, I'm the secondary contact, but because this is an executive level meeting we're going to add in some av components here we're also going to add in our catering options.

A

um So you know this meeting is going to happen during lunch time, so we're going to have some lunch and then we're going to have cocktails when we're done so we're going to have all that brought in and now we can click the button that says, request this room and that will now book this room, and so you can see in the list of rooms at the top. This now has the the atlantic room booked.

A

Now. What if I just need to see what's out there and what's available for a certain date or time I can just check general availability, so you can see here, we've got the date and the time we can select the number of participants in our room in our meeting and then we're brought to a list of all the available meeting rooms that can hold that number of people or more, and so then it lets us know. You know what are what are our options here, and so we can do that.

A

I think the important thing here is this is more of a sample.

A

We built a really robust service layer here so that you can then extend it if you say, have a third-party tool that you're using to manage your bookings for those executive conferences, you could you know plug it into an exchange um and and run it off of the room availability there as well. um But it really is an open space.

A

Where you can, you can sort of take those methods and then you can you can plug them into your own work, um and with that I think I'm going to turn it over to julie, to talk about the viva connections, piece that we built to go along with this awesome.

B

Thank you. So let me share my screen and see if that goes all right, so derek just went through sort of a run-through of what the app that was built looks like in the team's space and, of course, that was built with the sharepoint framework. So um getting it into teams is a really easy thing. We can create our own manifest, which we did in this case, and then we took it one step further by using the 1.13 beta released to the sharepoint framework.

B

We've built out the um ace cards that go along with the room reservation system so uh over here. uh What I'm demoing right now is the ace card that we built for the room reservation app. So if we target this uh ace to those people who need it, they can come in and see hey.

B

This is the next meeting, that's happening in our executive conference area and we can click on the quick view and see quickly, information about that meeting, as well as links that deep link us into teams to fill out the covet attestation or deep link us into the meeting details to get that information, or you know, even planning our trip which again takes us to uh mapping and such things, and we can even scroll through all the meetings that we have coming up, which at this point is only two, but you get the point.

B

So uh all of that can happen, then, with this card that just sits right in the dashboard. So from a quick view, perspective, a user looking at their mobile device with the dashboard right up on their mobile device can see this click on it. Get the details really quickly get those driving directions. All of that right uh from the get-go, so the uh I'm gonna do a slight code review.

B

So if I come over here just quickly on the left, I just want to show the source code. So, with the sharepoint framework solution, we have the web part for the room reservation, and this is the part that derek just demoed. What we have, in addition is another adaptive card extension or ace with that reservation, piece of it that I just showed you and all the pieces that are important to that.

B

So I'm gonna, I'm gonna, hide this, so we can see the code a little bit better, but what we start with is the uh the the launching point for our solution. One of the things we want to define right away is the state, and so this state is um slightly dif if you're used to react. This is slightly different than what you're thinking of it's, not the state for the component.

B

It's the state for the app overall and it's using the same terminology, so it can be a little confusing, but this is the state of the ace itself.

B

So we can pass things back and forth between the quick view and the card view, so that helps us keep track of where we are and so what we need to do when we initialize our ace is we need to load some, the room, reservation service layer and we need to set up what those meetings are that are going to happen either today or in the future, so we're loading, those in and we're also creating those deep links in the teams for the two apps. The second one is the covid one. These guides are fixed.

B

If you use the teams manifest that come in the sharepoint framework build those manifest ids are fixed, so we can hard code, these links in, and so that works pretty handy. So we have the teams url for the room, reservation system and the team's url for the covid attestation app, and so once we've set this up, then we're going to start the the system automatically launches us into the card view.

B

That's where we start, and so for this one we're going to use the image card view, and you could see when we showed the demo that we had the nice image on the right side and we had the title and description, and we have that quick view button, and so all we have to do is define what our data is. That goes in there.

B

So, in the data method of the card view we're just going to set the title: the icon, the primary text and the image url uh for what we want to show up and so uh that image source is coming from our meeting room id. We have these hard-coded so back to derek's other point. This is somewhat uh compared to the other two solutions that we demoed before. This is a much more uh sample solution where we have mock data that we're loading in to just get it to work.

B

If you actually found this to be useful and wanted to implement it in your own environment, you want to go back and sort of fix up all of those places where we sort of mocked out some data. Okay. So once we have the card view, if the user then clicks on the quick view button, it takes us to the quick view component, and so when we're in the quickview component, I like to think of the quickview as a mail merge.

B

So the idea, if you've ever done a word mail merge, you have a data source and you have a template, and so in word you would create your template and then you'd have your data source in excel or sql server or whatever it is, and then you would say, merge and the data merges with the card, and this is exactly the same idea.

B

So there's um there's a couple of uh methods in here: one is to get the data and one is to get the template now compared to the covid uh sample that we did a few weeks ago. This template is fixed. We know what the the card in the quickview is going to look like. So all that we had to do was define the json schema for the card and we can do that using um the adaptive card designer we can get ourselves started there.

B

We go to that website um and maybe somebody has that link and can paste it in.

B

I don't have it right now, but you can go to the adaptive card designer and you can kind of get yourself started so that you can see how the card is going to look use that as a starting point and then fix it up to put in all your data points where you want data to uh merge in to your template, and so you can kind of see here there's that previous and next buttons, as well as the text block in the center.

B

So the the text blocks in the type and the the previous and next buttons are up here and then we have. um You know the meeting room image as well as like other meeting details and other meeting buttons. So that's what's in the template, if we come back to the quick view, then so, once the template is received, then it needs to merge with the data. So the template then calls the data method. It gets the data for whatever the state of our card is so remember back when we were on the first page.

B

We said this holds the state of our card. Well, the one of the pieces of state for our card is, what's our current meeting? What meeting of the meetings I have in my list?

B

What meeting is first, and so we know what the current meeting index is, so we're going to get the data for that meeting and then we're going to create the object that could then be merged into our card to show the particular details for that meeting, and so it merges all that data together and everything gets shown on the screen, and the last piece of that is those previous to next buttons that kept changing the view.

B

As I clicked on it, it would scroll through all the meetings and so that's handled by this on action, and so the on action has a submit command and if we go back to the template- and I go back to the top- you can see here that the button has a select an action type of submit. The title is previous, the id is previous and then the obvious you know obviously down here.

B

We have a submit with a next and a next, and if we come back to our quick view, we can see that our action type is submit okay and then we have an id remember- and I said the id of the button was either previous or next, and so I'm going to do one thing if it's the previous button, that was clicked and another thing if the next button was clicked, which is effectively the same thing, I'm just basically taking that array of meetings that we got at the very beginning and I'm shifting my state to say my current meeting is either the next one or the previous one, and so when I change that state with this line here- and you can see, there's two of them when I set that state.

B

What that does is trigger the quick view card to re-render wonderful gets the template again, reruns the data method. The current index is different. It gets a new meeting from our array of meetings, merges the data together and shows the new car. So that is a quick overview of how that ace behaves, uh and hopefully, that kind of gives everybody a good starting point to get started, trying to build some of these aces. It's really fun, as patrick mentioned.

C

Awesome, thank you, julie and derek great demo. There uh good to see some ace dev starting to happen. Like I said I do encourage folks to start checking this out. I think it's a a really neat. uh You know way to do some integration work so excited to see, uh julie and derek. Take that on and uh excited to as well see what everyone else out. There is going to come up with.