Microsoft 365 Community Community Demos, 10 Jan 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Introduction to Microsoft Viva ACE development learn module - Getting started

Description

See the new learn module in general and do the 1st Exercise in this 20-minute developer focused demo, delivered by Vesa Juvonen and Andrew Connell. Create a SPFx Basic Card ACE showing SharePoint list data. This ACE reads and writes to a SharePoint List. In hands-on lab, open your Workbench and website and add ACE to page. Look at operation of Card View, Quick View and at the target SharePoint list. Step through the AdaptiveCardExtension.ts, CardView.ts and QuickView.ts files.

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

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

Supporting materials
• Exercise - Exercise - Create SPFx Basic Card ACE showing SharePoint list data | https://learn.microsoft.com/training/modules/sharepoint-spfx-adaptive-card-extension-card-types/3-exercise-ace-basic-card-rest
• Learn Module - Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections | aka.ms/viva/ace/learn

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

We have a new Microsoft level, learning path or learning module, which is focusing on the ace development and this basically a building. A SharePoint framework powered adaptive card, extensions for Microsoft, Viva, home and Viva connection and I'll talk about a bit about what is Microsoft, Viva, home and Video Connection in a second, because we were home is going to be starting to roll out quite soon worldwide.

B

So that is a great opportunity of building extensibility for Microsoft 365 and then then from those Aces you're actually redirected, for example, the Minecraft teams, applications or any other sources. But in this particular case the learn. Module really focuses on Ace development. So how do we build those ACS? What are the different options on this adapter card extensions? What is the relationship between a shape and framework component and SharePoint framework code and adaptive card technology?

B

Sharepoint framework is the basically the orchestrator behind of the scenes for Asus and hitting the API and then feeding the API information for adaptive cards, which are then rendering the uxl as part of this module. There is thank you. Ac for correcting it is a module, is part of this module and there's three distinct exercises from getting started to more complex scenarios, and also this includes the usage of media selection, location capabilities and Aces. So we kind of cover the latest and greatest on the as development as well.

B

It's both available in both written and in video format. So it's up to how do you actually follow up on the guidance so and we'll release? Actually the videos, also in YouTube channel starting tomorrow, and it's all together one hour and a 52 minutes uh in in post in a written and then video formats and you can get it to akms Viva Ace learn is the URL and which is happening there.

B

um So again, it's the best, akm AK Ms forward, slash 314 Ace forward. Slash learn is the location how to get there now. This is all based on SharePoint framework development. uh Sharepoint framework was originally released already in 2017, and it's not just about SharePoint. You can actually build for Microsoft teams, Microsoft Viva and nowadays also for Outlook on Microsoft 3d65 apps. So the same piece of code actually can be running across all of the base.

B

All of the the technology stack technically, however, the ACs are card specific and the aces are then rendered either in the Microsoft Diva home, which is the one on the left side or in the Viva connection, which you can see on the right side.

B

So there's a bit of a difference on the Viva home and Viva connection, uh there's going to be more information on the Viva Home rollout and capabilities and and options in the future, but, as you can see, in the Viva Home on the left side or in the mobile views, they are ace cards. They are Ace components, their adaptive card components which are being rendered in that kind of a card format, and this learning path really focuses on okay. How? What are these cards? How can I motivate find them how they are being exposed?

B

What are the different options and how would I use them, for example, location, information and media upload information in a mobile device view, because these are really designed for mobile first experience. They, of course, work really well in a desktop, but the main target here is the the mobile first I'm, for example, personally using Viva home and Viva cards on a daily basis within my mobile.

B

It's the easiest way to access information and some of the services, but to be able to understand how do we get started on building this Asus I will actually turn the the audience and turn the microphone to enter kernels who's going to do the first exercise on this learning module and we're going to continue this exercise in upcoming weeks as well, and you see we can see the screen. Thank you. Awesome.

A

Thanks vessel um yeah, so I want to just run through the first demo for this, but uh that we have in this or the first lab exercise, slash demo that we have in this module um before I go in there, though I just want to talk a little bit about the module itself, um just to add on a little bit about what vesa just talked about. um This is a new uh Microsoft learning module, which consists of like lectures and Hands-On lab exercises.

A

What I'm doing is the first Hands-On lab exercise um that we have in this module, so um just real quick. This is just who I am um Andrew Connell, uh you can see I'm well there. You go look at that at the very bottom classic CSS problem.

A

That's exactly why I don't do design and stick with the development stuff, um so I'm a Microsoft MVP, specifically around office Development I've been doing SharePoint for actually this year, it's 20 years, uh so I don't recommend that, um but doing anything for 20 some years is a long time um anyway. So let's go into the module.

A

um So what this is? This module is called creating adaptive card extensions with the SharePoint framework, got all my keywords in there there's a link to where you can find it as well. um The link the vest I just showed a second ago is also there. um That is, is also on the slides. That's also been shared um one thing too just to highlight here.

A

If you want to see uh the the videos for this, if you want to see like the download for the code and samples for this, all this stuff is available right now you can get to it. The videos haven't been like um made public or publicized or anything like that, but they're all still there they are um they're all still there they're all publicly available, they're, just not like index. So, if you know YouTube it's basically all the videos are there, but they're, just all listed as unlisted right now, until they're kind of released out.

A

If you go to the intro section of this module that I'm linked to right here, you'll be able to see um a link at the bottom of the intro module. One points to a GitHub repo that contains the slides that go along with the module I'm not going through those, and then it also contains I'm not going through those in this in this demo today, um and it also has a link to the screencast. That's on YouTube, that consists of all of the parts of this module.

A

If you want to do that stuff, all right, I'm going to get out of PowerPoint, because we're going to do some real work here. uh Let me kind of first show you what this thing does um and it's very simple example keep in mind. This is a demo it's made for people trying to learn how this stuff works. So let me go ahead and run this thing. First, um all this is is a adaptive card extension that demonstrates how to read and write to a SharePoint list ignore all the yellow stuff. Those are just warnings.

A

We don't care about those as developers I'm going to come over here and open up my workbench in my test site here. So that's just underscore layout, slash, workbench.asdx,.

A

And I'm going to go ahead and add my uh my card, my adapter, my Ace uh to my page. So here's on my page, you see it says I'm missing a list ID. um The reason for that is because we're going to show, read and write data to a SharePoint list. So if we're going to do that, I gotta have a SharePoint list.

A

So let me go back over to my list I'm going to go to my Ace data list, which is going to contain just like everybody else: I store all the movies that I watch uh in a SharePoint list. No, not really that's pretty lame, um but it's mismix for a more interesting demo. So you can see what our family Christmas movies are that we've been watching over the uh the break recently.

A

So I will paste that in and save my changes and then I'll come over here and I will flip this from my edit mode over to display mode. So I can actually see the content. I. Will click on the um the card itself and it'll show me a list of the movies that we've been watching as a family, so Inception Interstellar, um Dead, Poet, Society, Die, Hard, good Christmas movie um and last night we watched the Batman from last year um so anyway. So let's go back um the movie that's on our list tonight.

A

Is uh that we'll add in just a minute? Actually we're going at it right now. So I want to add an item. I can go ahead and I can click on um add an item. So I can go add an item. So let me go grab the movie, that's on deck. For tonight you just copy and paste because, let's just do we'll type this in and we are watching Fight Club, because my daughter is on a school trip out of town.

A

So she doesn't so we don't have to subject her to this or expose her I guess to it and there we go a couple: more movies, Sixth, Sense, National, vacation and Fight Club got added I come over to my list and I. Look at the ace data and I can see the item that we just added here for Fight Club, so cool.

A

How does all this stuff work all right so now I'm going to come back over here to let's go ahead and close this out, and let's take a look at the code for this now that you've seen how this works so again, if you're not familiar with Aces. Just really briefly, when you click, this is the card view that you get initially and then all these things that pop up are called quick views.

A

If you click on the card view, um you have the option here to display to do something and in my case here I'm displaying a quick view, which is this kind of a display view that I'm just created a carousel to cycle through the items. I got back from my SharePoint list and then the button add item was going to go through and open up a different, quick view that I want to use. So if I come over here and look at the code, let's see how this is all set up here.

A

Where's my code right here. So everything kind of centers around in an Adaptive card extension or an ace everything centers around like like a center of gravity right and that center of gravity is the adaptivecard extension.ts file. That's going to be in your project now. This file here contains a couple things that are that are uh interesting, that you should pay attention to. So the only things that I think are really like that that are really important to pay attention to is that you've got a you've, got an interface for properties.

A

This works the exact same way as a web part does, if you've done anything with the SharePoint framework web Parts, where this is just the definition for all the public signature of your component or you can store different settings. The state, if you've done anything with react.

A

um This is basically the same thing as the state and what the state is is. This is going to be a way for you to store uh name value pairs for your component that are accessible everywhere throughout the component, and that includes in the card views and in the quick view, and whenever you change something in the state, it's going to tell the rendering engine to re-render the card all client side. Now the next section is kind of important here is a list of um the different IDs.

A

Each one of your cards has to have an ID, so we have card views and quick views. Generally speaking, the the card view is not going to be exported because we're only going to use that inside of the center of gravity, adaptive card extension and then in the quick use, the two quick views we have here.

A

These IDs are exported because we're using them from somewhere else, either in my case I'm using one of them from the card view itself or another one I'm, using it from the card view when I click the button, all right, so those are defined, and all that is is just a unique string. I could put whatever I want in here um to make this work like I mean I could even just make this literally just make it whatever I want without any proper spelling doesn't matter, um but we're not going to test it.

A

So just trust me on that one um then. The next thing I have to do is inside of the on a knit. I need to use these things. These things called Navigators. These view Navigators. Essentially, these are just like arrays and I have to go through and tell the Adaptive card extension rendering engine hey. These are things that you can use that we can refer to and we refer to them based on an ID, and then we give it an object.

A

That's going to get instantiated when the view is activated, um and then uh the last thing I'm doing in my um uh in my initialization is I'm going to go load all of my data and this code is not how I would write stuff in a production thing. So don't judge me on my code. This is for educational purposes, so I I would only call set State once and set the properties on both I'm.

A

Just trying to be explicit on what we're changing here in this case, I'm grabbing the title of the list, that's selected and the items from the list provided I have a list ID, that's defined and I'm setting those values. That's how I'm going to be initializing, my my component on the page. Finally, the last thing- that's interesting here is my render card. The other thing, that's interesting.

A

What that's going to do is simply tell the ace engine to um uh which card I wanted to display for my adaptive card extension or for my my Ace and that's where I'm passing in uh the ID. Finally, the last thing I'm doing here is in this in this class. This is from the property, pane or I'm using this in the poverty pane, I'm, saying hey whatever a specific field called our property called list, ID changes and provided it it has changed with my new value.

A

All value check, then I want to do the same thing. I do in the initialization. That's why I want to go, get some data, so I'm just telling it to go back and do that otherwise clear it out. There's nothing to see here all right so now the next piece that's going to get rendered, then, is that when this thing gets added to the page is my card view.

A

So, if I go look at my card view, it's defined in my car view.ts file, this is going to get instantiated because I had a view navigator that was set my card view. Navigator had an ID at something added to it by its ID and I passed in this an instance of this class. So when my my center of gravity class returned back in the render method, the card view ID that's how this one's getting registered. This guy's only got three things that are interesting.

A

He's got what happens when I click the card itself, not a button on the card, but the card itself well, I want to show a quick view which one this one right, the one that we exported a little bit earlier. Okay! Well, do you want? What do you want to put on the car? What buttons do you want to put on it?

A

Well, in this case, here, I can pass back a button, two buttons or no buttons, and in this case here, I'm saying well, if there's no list ID to find well I I can't I can't do anything because I'm not working with the list, so I, don't post that I post back, nothing. Otherwise, I'm going to add my add item button that when I click on it, it's going to launch a quick view which one this one and then finally, my data method.

A

What is that guy going to do my data method is going to display um the uh is simply going to return back an object that is going to get meshed with the card View, and these are some well-known properties on the card view that I can that I can get rendered out now. The interesting thing, though, with this comes in my last few minutes I have here, is to look at my my quick view.

A

So the first quick view is when I clicked on the card and I had that thing pop up off to the right. That was going to show me a list of all of my um uh my Carousel list of all of my items. So how does that work? Well, if I come over here and look at my quick view, what I'm doing here is I'm returning. My data I have the same kind of setup again so I have my data.

A

I have my template, which is going to Define what is where's the the Adaptive card, where's, the Json that defines the Adaptive card and I'm saying it's right there. So you can see that in the project, we're not going to go. Look at Json right now, but that car that Json is defining the structure for my card and it has little callouts or placeholders for where I want to inject data elements to it. What data elements? Well the ones I'm returning back in my data method here, so my data method or my data accessor method.

A

What I'm doing here is I'm passing back all of the items that I get back from the SharePoint list. Item and I'm also passing back two properties here. One called previous enabled one called Next enabled because those are my two little toggles I have on either side of the item and, if I'm at the beginning of the array, I don't want to have a previous. If I'm at the end of the array, I don't want to have it next and I know.

A

I could put some like kind of loop around kind of a thing but I'm trying to keep it simple, and it's a demo so that here I'm just checking to see am I on. The current item is the very first item in the list. Is that the one that I'm on or am I on the very last item of the list? And that's just going to be setting those two properties and and my Json for the Adaptive card? That's got a visibility property set to true or false.

A

It's going to Define if something's going to show up or not the next thing that I'm going to do here. So when I go and then the other thing that's interesting about this I will show you one piece to this I'm going to lie a little bit here. Is that my buttons that I'm using to display stuff so my previous button that has this you know the Chevrons, pointing to the left side versus the chevron's point to the right side?

A

I've got a selected action here that says that my type is a submit and my ID is going to be an integer. So in this case here in previous I want to go back one so negative one, whereas I'm going to use on the Plus on the when I go next, I want to go or next I want to go plus one. So what I'm doing is inside when someone clicks one of those buttons that's going to trigger my on action, I'm going to check and see.

A

Is it a submit and if it isn't then get out of here, otherwise go get the current index that we're on and then just take that index and increment it by whatever the value of the ID is and I might be, incrementing it by negative one to go back in the index to show me which one's there. So what does that? Do that's going to go back and grab change the index? That's going to cause a re-rendering, that's going to change the item.

A

That's going to be displayed inside of my quick view, but then, last but not least, what happens when I click? The add item button? Well, that's going to launch the quick view called new item, quick view and what this guy does he's got his Json set up where I've just got title and description set up and then the whole submit uh Button as well set up if I look at the new item, quick view for this one, this guy works basically the same way, but what's interesting about him, is in his on action.

A

He's checking to do if the action is a submit action um and if it is, then I want to go. Save the item so the way I'm going to save the item is: um there's an asynchronous method and because the on action is not sync, it's not asynchronous. It's returning a void. So you can't just do a special async on here and nobody wants to play with promises. So what I ended up doing was I just wrapped.

A

It up in an iffy um and so I made that iffy asynchronous, and so that's how I'm doing an asynchronous thing inside of a synchronous statement as synchronous as JavaScript can really be, and so here I'm saying go, add an item which is coming from some service that I created here. This is not a demo on working with the SharePoint rest API. So that's all that that service contains all that code on reading and writing to the list.

A

So here I'm going to pass back things like the context, the list ID and then the properties for the item I'm going to save and then once I've saved the item. Well, then, let's go back and let's go get all those items and refresh our array so that now I want to go back and click on the card view. Again, it's going to show me those items being displayed and then finally I want to remove it from the quick view. In this case.

A

This is a cool thing about these Navigators is we have a way to like push and pop stuff off the stack in this case I'm popping it off the stack? Well, there was, and since there was nothing else on The View stack for my quick view, popping it's going to basically close the quick view, but I could have just as easily said close right here, and this would have closed the quick view as well. It had the same effect in this case, however you're going to see in the next two weeks.

A

Unfortunately, you got to deal with me again for the next two weeks, because next week, I'm going to show you another demo from the second exercise from the same module that shows how to do um work with the a um image card View and how we're going to be fetching data from an external service, something that everybody should be familiar with.

A

One of the NASA open apis to show images from a Mars Rover and then the last demo is much more involved on working with the Viva connections, actions for showing and getting locations um using the Bing Maps control, that's available to us. So if you're interested seeing those join me again same time same place next week or same time same place in two weeks, so that's it! That's.

B

All yep, thank you I, say there's nothing unfortunate for you to actually do the Demos in this call in upcoming weeks. Just to correct on that.

A