Microsoft 365 Community Community Demos, 24 Jan 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Creating Viva Connections SPFx ACE with geo-location capabilities

Description

In this 20-minute developer focused demo, Vesa Juvonen recaps Viva Connections and Adaptive Card Extensions (ACEs). Andrew Connell steps through creation of an SPFx ACE with the Primary Text Card template that uses the geo location capabilities in Viva Connections. Scenario - campus shuttle service. The ACE is for shuttle diver with mobile device. Book a trip, indicate travel status – on route, pick up, drop off. All details stored in a SharePoint list. Push and Pop QuickView Card (activities) in stack. Exercise 3, Viva Connections learn module.

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on January 24, 2023.

Demo Presenters
• Vesa Juvonen (Microsoft) | @vesajuvonen
• Andrew Connell (Voitanos) | @andrewconnell

Supporting materials
• Learn Module - Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections | aka.ms/viva/ace/learn
• Learn Exercise - Exercise - Create an SPFx ACE with geo-location capabilities | https://learn.microsoft.com/training/modules/sharepoint-spfx-adaptive-card-extension-card-types/7-exercise-ace-geo-location-actions.
• Demo (#1 in this series) - Introduction to Microsoft Viva ACE development learn module - Getting started – Vesa Juvonen (Microsoft) | @vesajuvonen & Andrew Connell (Voitanos) | @andrewconnell
• Demo (#2 in this series) - Create an SPFx Image Card ACE displaying image carousel - ACE learning module – Vesa Juvonen (Microsoft) | @vesajuvonen & Andrew Connell (Voitanos) | @andrewconnell

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

👋 Join to our weekly Microsoft 365 & Power Platform Community calls to learn more. These are PUBLIC calls for you to get access on the latest details from Microsoft and to see awesome demos from community on these technologies - Download recurrent invites from https://aka.ms/community/calls

A

B

First of all about the ace learn: module which is now available for you to take advantage for Viva connection and Viva home. We have a home is the one which is rolling out in a second I'm going to talk about that. One with the one slide a recap, and then we actually go for the creating of Eva connection, spfx Asus, with geolocation capabilities and entry kernels. It's going to show that one in practice I'm no longer allowed to write code, apparently now, which is a good thing.

B

So, first of all, we do have the new Microsoft level learning module available, which is focusing on development of ace aces. So these are the ACs which are available in the Microsoft Diva for Viva, home and Vivo connection for now, and maybe potentially in the future in other areas as well. We can't promise anything in there, but we're seeing a huge usage on on these sections. Already.

B

The learning module is available in Microsoft, learn at akms forward, slash rebar, forward, slash Ace forward and we'll put that link in the chat in a second as well, and so you can easily access that. That is a one hour and 50 two minutes of content on getting started on. Creating this Aces for V1, Microsoft V1, using SharePoint framework or using spfx sounds better because it's not really about SharePoint. It's about Viva. This time now, as as kind of noted on Luca's interests as well.

B

Sharepoint framework is a bit confusing from a naming perspective, because it is actually an extensibility framework for creating uh stuff not only for SharePoint, for Microsoft teams, for Microsoft Diva and nowadays also for Outlook on Microsoft app. It has the content. It has this automatic single sign-on automatic code hosting directly into Microsoft, 365 Tenon and it uses indices under tooling and you can use it in teams toolkit. You can use them.

B

Viva toolkit, you choose whatever JavaScript framework, you use it with spfx, and that gives the flexibility the as module, really focuses on the Microsoft Levi extensibility. So how can you extend and modify the Frontline workers experiences in Mobile or the information worker experiences and mobile and then also the desktop experiences, so those small cards which we can see say in the desktop or in Mobile experiences? And in this time this is the module 3 in that learn, module which is available for you again.

B

I will put the link in the chat in a second, but the exercise 3 is really on creating a geolocation capabilities with spfx and for Microsoft Viva connection and with a hole and I will let AC enter Cornell from voitanos to take it over from here cool.

A

Thanks versa: this is a continuation of the demos I've done in the last two of these calls over the last two weeks. This is the third demo from that Microsoft learning module that vesa mentioned a few minutes ago. um Really, quick! Just might let me just do a quick introduction. My name is Andrew Connell I've been in Microsoft MVP for a very long time and I focus uh mostly on Microsoft 365, developing in Azure development, but I guess. My background is primarily like in the SharePoint space and these days that means SharePoint framework.

A

um You can see some information on how to contact me at the bottom, but that's not why you're here, let's talk a little bit about this module, the module is broken up into. Is it like thusa said it's um almost two hours long and it's broken up into three main sections.

A

Each section is a little bit of a lecture followed by a demo that reinforces what you just learned, so the first two, the last two meetings that we've had that you can grab the recordings for um of what you're watching right now uh were from the first two sections and the last one here is the one I'm gonna do today in just a minute.

A

Is a demo of the last Hands-On lab exercise uh from that third section uh from the module, which is the third section, and it's specifically around building an Adaptive card extension that leverages two of the three unique aspects that we have with Aces and specifically adaptive cards. That's supported by Viva connections, and that is there's three areas are working with uh geolocation, um so one of them is showing a geolocation.

A

One of them is selecting a geolocation and then the third one that is not shown um here for the interest of time really is being able to select a media object so specifically an image if you want to upload an image. So you take a picture of something from your phone and you want to upload it. That's what that's designed for. So, let's forget about like the slides because we're developers and let's look at actually a demo of actually something happening.

A

So what I'm going to do? First I'm going to come over here and actually get this guy um up and running and I'm going to show you what we're going to do first and then we'll go back and we'll look at the code I'm not going to walk you through everything about building an ace, because, quite frankly, I don't have enough time to do that in the demo. Instead, I'm going to show you the specific pieces that are applicable just to Viva connections. So let me go and add this back.

A

Let me go add this to our the Adaptive card, my ace to the page. Now what this is going to do. The scenario for this is like think about something like a campus shuttle so or like a and when I may say. Campus I mean like a large corporation um that has multiple buildings around a large campus, so the Microsoft guys are definitely familiar with this or you can think about it as like.

A

A shuttle for like a large University that has a lot of buildings and stuff so think about it kind of like an Uber or a Lyft, but a very simplified version of it for a demo. So what I do here is I actually have everything is going to be stored in a SharePoint list. So what I need to do is first configure this and go grab the list ID.

A

So let's come over here, and let me just go to my my list called campus shuttle and I need to get the list ID for this and I'll do that by just jumping over to the list. Settings I'll then grab the ID for my list, which is here in the URL copy that out come back over here. Select them edit paste it in close, it save we're in good shape. Now, let's switch over to preview mode now. How does this work? So? What I can do here? Is you can see that as a driver?

A

The idea here is that I'm, the driver so I'm looking at this on my phone and be in in the Viva connections or Viva Home app and I can either specify that I'm either. If I click book a trip, I can choose that I'm, either enroute to a pickup to go pick up a passenger and take them somewhere or I'm. Actually starting my trip. I've got my passenger now before I. Do this I'm gonna, I'm, gonna, I'm gonna use the geolocation stuff for this, but I don't want you to see where I live.

A

So let me switch over and use the dev tools to actually specify a um uh to give me a fake location, so I'm going to go to my sensors in the browser tool and I'm going to choose my default location to Gainesville Florida, and so now, let's take a look at this. So I'll go book, a trip and here I'm going to say, select the origin from from the map. Now, when I first click, this that's going to go ahead and open up, you see. I've got a second quick, quick view.

A

That's going to launch so when I say select a location. This is what I get, and so this is a location here near the University of Florida in Gainesville Florida in the United States, and this is where I've told it uh where I told the browser like I said this is with the geolocation for my browser. So don't actually go get a real location that what I just showed you there really quick and the um and the Chrome Dev tools.

A

It's a nice little trick when you're doing demos to make sure you don't share people where you live, especially if you are doing up work from home like I. Do so. Let's say you know: I want to I want to say um where we can select the location on the map where we're going to start the location.

A

So what I'm going to do is I'm going to I'm going to grab this little push, pin I'm going to say I'm, going to start right here uh on the corner of a stadium, Road between the basketball arena and the football stadium. So I'll say: I'll share my location, that's the origin and where am I going to go so I can then choose the look.

A

The origin and the way this is set up is I, can either choose a destination on a map which you just kind of saw that so we don't want to see that again or I can choose a known location. So in this case here we're just going to go up the road to the hub.

A

Really the person should be walking because it's like a five minute walk, but regardless people are lazy, they want to use their cars, I'll choose a set of the destination, and then I'll say that um where, where we're going is I'm going to be in route to the pickup for this person, um because I'm not currently where the passenger I'm picking up I'm, not currently at that location between the basketball and the football stadium um and I, said football and I mean football, I don't mean I, don't mean soccer closet, safe trip or successfully, and you can now see that this is now listed as this person is now currently booked and they're in route to a pickup.

A

So let's go through, and let's just change this really quick here and make sure that we're in large mode. So we can just see it a little bit better, go back to preview mode, a couple things you'll notice: I can either view the pickup location or I can update the trip. And, if I go over to my list, it's where my data is being stored. I can see that I have Megan. So my name is Megan and I've got Megan. This is the the geolocation of where the pickup is where they're going.

A

So this is the Hub and I. Have these I have preset destinations, so I've got a location name and then I've got the geolocation as well as the status of where they're going come back over. Here, let's say: um let's update the trip or let's I can view the location.

A

This is going to use the show geolocation option waiting, we're waiting, we're waiting, we're still waiting, we're still waiting, come on you're supposed to work now, preview mode view the pickup location there we go so we can see the pickup location here is is being is I can't select anything. This is the second of the two geo location options we have with Viva connections, we're showing me where I'm supposed to be going and then I can also update the trip so I can either cancel the trip or I can pick up the passenger.

A

Let's just go and pick up the person we've now gotten to that location. We've picked up, John Doe, throw him in the back of the car or we put them in the trunk if they were obnoxious. I'll click click uh pick up the passenger, and now you can see I'm listed as I've I'm, hired and I'm driving a passenger to the hub I can see where am I actually dropping them off or I can just say, I've completed the trip. Are you sure you want to complete the trip?

A

I'll say complete trip now, keep that in mind that little quick view you see popping up there, because if I click uh complete the trip and then I come back over here and let's say: if I do another one of these trips, so let's just choose a location, we'll start right where we are right now the destination will again just choose another location set the destination and we'll start the trip right now all right. um No, let's not do that. Let's go we're not to pick up again and I hit, save the trip.

A

If I come over here and say, update the trip and I say: cancel notice, I'm going to get it's not working browser screwing up here, because this thing was working right before the demo. Of course, right uh I would get a different confirmation. That's going to ask me: do you? Are you sure you want to cancel the trip that canceling that confirmation of like that completed the trip or I'm canceling it that's kind of important, because I'm going to show you how we're, using the same quick view to do two different things.

A

So, let's get out of this? Let's go back to the code and let's actually see what's going on I'm going to stop this.

A

So what do we have here? That's interesting, so I'm going to open up the main class, the main file that we have here for my quick view and or for my um my Ace and in this case here this guy's got not a whole lot of stuff associated with him. um I've got on the on the properties.

A

I really only care about the list ID uh in my SharePoint list, where I'm, storing all those trips um or I'm gonna and then the other thing I'm also going to have is an object for the actual list item and in my case, that's where I'm storing that in a state and what that's going to do is that now, whenever I make a change to the current trip that we're on so I've either changed the location any either one of the two locations or I've changed the status from it being I'm on route to I've, actually got a passenger or I've completed it or I've canceled.

A

The trip I'm going to update this current trip property here on line 26 and that's what's going to trigger the entire Ace to re-render and I can do that from anywhere in the Adaptive card. I can do that from the card view, which is that thing that you see, which is this guy right here or I, can do that from any one of these quick views as well.

A

Oh jump too, quick um I've got a whole lot of quick views that are created with this and I'm. Using the stack idea of the quick view, Navigator of well of The Navigators, but um specifically the quick view navigator to push things onto the stack and kind of pop them off, and so you can kind of see where right now I've got the card view.

A

If I click update a trip, that's going to put one thing on the quick: that's going to launch the quick view with this campus shuttle, but if I click on pick up passenger or I go to complete a trip uh and I Mark complete a trip where's, my cancel one: oh I didn't did it too fast. I want to be able to put things other things up on the the stack and, if I put a new, a new quick view on the stack if I push it onto the stack.

A

So the main one is at the bottom and the next one is like the next level up. It's going to always it's always going to render the ace rendering engine it's always going to render the top one on the stack. So if I put another one on the stack, it's going to render that one another one on the stack is going to render that one. Hopefully, you can see my camera, if not then I'm doing um hand motions for just uh my myself here in my room, my office.

A

Nobody else has seen it, but if I pop something off the stack so pop that top guy off the stack like the confirmation, one then it'll drop back to the next quick view uh that is on the stack and render that one or I can just close the entire. um The entire quick view stack. So, let's see how some of this stuff is working specifically, let's see I want to show you how the the stuff works for the show location, the geolocation stuff, because that's what's kind of unique about this sample.

A

So let's choose the um setting of The Origin. So the set origin quick view what I'm doing with this is, if I scroll down a little bit to there's my quick view right there. It's called the set origin, and here I'm, going to I, have a method here where I'm returning the data.

A

That's out of the box method that if you override um that uh accessor method, it'll return back the data that I want to send to the Adaptive card engine, that's going to get bound using the Adaptive templating Engine, with the actual Json for the card to like mesh the data together and in my case I've just got three properties here.

A

I've got the trip the title and the description now the on action piece here is that what happens when someone, you know, clicks it well before we do that, let's go back to our the actual Json. Let's take a look at the Json for this and see how this looks so. What I've done here is here's my location and where I want to set the location here, I'm using an action and my action is called the Viva action uh get location.

A

You see the squiggly line here, that's popping up that it doesn't like it because it's not part of the Adaptive card schema. This is, and neither is this parameters piece right here. These are unique to Viva connections. So don't be don't flip out when you see these squiggly lines like oh something's, not working, it's like well. First of all, they're, yellow and they're warnings and we're developers. We don't care about those, we only care about red stuff, but even if it was red, we still wouldn't care about it.

A

So, in this case here, when someone clicks the um the my button called set location or select a location on the map, I'm setting the parameter on this specific action to choosing the location on the map to true and I'm, saying the type equal to viva, viva action, dot get location. Well, if I go back to the set origin, you can see here.

A

I'm checking to see is the action type equal to Viva action, dot, get location and if it is I'm going to go, get a reference to the current trip in the state of my entire Ace and I'm, going to go, set the origin location to it, equal to the latitude and the longitude of the location property.

A

On that specific action that was passed in as a parameter to this I'm going to take that and I'm going to push it I'm, going to I'm going to set the state of that value, so I've now updated the location and then I'm going to pop the current card. That I have quick, quick view card I'm going to pop that off the stack, so I no longer am. If I, if I had multiple cards on the stack, it would go back to the next one down in the stack in my case.

A

I know: there's nothing else there, but by just popping it off is the is a better way of doing it. I think in this case the other one that I want to do is I want to be able to maybe set a destination or actually, let's do a as setting the origin. Let's do what was the view location, where's my view, location, there's one where was I doing that hold on? Let me see where was I doing that so I had to book a trip.

A

I could uh be in route start the trip set location on the map. That looks good set destination on the map. We are now going to the hot to the rights Union I'll set that one uh we're gonna be en route to the pickup save trip. uh Where was that new I view pick? Oh, that's all my card view. So let's go back over to the car view and let's see how I'm actually triggering this, because this is not really a quick view. So I have that view, pickup location.

A

If I come back over to my card view, what you'll see here in the list of buttons that are returned in my card view? I have one called uh book here. We go view pickup, location and one of those cards because I'm currently in route I'm returning back two cards you saw I had update trip and I also had view pickup location right.

A

Remember that right there and here what I'm doing on the when I click view pickup location, What's, Happening Here- is that's going to launch the action called Viva, action.show location, which is what's going to trigger that quick view to pop up which it doesn't like to do sometimes for some reason and I'm going to set the location I'm going to set the location coordinates that I want it to display equal to the current trips destination, location and I'm grabbing it out as a latitude or longitude, and the reason why I'm having a case to cast it here to this interface, is because um it's actually this is actually a string.

A

This is not an object, um so, as you saw on the list, item I'm, just storing them as a comma as a CSV for the um latitude longitude coordinates.

A

So that's that that's basically how to do use those two things. The other thing I did want to show you too, because I've got what like uh two about 90 seconds left. Let me show you this last one that I did is that I have this confirmation card, and this is like a dual purpose. Remember I had the cancel or the comp or confirm uh what I wanted to do in this case. Here this is my generic card. It's just a a text, a title block, a description and then a submit.

A

Well if I come over here to the confirmation quick view what's unique about this, is that I've set up a Constructor for my confirmation, quick view, that's going to take in a string either a cancel string or a complete string and I'm saying that as a private member on my class of confirmation, quick view I'm, then, when I return back the the object, that's going to go back to the templating engine, I'm going to set the title to the uppercase value of the first character in the string, so cancel or complete.

A

Of course, in this case they're both C, so I could have hard coded that, but it's a demo. We want to do things kind of right, right and then I'm going to put in the rest of the word here all in lowercase and say trip now.

A

What that's done, then, is I've now created use just one one um quick view and one Json adaptive card, one adaptive card defined in Json to implement essentially two quick views and I know that there's a confirmation card, but does I'm trying to prove a point here when I go back to my actual adaptive card extension when I registered these two guys. So here's my cancel and here's my complete notice here on these two.

A

They have different IDs but when I go to register them on the quick view between cancel and complete notice here that I'm creating when I create the class I'm passing in different strings. So now, according to the rest of my adaptive card, my my adaptive, uh my Ace I, can use these two different IDs, but under the covers I'm using really the same quick view, I'm just kind of toggling between two different modes of that quick view. So that's basically it that's everything that I wanted to show for this.

A

I hope this was um at least moderate, useful moderately useful, um but I will I can I'll take a look at the chat while vest is doing, wrap up and I'll try and answer any questions that popped up.

B

Sounds good! Thank you, AC on that one really cool and it's a great scenario, and just to call out uh something what I added in the chat as well. That of course that that geolocation based experiences makes more sense as they are targeted for mobile devices. So, as people are driving their cars, they have a mobile device with them, not using the desktop experience, but as it was demonstrating this using the desktop experience, because it's easier to do that in the development time.