Microsoft 365 Community Community Demos, 6 Oct 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building a Help Desk Adaptive Card Extension for Microsoft Viva

Description

In this 15-minute developer-focused demo, Derek Cash-Peterson showcases 2 new Helpdesk related ACE samples - Help Ticket and Pending Helpdesk Tickets (for tracking tickets assigned to support person) to demonstrate how to leverage multiple quick card views, geo-location functionality, media upload functionality, and movement between cards. Walk through ACE code in Visual Studio Code and wrap with Q&A and supporting resources. On card, collect incident type, priority, location and images. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on October 6, 2022.

Demo Presenter
• Derek Cash-Peterson (Sympraxis Consulting) | @spdcp

Supporting materials
• Samples - ace-designtemplate-gallery | https://github.com/pnp/spfx-reference-scenarios/tree/main/samples/ace-designtemplate-gallery
• AppSource - Adaptive Card Extension Design Gallery | https://appsource.microsoft.com/product/office/wa200003929?tab=overview
• Repo - SharePoint Framework Reference Samples | https://github.com/pnp/spfx-reference-scenarios

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

A

A

S that I built around a help desk adaptive card scenario. These uh my name is Derek Kush, Peterson, I'm, a principal architect at some Praxis Consulting I am based out of Iceland. uh Let's see what else I've been doing SharePoint for a really long time. If you have any, you know if you want to contact me or have any questions at the end, that's my blog and my Twitter and Linkedin. So there's a couple of things that I want to show in this demo.

A

The first and we've seen a lot of Ace demos on uh on this call, but the first is how to leverage multiple quick view cards, how to just navigate back and forth between them, um but also to show some stuff that we haven't necessarily seen, which is the newer geolocation functionality, so how you can share your location in an Ace and then consume that and do something with it and also to show the media upload functionality.

A

So you can now trigger a button to open up the Picker on either the mobile device or on your computer and add an image or a file. So with that we're just going to go into the demo part, um because that's really what folks want to see. So here you can see there are two Aces: we've got the create a new help desk ticket Ace and then the list of pending help desk tickets. So they do have a little bit of configuration to them.

A

uh The first one they're both configured the exact same way when you edit them it asks for a Bing, Maps, API key. You don't need an API key to use the geolocation functionality. I will show you what I'm using it for in a little bit and the other is because I'm uploading images I want to be able to store those images somewhere like a SharePoint Library, so I added in functionality that checks to see if the current user has the permissions to actually add a library.

A

If you don't have permissions, you just don't see this, and then the button doesn't show up to allow users to do that. So I'm going to click, add library and then, in the background, it's going to go. Configure the library and I already have the API key.

A

So I'm going to go in and just publish this and because I want to look at it in preview mode because it looks pretty, you can see so I'm going to click the create new help desk and this particular Ace like I, would audience Target this to everyone in the company. You could fix this so that it connected to servicenow. You could figure this to go to a SharePoint list.

A

This just holds data and goes to a teams up to show deep, linking capabilities, but you can take the service layer and push this wherever you need it to be. So here it randomly, creates an incident number. uh It grabs my name. It provides the image it gives the open date and then there's some drop down. So this is going to be an incident, and this is high priority. So I'm going to say, help can't log in.

A

And now I can either discard the request or I can click next I'm going to click next and now it's going to pull all this information forward, we're navigating to a new card and because I have the Bing Maps API key I am showing a button and I'm going to add the location. This is using the geolocation functionality.

A

um And it brings up the geolocation screen to show your address, and this is the location that I'm picking if I click share location. This is going to now trigger an event in the Adaptive card, and this is what I'm using um Bing Maps for is to actually get the street locate the street address now for the image upload we're going to click the button, and this is going to open up the dialog to choose the image when I do that. I can pick some recent images that I've been there.

A

We go and now I can select this image and, in the background, it's processing this image and it's saving it into the SharePoint site that I just created to the library in the SharePoint site that I just created and you can add multiple images and then I'm going to go ahead and submit this card, and this is going to open up the teams app. But again you can use this to. You know to link into your existing help desk system and to save the data there.

A

Now what happened to that image in the background I'm using pmp.js, to push the data into a picture library that we created when we configured it and now it's there and I can go, do something with it. So that's the help desk create ticket. Now, if you are working on help desk tickets, you may want to use this Ace. This one lists out the ones that you have assigned to you. So if you click it now, this isn't connected. This is meant for sample data, so this is particularly just pulling in random data.

A

It's not connected to the two. You can show the different help desk tickets that are assigned to you, click on one. You can see this one is overdue because it was open on the 28th, the information about it. You can see the image that was attached to it when the person created the card initially, but again.

A

Now we can use that latitude and longitude that we got from the get location functionality and we can click get directions, and this is going to open up big Maps directions and say I'm at the Seattle Marriott, because this is going to be an in-person call. I can then go get directions for how to get to that particular office and fix that issue same thing with the image upload, as we saw in the last card.

A

I can come in and the image is just overwrite, so I'm going to use the same image, and now you can see it's attached to the screen, but I'm going to say, I went I took a picture everything's, okay and now I'm going to close, and now you can see the tasks open up.

A

So that's the functionality in a quick and dirty nutshell: I'm gonna, I'm gonna switch over to visual studio code, and now you can see so I'm gonna so here because we're using multiple cards I'm going to use this one as the example here.

A

So when we click over it. This is the quick view card and we have a button called Next now that next button needs to do something to push us to the next card.

A

So when the buttons we're going to use this action dot submit, so you can see I'm setting the label here called Next button, and this has a string attached to it called that says next, with an ID of confirm when this gets called. When you click on this button, it activates the on action method, the on action method, basically processes. Any clicks most of the clicks that are coming from the cards so whether it's a submit action or the geolocation or the upload media, it's got.

A

It gets to do something with it so here because I'm submitting it I'm taking that confirm, checking for that confirm, ID and then I'm setting the values to an object in state, so I'm, setting the form, elements, category and urgency from that form and setting the property to new and then putting that in the state and updating the state. But in order to move to a different card, we need to use the quick view Navigator.

A

So we're taking the quick view Navigator here and we're calling the push function and we're passing in the ID of the add location view, and this gets set in the initialization for the Adaptive card extension. So then we do that and we move over to the add location screen. I'm just going to do this real quick, so you have something to follow along with, and so this is the next screen. This is the add location screen.

A

So looking at the template now I had said I sort of gave it a little bulletproof I checked to see if you have the Bing Maps key, so I'm, using the when attribute and I'm saying, if there is a key, show the button and if there isn't a key, don't so, if you don't have it no big deal, you just won't see that particular button and then I'm using select action and calling one of the new types called Viva action.getlocation, and then we can press in a few just one parameter for this particular one and that's choose location on the map, which means I get to move that little dot around.

A

So I can choose that.

A

There's additional logic here for the image um I'm setting a flag in when I load the web part I'm, checking the permissions for the users and I'm sending a flag called, can upload so again, I'm using this when functionality to show and hide different elements on the Adaptive card based on whether or not the user has permissions or the ability to do X, Y or Z, and then I am using the Viva actions.select media type. For this particular button, that's the button that is going to open up the media window and I.

A

Have the ability to select can I allow multiple images to be captured? What types of files do I want, I can restrict it to jpegs I can restrict it to pngs. You can set up a whole bunch of different stuff to to do that and then again, where I said that on action method processes, all those things in the typescript file for that for the on action for the add location, template we've got two different elements in here. The first is we're checking.

A

If you are the get location, action, the get location, action returns, a latitude and a longitude so you're going to get you know, 45 and negative 122.

A

I am saving those in my ticket in state, and then this is where I wanted to go and get the street address. The geolocation functionality, just out of the box, gives you that latitude and longitude, but I, wanted to make sure that I had the street address.

A

So I'm calling a function in my service layer called get location which calls the big Maps API to get that data back and to get the street address and to send it back and I'm saving that in the ticket itself and then I'm setting the ticket in the state where I am using the select media function, I'm getting all the different attachments that came through.

A

So if you have more than one, if you processed, you know four images and uploaded them together: I'm processing the image data, creating the URL and then I'm saving that data into the SharePoint list. With this get image, this add image function.

A

um You can see I'm using pmp.js to push that image into the SharePoint Library and the end result is what you see here and then pushing the data into that Library, and that is all I. Have so I can hand it back, and if there are any questions, I can enter them in the chat.

B

So one question which is actually kind of interesting on the solution in here. This is really cool and, and this is create solution well, the design is coming from Microsoft and partnering together with some practice on this. So we're kind of working together with Derek and thank you Derek on on creating the the designs and the examples and and we're working on updating the gallery solution in the store as well. Can you actually point to the solution in a store just to Showcase, where people can get this example scenario?

B

Let's go to appsource appsource.microsoft.com.

A

B

A

You're in here, you can search for it. If you search for Viva.

A

There is a the Adaptive card extension Gallery right here, so you can take this and you can provision this directly in your tenant. Right from here, as Bessa mentioned, we have a update coming with all that geolocation stuff I'm, just waiting for final approval from the store folks, but this has all of the all 14 of these demos that are sample Aces, that we've I've demoed a few times on here.

B

Yeah and and Chester again recap on that one. So they're not really functioning end-to-end scenarios because they don't actually work, they don't integrate their CRM system or a ticketm system. They show a scenario so they're there for storytelling and and for decorating the dashboard. So you can actually kind of have an easier discussion with the business decision makers and say hey. This is an example. How you got your dashboard could look like so we're kind of adding an additional designs.

B

Designs are coming from Microsoft and then, as said, we partnered with some practice Consulting we're really great on implementing anything in SharePoint framework or for Biba, and then we put that to the store and and the last update should be coming in I think a few days now. Yes, one question related on this one that the solution, what you showed was really really cool and there was a question related on. Where did you store uh the security uh so being mapped? Yes, where are those persistent? That's an interesting question Point as well, so.

A

In for this example, I just used it as a property on the on the web, part I mean on the ace yeah.

B

A

B

It's a property in an ace. It gets automatically stored uh within the storage layer from Microsoft side. Now the how we would actually do this most likely in production if it would build something like that, would be that you could actually take advantage of, for example, the tenant properties, which is a in and capability where we have an API. So in the Ace you can just request. Hey do I have the license key already in a tenant properties.

B

Oh I, do fine, I can actually behave differently or I would do I have the maps API key in there? Okay I have to let's take advantage of that. So that's probably the best way to do that from a license key or save storage. Because then the code can read it. They cannot modify that yeah. So one.

A

Thing I wanted to point out so while the the entire solution is able to be installed from the appsource gallery, if you're you know, if you're interested in how we did this, there's a GitHub repo in the instructions. Here, it's also in the samples repo on pnp.github.io and you can see all the source code for what I did. So if you just want to go pick it apart or build your own by all means you can go in and grab and grab the code. We tried to build the service layer.

A

There is a service layer in there, so you can just sort of pull it out and modify that you know to suit your individual needs.

B

Really good, thank you just recapping again those assets and everything. Thank you. Derek really, really cool stuff.