Microsoft 365 Community Community Demos, 17 Jan 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Create an Microsoft Viva extension with SPFx displaying image carousel

Description

In this 22-minute developer focused demo, Vesa Juvonen opens with basics on ACEs and underlaying SPFx and Adaptive Cards technologies for building experiences in Microsoft Viva. Then Andrew Connell delivers a session geared for people with SPFx, but no experience building Adaptive Card Extensions. See UI for card that displays dynamic images from an external service, namely NASA. Configure Property pane for the ACEImageViewer component, look at the code for this web part. References Exercise 2 - Create ACEs for Microsoft Viva Connections Learn module.

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on January 17, 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 Basics - Basics of ACEs: card templates, CardViews, properties, and states | https://learn.microsoft.com/training/modules/sharepoint-spfx-adaptive-card-extension-card-types/2-adaptive-card-extension-basics
• Learn Exercise - Exercise - Create an SPFx Image Card ACE displaying image carousel | https://learn.microsoft.com/training/modules/sharepoint-spfx-adaptive-card-extension-card-types/5-exercise-ace-image-card
• Demo (#1 in this series) - Introduction to Microsoft Viva ACE development learn module - Getting started – 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

Slides on introducing a few things and and just the concept and- and this is a recap from last week but AC is going to then do a live demo on creating an spfx image card ace and displaying an image Carousel, but as 10 days on this call might be wondering what is an spfx and what is an ace. Let's do a quick recap on those things. So Ace is an extensibility model for Microsoft, Viva connection and Microsoft Viva home now.

B

Aces might actually be supported in the future, in other Viva modules as well, but I cannot provide any additional details on that or any timeline. So there's a ongoing possibility of that. Ace means adaptive card extension. uh It is a SharePoint framework component and SharePoint framework behind us to see in this basically responsible of making that adaptive card Dynamic.

B

So SharePoint framework is the orchestrator hitting the API getting the API and the information from apis and then bypassing that information to Adaptive card and, and that makes it adaptive card extension, so we're using adaptive cards we're using graphic using the rest apis. We do have a new learn: module I've made a little bit of English is hard. We do have a new learn module available at akms Viva as learn, and that's basically one hour and one hour and 56 minutes if I remember correctly of 52 on learning how to get started on creating this.

B

What's cool about this one also is that we are rolling out new features, as mentioned first of all, SharePoint framework. You probably might heard about that one already it's been available for a while. You can use it to build extensibility for numerous different capabilities. Microsoft 365 and the applications are automatically hosted, so it makes it super easy for you to actually Implement extensibility, which are then hitting the apis in, for example, Microsoft, craft or potentially somewhere else.

B

Now, starting today we are rolling out the Microsoft Viva Home experience, which is the one which you can see on the left side and that's starting to roll out today to Target at release tenants so not in the normal production tenants, but to those tenants where the targeted release switch has been enabled in the organizational level, and that means that the Viva connection experience is a bit kind of a getting adjusted and if you want there will be settings and configuration options of how to control this experience.

B

The right side is more the traditional Viva connection, experience, which also had to exactly the same mobile experience. But the desktop experience looks bits different, but you can see those ACS as in the cards in the background, and you can use those cards also inside of a SharePoint, so you don't have to be inside of a teams or inside of your connection. Those cards can be used inside of a SharePoint portals as well, but to continue our series on how do we build those Aces Aces AC is gonna hold AC is an AC.

B

Ac is going to actually show us how to create an spfx image card is displaying an image Carousel and let's jump on AC screen um to see that one in practice AC take it away.

A

Thank you very much. Let me double check. Let's see all right, so you should be able to see big purple slide. Yes,.

B

Yep, oh, you can see that take.

A

It away purple slide no flickering so success um all right. So thanks a lot for joining us uh joining for this demo today. This is the second exercise as vessel was just referring to. This is the second Hands-On lab exercise from a Microsoft learning module that I recently published for Microsoft under Microsoft learning, uh and it's on creating adaptive card extensions with uh SharePoint framework, so just real, quick bio um who is doing the demo.

A

My name is Andrew Connell I'm, a Microsoft MVP long time in VP, I, guess uh around office development, where I focus just on primarily SharePoint framework, but any kind of like Microsoft 365 development, and you can learn more about me and the stuff that I do from those links that you see there on the slide. But what we want to do is I want to talk a little bit more about this module.

A

So I know Vesta just mentioned a lot of stuff about it, but this module is targeted for people who have no experience working with adaptive card extensions, so Aces, and if you so, if you want to learn what these are kind of, how they work. My target audience for this was designed for someone who has no experience with adaptive card extensions. I do have some expectation that you know what the SharePoint framework is and you've built a web part with the SharePoint framework. But you don't have to be an expert at that.

A

The modules consisted of like three sections: each section contains about a 10 to 15, minute lecture. uh That includes slides, but also has just it's all text based as well, and then it also has a Hands-On lab that reinforces what you just learned. It's available as a screen, both as a a Microsoft learning module all text based and then you've also got access to a screencast of the module of the entire module as well, where you can jump between the different sections and see the Demos in the videos.

A

If you want more of the I, don't know what you are I saw. Someone said in the chat. You would need more of those in the learn area.

A

I've published, like over 35 modules in Microsoft, learn so I'm, not sure what you're looking for, but we've got a lot in there, but at any rate, the the one thing that the video will do is it's going to walk through, creating the act, the creating the demo I'm not going to do a live coding right now, because this isn't an exercise in watching Andrew debug and saying that he he does a bad job of fat fingering stuff.

A

um Instead, I've already got a sample, that's up and running, and it's working, but you can do the exact same one I'm gonna do um it's exercise two or the second exercise in the module? So let's get to the business time, there's our demo pointy and down pointy in business side down all right. So let me show you the one: that's actually working. Let me focus on that first um and then we'll look at the color how it's implemented. So the scenario here I've already got it running.

A

It's called the ace image viewer and the scenario that I've got is I wanted to build an Adaptive card extension that was using the image format or the image card template to be able to display Dynamic images from some external service, and so what I choose to do is to use open, uh non-copyright data and I thought that the best place to choose that, as everyone would obviously agree, is using one of the open apis from NASA.

A

In this case, this is one that has catalogs and allows you to look at all the images that have been taken with the various Mars rovers or Rovers that are on the planet Mars. So here's the one that we've got right here.

A

um This is showing me a default image of Mars, because I don't have uh anything selected yet um I, don't have the specific image selected yet or any detail for it. So what this is is going to show us an image on the right hand, side and then, on the left hand, side gives me a little bit of information, just selecting a Rover and a soul which is the equivalent of a day that we have on Earth.

A

um The soul is a is a day on Mars, which is a little bit longer than what we have on Earth, um and then this little button here is going to allow us to toggle, but through the different images, so either going forward through the images we return or going back. So what I'm going to do is I need to be able to get this up and running and get it working. I'm gonna have to go put this into edit mode and I can specify a couple different things here.

A

So the NASA open API gives us the ability to do um has an API key that we can specify I'm using the demo key, which is giving me a limit on how many times I can use it in one day based on my IP address. But you can register for free and get an aeroni uh own key and use it there. If you want I also have a couple different Rovers we can choose from and then I can also go ahead and put the photos in here as well.

A

So let me go ahead and let me just plug in the number of photo or what photos we want to pull or what day we want to pull.

B

A

First, the page and there we go now- we've got our list of the. um We got, some images that are coming back and so now I can start cycling through a couple of these different images got to switch it over into preview mode, so I can see it display mode and now I can start viewing.

A

All of these different images, so kind of just jumping through and looking at a couple different pictures and the cool thing is- is that when what I've done also done is that when I select anywhere on the card, it's going to open up a quick view of the current image. Give me the ID of the image and then I'm also using a little fact table to write some additional information about the image and to show you it's Dynamic I'll pick a different one, there's a different one: that's a widescreen one, here's another one!

A

A lot more rocks, um I, don't know if anybody else gets excited about this stuff, but uh it's pretty cool there. You go shadow of the there we go. We got a wheel right there. These rovers are huge if you've never seen. One of these things they're awesome, while I'm stopping the demo and switching back over to the codes we can look at that I can tell you.

A

I got to go to um the jet propulsion lab out in California once and get a private tour and got to stand next to a replica curiosity and it's it's big. Those wheels are like they're they're, not they're, bigger they're, bigger than what I can show on the screen anyway. So let's kill the demo here and let's go over to the code all right. So, let's see how do we actually implement this stuff? This is pretty cool, that's pretty simple!

A

Actually so the thing with Aces um that I like to look at them is that when a lot of people look at Aces that a lot of people think that these things are something special and unique and they're not they're, really just I like to think of them as just a web part where SharePoint framework extensions feel very different from web. Parts aces are basically just web parts right. That's I think it's it's a simpler way to understand that. So if we look at the root class for an ace, let's get rid of that.

A

Let's take a look at what we have here. So in this case um it's very similar to a react-based web part, and so what you're going to have is you're going to have a property uh public properties for your for your component and you're also going to have a state whenever the state changes it triggers the entire card to to re-render, okay, you're, not going to see a page refresh or Reflow, or anything like that, it's just going to re-render it and put it back on the screen. The properties.

A

These are the public properties that you can specify on your adaptive cards, Works exact same way as a web part. These are the things that are also persistent. So this is how I'm, storing like the the current day, that's selected, the Rover that we've selected and the API key as well, and then the state for my component or for my Ace, is going to contain a number which is the index of the array of the image in the array that we're current.

A

We currently have selected and we're currently looking at and then the Rover photos is just going to be an array of all the photos that I get back from the extension I'm not going to go through the details of how I get all the data and all that stuff and talk to the nest to the NASA open, API service. That's in this file right here called nasaservice.ts and that's just using a standard request to an open rest endpoint when you're building an Adaptive card, Let's Go full screen here.

A

So when you're building an Adaptive card, you've got these things called Navigators, and so what a navigator is for the different views, both card views, which is the card. You see right on the screen in quick views which think of those little pop-ups.

A

You have to register these things ahead of time to tell the ace rendering engine that this stuff exists, and so what I've done here is I've gone through and I've registered, two things: the card View and the quick view, because you saw we only had two different uh things in the demo that I did and then the next thing we're going to do is in the on a knit I'm going to initialize my state to have to make it seem like we have nothing selected and we have no photos I'm going to register our two cards with the rendering engine, specifically with The Navigators and then I'm going to come over here and look at the data that I've got selected um in my on init, where I've got uh checking to see the properties do I have an API key set.

A

Do I have a Rover selected.

A

Do I have the date selected that I want to pull photos from and if I do then I'm going to update the state one bit of clarification, that I saw somebody put something on quick views or synonymous to modals I, wouldn't say that because modals indicate that you're hijacking the content, they're hijacking the the focus on the screen and that's not the case, I can still keep interacting with the screen, while the quick view is open, so I would I just say it's more like a it's more like a additional like context more like a context menu that I would say so.

A

The other thing we have so that's why I'm just going through and just setting the state for this once I grab the data and I update the state it's going to re-render the entire screen. um The only other thing- that's really important here.

A

That's interesting here is the part where I'm checking to see the uh an event that's going to get raised whenever I modify the property pane, that's going to say that whenever a field has changed, then I want to do something, and in this case here, I'm checking to see did I change the the Rover property or the day property, and if the value has actually changed, if new value is greater than null value and if it is or different than null value.

A

If it is then I'm going to go, try and fetch some photos because clearly something's changed and my data set could change Okay. So the other part that we did here is you see, I've got this render card and what that's telling the SharePoint framework or the rendering engine.

A

Is it saying this is the card that you should render on the screen when you're putting it on the page and that's going to be defined here in this card view now the reason it figured that out is because, when I registered it previously is I gave it an ID which was defined up here in this constantinal on 25 and then it said just go, create an instance of that card view where's. That card view. Well, that's over here in a file called card View.

A

So this file contains a couple different accessor methods that we can that we can do some stuff with all right. So, first of all, when someone selects one of the buttons clicks one of the buttons on my card, that's the submit action, and so I want to be able to do something, and you saw that when I was clicking the buttons going back and forth I was cycling through the array of all the photos that I got back from Mars, and so in this case here I'm checking to see. Was it a submit action?

A

No, it wasn't then get out of here. Otherwise, go grab the current index that we're on and simply go change. The current index on the state value equal to the current index and then plus and you'll, see how I'm, just using a a positive, 1 or negative one is the ID to indicate if I want to go forward or backward I. Don't have to do a check to see if I'm you know doing clicking a next button or previous button.

A

The other thing I'm doing too is I had to I'm in uh overriding the accessor method on card selected, and so that says, whenever someone clicks the actual card view, what should it do? Well, I want to launch a quick view which one this one we'll look at that in just a second.

A

So how do I get the data applied to our card view? The way I do that is I'm. Checking to see do I have a Rover and a day selected if I do or if I do not. In this case here I've got that exclamation point in front of them. If either one of those are empty, then I'm going to return back some default data using the image of Mars that we have from Wikipedia as a placeholder.

A

You saw that when I first started the demo with some text here, this is pretty cool too, because under the older versions of an ace, we didn't have the ability to set the alt text for screen readers. Now we do so I'm using that here now. The next thing I'm doing here is under the else statement. I clearly have a Rover and a Mars Rover selected, so I'm going to change the Rover name to just capitalizing the first letter of the Rover's name, so capital c for curiosity and then putting the rest of it there.

A

The image we're going to use is going to be look at the image from our Rover photos from our state property and grabbing it grabbing the one out for the index, that's currently selected and then I'm going to return back an object of four properties. My primary text, my image, URL my image, alt text and the title. Those are four properties that are expected on a card view for an image card.

A

Finally, I'm also going to define the buttons here, and all this logic does, as you see, is I'm just adding in either a button if I'm at the, um if I only want to return one button back like if I'm at the very beginning of my array or the beginning of my collection or the end of the collection, I've got all the stuff. All these conditions kind of defined.

A

The key thing here to notice here is that you remember how I had the buttons had those little like greater than or less than symbols notice, I'm, setting the ID equal to negative one or one. That's how I'm cycling through my array?

A

Okay! So now, let's go back and let's take a look at the quick view. So what happens when I click the actual quick view? Let's see what happens when I click on the card view that launches the quick view to see the details of the image that I selected all right got it out. So, first of all, Json there we go. So what is that? That's our adaptive card.

A

You use J, you use the Adaptive card schema, which is all done in Json to Define how you want your card to be rendered, and in this case here I'm using the native capability, we have from the Adaptive card templating, which has nothing to do with adaptive card extensions.

A

This is part of adaptive cards I'm using its native templating capability that we have to and using their syntax, where I'm doing the very it's a very similar to how like um uh template, literals work with JavaScript and typescript, where I'm using a dollar sign, surrounded by the mustache brackets and then putting the name of the property. That of the object, that's being bound to my card. So remember in my data method, on my in my in either my quick view or my card view, I'm returning back an object, that's got.

A

It's got a bunch of properties assigned to it in this case here, I have a property named image source um same thing here: I'm writing out the the um the title uh or the byline. That I want coming right underneath the the image and then I've got this thing or then there's a text block some details about the actual photo and then I'm posting out a fact set, which is a a rendering element that we have in adaptive cards um and I'm. Just writing out all that stuff.

A

So that's the template that we're going to use if I come over and look at the actual, quick view class when this gets activated. This is what's going to tell the rendering engine where's the Json for the Adaptive card that defines the rendering for this card and that's the Json we were just looking at and then what photo should we show? Well, let's go grab the photo out of our state array to go, render that out. So that's pretty cool, how the way that that works.

A

It's pretty easy to go through and to pop that data out. One of the things too that since I've got another minute or so here that I want to just I, want to show you one thing: that's kind of nice about this and it's different than what we would see with web Parts with respect to the SharePoint framework. But it's uh it's different, but it's you would argue, it'd be nice. If we had this in in SharePoint framework, web Parts Aces were built from the ground up to be in a mobile first experience.

A

So the idea is that you know performance is fast. You have a lot of these cards like on the screen. So in this case here traditionally we have this get property, paying configuration in a web part where it's going to return back the actual property pane, but if you're familiar with web Parts, you know that you usually Define it inside this method. With adaptive card extensions, it's a little different.

A

What that's going to end up doing is that's going to instead go render out or go load up our property payments to find it in a separate class or a separate file. Now, why does it do that? Because we have this other method here called load, property, pane resources, and what this does is it's using this native capability we have in webpack nothing to do with SharePoint framework, nothing to do with Microsoft.

A

This is a native webpack capability, where, if you comment, if you put a comment right before something that you're going to load, then webpack will split that out into a separate bundle and will only go load that JavaScript bundle when it's when it needs it. So it's not going to so. In other words, the way that this is set up now is that my adaptive card is never going to, in my bundle, the user.

A

So let's say that I'm, the let's say, I'm the editor of the page, but all of you are consumers um of the page, either on your mobile device or on the Viva connections. um App on your desktop, whenever you guys go load the the page where this adaptive card is going to be rendered out, you, your payload, that you download is not going to include anything about the property paying, because you don't have the ability, your users you're.

A

Not you don't have the ability to put the page into edit mode, so there's no need for you to go through and add to download all that extra code in our cases not much code. So it's not really that big of a deal, but you get the point. But for me, when I put the page into edit mode and I say, show me the property pane.

A

That's when I'm going to see this extra bundle get downloaded on my on demand, because now I, my browser experience needs it to be able to get the property paying to do those edits. So that's I mean that's pretty cool. We get this natively inside of adaptive card extensions. It doesn't exist for web Parts. You could Implement something like this yourself.

A

If you wanted to do this, but I don't expect that we'll see that with SharePoint framework web Parts anytime soon, um just because it's a it's a real big change to how you build web parts- and it just doesn't make sense to kind of make that change on the uh now that we've already got the the horses have already left them all of Chris.

A

Kent's horses have left the barn so with that being said, that's everything that I want to end up showing here with this with this demo, I have another one that will do next week that build that makes there's a much more complicated um Ace. uh That's going to show you how to use the geolocation capabilities that we have in Viva connections, both showing location and getting a location in and picking and showing the location from it as well.

A

So we'll see that next week it's a much bigger sample too much bigger, so hopefully I have more time. Yeah.

B

We should be, we have two demos for next week uh intentionally, uh so we're not going to have a third one, so that will mean that will have the 20-25 minutes for that one as well, but excellent. Thank you. Ac on that one.