Microsoft 365 Community Community Demos, 26 Aug 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Getting started on building Microsoft Viva Connection adaptive card components using SPFx

Description

In this 37-minute developer-focused demo, Patrick Rodgers delivers a quick overview on how to think about ACEs (Adaptive Card Extensions) – container control and views (Card and Quick). He then steps through three scenarios (samples) UI and code. 1) Adding a deep link to card or quick view with basic properties, 2) Company news card - get information and display it in carousel, and 3) Microsoft Teams chat – notifications with multiple card views and quick views. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on August 26, 2021.

Demo Presenter: Patrick Rodgers (Microsoft) | @mediocrebowler

Supporting materials:
• Resource site – Adaptive Cards | https://adaptivecards.io/
• Mozilla MDN Web Docs - Destructuring assignment | https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
• TypeScript site - Object destructuring | https://www.typescriptlang.org/docs/handbook/variable-declarations.html#object-destructuring
• Sample - basic-card-deep-link | https://github.com/pnp/spfx-reference-scenarios/tree/main/samples/ace-basiccard
• Sample - Company News ACE | https://github.com/pnp/spfx-reference-scenarios/tree/main/samples/ace-companynews
• Sample - teams-chat-card | https://github.com/pnp/spfx-reference-scenarios/tree/main/samples/ace-chat

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

So, first a marketing slide. So what we're going to talk about today is uh some viva connections. Dev, you saw, I believe it was last time, julie, turner, demoed, uh some great uh samples. uh She built uh she and derek, I believe- and uh so that was very cool, but we want to talk about that a little bit more because viva connections, ace development, is really kind of the next uh step or next piece of the evolution for sharepoint framework.

A

It's not a replacement for it's rather an extension of sharepoint framework, another part of sharepoint framework. You can take advantage of to get uh some customization into the viva connections. Dashboard! uh That's coming up, so uh this is a marketing slide. It's got uh lots of stuff on it, so these uh card views so you've got kind of the card view, which are these little uh tiles on the screen here. So imagine this is on a mobile device. This would also show up in teams. It also shows up in sharepoint.

A

Eventually you can have a dynamic title and icon. You can kind of change these things around. You can change the text. You can have buttons on these cards. The buttons can change based on. What's going on, you have complete control over that sort of thing. We'll talk about a lot more of this in detail. The next step here is this adaptive card.

A

You can have multiple different kinds of views here, so, whereas the card view that first piece is very fixed, there's three right now, there's three fixed layouts: you can use in those cards and for the quick views, which is that center thing those are completely sculpted by adaptive cards, so you have complete control over what goes on there. So you can have simple text display. You can have images all sorts of other stuff and then finally, the sort of third part of this is then linking out to another app could be a teams.

A

App could be a sas app lots of options. There link right to a team's channel things like that, so lots of uh different capabilities there. But let's talk about how should I the developer, think about aces so uh aces are really uh the container control. So an ace has a single immutable state. It's very like react. You can think about it like react, but it's not react. It's not actually react under the hood, but it uses set state. So it's a very uh familiar approach to setting state and state management.

A

It provides a context so very much like spf x. You have this dot context, which tells you where you are in the world and then it's got all the life cycle. Events you're familiar with uh and then some a few differences from spf x, but generally speaking, it contains the life cycle. Events for you and then it uh hosts manages controls the various views so pick uh how you like to describe that.

A

But it is the the host of the views or the view controller lots of obviously different view models out there in the world, but it hosts the views, the views live inside the ace and then about those views. You can have pretty much. I think as many views as you want, but there's two types. The first is card view and those are those little tiles, there's three fixed layouts and two sizes. The sizes are medium and large.

A

So if we hop back real, quick, a a medium card is the single box here and a large card is this larger uh of the boxes, so you can sort of have half of a mobile screen or stretch across the full mobile screen. uh One card view is required per ace, but you could have multiple. You can have any number of those things so, but one is required and then those card views can act as a link. They can have one or two buttons.

A

You need to have a large card size for the two buttons uh we'll talk about that all a little bit more when we get into the code and then finally, uh the quick view cards uh have no defined layout, so you completely control and define those layouts using the adaptive card uh schema or syntax. However, you want to describe that those can have images, form elements, text buttons and more pretty much. uh In my testing, everything seemed to mostly work from adaptive cards.

A

Dot io uh that I tried in there so really neat, really flexible, uh very easy to build stuff out uh and you'll see. I was able to build out some fairly uh ugly because I built them, but complicated interfaces uh pretty easily and then uh you're not required to have a quick view card. So you can have just a card view that maybe links out to your teams app or something like that or you can have uh multiple quick views uh to really. You know provide a little bit more interactivity in your uh ace solution.

A

So that's enough talking, let's get to some code. The first thing I want to show you. I've got three samples here, and these are all now publicly available, uh but the first one is this uh basic uh card uh deep link here- and this is uh really the three samples I want to show today- kind of start, very basic and then work up to more complex and the hope is- and I'm of course interested in the community's feedback on this.

A

But the hope is that, with these three samples we've covered not exactly the the specific task you're going to do, but the uh methods you might do generally to solve these tasks. So the first kind of card is a basic, deep link card we've. Given it a couple of properties here with the url, that's a teams, deep link, it turns out because it goes to a channel and uh we'll hit preview there. And if we click on that we're gonna open up our teams link.

A

This would actually open up uh our team's channel and we're gonna use the web app. Instead, because I'm on my testing tenant- and we all know how fun it is to try and switch tenants mid demo. So, but this is a test uh channel with some some great conversations I've had here with myself over time, but that's it. That's a basic, deep link card. That's what it does. I've got a card on the screen. I can click it and it links somewhere. So how did we build that? And that's this code here?

A

So what we did is we've got our adaptive card extension and these are scaffold exactly like sharepoint framework. You start with the yeoman generator. uh You pick adaptive card extension so where you have like web part application customizer one of the new choices is adaptive card extension and you get this all scaffolded out your main class.

A

Is this ace class and that inherits here from the base adaptive card extension class and it takes uh some props and state uh things. So that's very react like, but again, this is not backed by react in any way that you will ever uh address or deal with directly, but it's very react like so it feels very familiar. It's very easy to build in this and it's also very very much like a sharepoint framework.

A

So it's going to feel very familiar if you've worked in sharepoint framework and you start to pick up aces, I think you're going to get started very quickly, but there's some interesting differences.

A

First off you'll see, we've got an on init that should be familiar to everybody. We've got to set our initial state here.

A

That's very react like a very common thing to do there, but there's this new thing card, navigator and so card navigator is sort of your index of all the views that can exist inside your ace and you have to set these things up kind of at the beginning here and they have a string id and this sort of factory function here, and uh one important thing to note is when I register this card, it's going to invoke my factory function, which can have other logic in it right.

A

I could do more than just say new, but once that's invoked it's going to hold on to that card object that got created. It's not going to reinvoke this every time the card is shown so something to keep in mind there for how maybe you structure your solutions and perhaps how you might build some things. There's a property down here render card this tells it what card to render we've just. This is our very simple example. So we're just returning the card view id which is just the same id you can see.

A

We used to register the card, so we're saying: hey render my card there and then the other thing I'd like to show in this. That, I think, is interesting. If we look at the property pane, this is where we've gone in and added our properties for link url and teams link again very sharepoint framework like, but uh you know just want to show kind of do the same things here, set our settings up and then, in our actual card view card views as well as quick views. uh But this solution has no quick views.

A

It just has the single card view, so we've got three different base classes uh you can inherit from those are the three uh fixed layouts for card views uh there might be more, but currently there's three, and uh that has to do with us trying to keep the dashboard clean and sort of consistent.

A

But the data here is defined, and so uh I'll kind of dwell on this here and not in the next three demos. But the way to think about these views and this data property is you have an adaptive card, sort of syntax or schema, and then you have this data, and so you've got your model, which is this data and the view which is the adaptive card and those get meshed together to create what's on the screen, so this data really think of this as producing the model.

A

For this view right, uh and so this is very simple- we're just taking some stuff from our properties we're just returning it you'll see later, we can do uh very much more complex things here, but right now we're just saying: we've got our properties, that's the description and title, and then uh here is on our card selection.

A

So this is when I actually click that card.

A

You can do a couple different things here, in this case very simple example: I've just showed you can have some super simple defaults like if we don't have a link defined, we're just going to send them to the best search engine on earth, bing and otherwise we're just going to return our properties, the teams link uh and the target url, because we've got our url up there from the properties and that's it. We've built a card view that we can set the link for, and that will link us out to uh other stuff.

A

So if I click on that again, uh that's what we just saw so we'll use our web app and again, my great channel of me talking to myself, which we'll leave open for future demos. So give me one. Second, I'm going to control c out of this and I'm going to get the server started for my next one, and so uh we'll go back into edit mode here and we'll take this guy off the screen, and we will wait a second for our server to get going for our second example.

A

Our second example is looking to cover uh this idea of. I need to get some information and show it to the user in a carousel pattern. Right, we've all written carousels, probably a thousand times in our career, so I've written another one here and just want to kind of show that off, because I think it's another very common scenario.

A

I've called this one company news, but you can think about this being images or articles or, or you know, emergency updates or company updates, or any kind of pattern where you're on a page through this stuff, uh while we're waiting for the server to spin up, let me see uh what, uh if there's any questions here. If it's not react, what is it uh so? The uh aces are not react. They are based on adaptive cards, so the adaptive cards in the background could be rendered with react. They could be rendered with react native.

A

They could be rendered with something else. That's the point of the adaptive cards is they're, going to give you that flexibility, or rather uh us that flexibility to take your work and render it across many different devices as natively as we possibly can somebody want to learn about technical underpinnings.

A

We could do a session on that, for sure, can we have more than three card templates for viva card so right now the card views those tile views are restricted to three layouts right now: um post ga that may change, but uh currently that's uh what is available uh but again for the quick views. You can do pretty much anything you want so go ahead and refresh this. I think we should be good to go here with our company news and there's our company news, and so this loads on up and I've already well.

A

One thing I've got to do here is again: you need to set the card size to large to get the buttons down there correctly, we'll go into preview, and so this is my article title. I can click on this. I get my image. I get uh my article text which you can see here. uh I did learn right now on adaptive cards.

A

You can't parse html, so this is just the raw html from my uh input there and I'm showing you can show the rest of this stuff in this view, but you can see like here's, my image, here's my image. Here's my title: here's my title: uh here's my little svg icon, um here's my little svg icon! Those are all being pulled from the same state, so you're just presenting the information from the aces state in these different views, and I added some functionality here. You can actually like this article.

A

It's going to go back and actually like it in sharepoint, we'll look at that here in a second, I can click next and I can click next. I think we're all familiar with this kind of thing, um but this example, hopefully, is a very general example of I need to pull some content and I need to display that to folks in kind of this carousel scrolling manner. So I think uh that will cover a lot of that. But how did we write that?

A

So let me find the right uh company news code and so same thing. We've got in here. We scaffold our adaptive card and.

A

So we've got our extension and sorry. I was looking at the chat for a second we've got our extension here again. We inherit from the base card extension, but we've got a lot more going on. In this example, uh we've got a card view and we've got our quick view. So this this has the card view, and it has that quick view. So the card view is the part that had the previous and next buttons. The quick view is the part that popped up and showed us the full article.

A

So in our on init uh same sort of pattern here we set our state. uh We register our views, so uh note: there's a card navigator and a quick view. Navigator. Those are separate things and you register your card views in one and your quick views in the other, but they work the same.

A

So just note, there are two different places to register those things, and then I there's lots of different techniques to do this. This is something I like to do because we keep our contextual this and all our variables available, but I set a timeout. So this allows us to to tell the javascript runtime engine hey next event: loop when you get around to it, do this stuff for me, and so what we're doing is we're getting uh an sp instance. uh This is actually using uh pnpjs, but the point isn't using pmpgs.

A

The point is you can use any third-party library in here to do data fetching or any other operation you want to do and all the bundling works. The way you expect all the inheritance works. The way you expect everything works exactly the way you're expected to do. um I just happened to have used pnpgs here, uh mostly because I wanted to test pnpjs that it worked in asus, uh so set state again we're setting the state uh calling set state with our updated articles.

A

So we've gotten our articles and we're gonna set our state there and we're gonna say our current index is zero uh up here our index was negative one. Now our index is zero. The first one in the group there. The rest of this is pretty similar uh to what we saw before we're, rendering our card view id and so forth. So, let's look at our card view real quick, so our card view has a little bit more going on in the data here.

A

So we've got uh if if we have uh less than zero right, so if our article index is at negative one, we're gonna return this kind of uh loading uh view. So this is just returning some some hard-coded data that says loading uh and it's got a svg icon, just as a string in here and so forth, and then uh we do uh return the selected article if one of the articles is selected uh in the in the uh the carousel right.

A

So this is the current one that I've selected and then uh we've got a property here we didn't see before, but this is card button, so card buttons. You can return one or two buttons or undefined. uh So there's no other choice right. You can remember one button or two buttons, and so what we do here is we kind of build up. This is our uh logic here to say you know: hey do we need previous? Do we need our next button and we just you know, put those buttons into this array and return them.

A

So we're returning either one or two buttons, depending on how uh we are in the scrolling through our articles and then on action. uh So on action is our event handler. So event, handlers are uh sort of auto subscribe to this on action event or on action method. Rather so you don't have to go for each button, add and on click and so forth. Every button is going to track through into this on action uh method and you can kind of differentiate what happened by giving your buttons ids. So you can see up here.

A

I've got an id of previous and and next, which correspond to previous and next and all we do is set the state in here. So we're going next, we're just adding one to our index previous subtracting one uh and setting state very much like react is going to reflow uh your rendering and you're gonna get uh your updated view. So this is uh this is showing us the clicking through and that's the actual next and previous happening right. So I click previous.

A

uh We decrement our active index and this reflows and we see article three article 2 article 1 so forth. I think we're all familiar with how to go through arrays, but the next part of this is the quick view.

A

This is the first quick view we've looked at today and quick views are another class inherits from a different base class uh or the same base class, maybe the same, a different base class, sorry, and so in here we again have our data property and this data property represents the model that we're going to bind to our adaptive card view so trying to keep that uh in in mind sort of the mental model, and here we're doing a little another check if we don't have a selected article, but I've clicked on the thing.

A

So imagine if somebody's just like very very fast and they click it before you've had a chance to load the articles we want to handle that, uh but we handle it pretty cheaply here and just put up a thing that says loading um now here we're going to do a little bit more logic.

A

So we've got a little bit more going on than we've seen so far today, so we're going to grab our articles out of the state we're going to get the current item out of those articles based on the article index, we're going to grab the content from that item now to save bandwidth, we're lazy loading, the content, so we're lazy loading that big hunk of content uh that big html block.

A

You saw only when we actually click on and select uh those things, um and so we come in here and we're gonna set this another timeout technique. I really like to set timeout to get an async into the next event loop. You could also just have an async method. You call, but uh I there's some things here.

A

I like, I think this makes this a little cleaner, especially in you know, situations like this, where you kind of want to have these variables fall through and things, uh but so we're going to get an sp we'll look at that sp code. Very briefly, because that's not the point of the demo, but uh so we're getting our article contents uh setting that item content and then we're resetting our state here. So a couple of subtle things are happening here, so javascript arrays are by reference.

A

So the fact I've gotten the cons or I've gotten the item up here. Out of this array. I've changed that item and I reset the state with that same array. That's actually going to reset everything that item in that array is updated and we've reflowed our state with uh the um uh the new articles there so uh and then, if we don't have any content, so this is kind of another sort of subtle thing here.

A

So if we get the content up there and we don't have it we're gonna do this business with the set array, but while we're waiting we're going to set that content to fetching and then we're just going to drop through and return our model, which has the stuff because remember we've loaded everything but the content. At this point, so we can show people the title primary text and so forth and then once the contents loaded, uh this set state will be called and we'll reflow and it'll show the content, then as part of our model.

A

um So uh that's um you know a way to do that there and then we've got an on action here again. uh So I'm trying to look back up here at some of the questions uh so mark's question is so let content equal item. That's actually. uh Those are two very different statements. So the let content equal item is actually destructuring item into content. So you would uh your second statement to be equivalent would be let content equal item. Dot content would be the same, uh equivalent statement there um and uh well.

A

You know I don't know we'll see about writing code at scale. I guess so setting time out here, we've got uh this. Is our action to like the articles and we're going to set the time out again using that technique and then doing similar operation here we're going to get our articles get that item that's selected currently and then we're going to uh if it's liked we're going gonna.

A

Unlike it, and uh if it is not liked we're gonna like it and then we reset our item and then we do the exact same operation to set state reflow the rendering and get our updated views.

A

uh Javascript shortcut mark uh not typescript exclusive, so that's a javascript thing now, um and so the other piece here I want to show you is our template bounce over here to our template, so adaptive card templates are created via json. Adaptivecards.Io is a fantastic website. They have tons of samples. They've got the full schema defined.

A

That's how I learned all this so encourage you to check adaptivecards.io out, uh but these adaptive cards are just defined with json and I'm not going to go through every little part of this, but you can have text blocks images. uh Action sets. This is where we're actually putting our button in here to do the liking um text, block content. You have things like column set, so this is, you can set up tables things like that, uh and then you can have a set of actions that also appear at the bottom of the screen.

A

um So this is, uh uh you know fairly. In my view, simple adaptive card but uh gives us that nice view again of you know click on here and we see our full article uh there so uh great. So that is our company news. Rotate! Oh shoot! I didn't uh sorry. Let me look real quick. I wanted to show you as well the uh not that one.

A

I wanted to show you as well this one uh real, quick, uh the pmpgs part. You can see this in the sample. I'm not going to dwell on this, because that's not the point of this demo, but what I've done here is create my project preset. This is one of our samples as part of our guidance, but I've also extended web to using the extend factory functionality to have exactly the methods I need so they're very easy and clean back in our other code and the other piece of the pattern here. Is this get sp?

A

So in our ace we have access to the context. This is just like sharepoint framework. It's kind of this dot context, uh so we call the get sp in the ace body store that context build up an sp and then we actually uh we'll just keep using that same sp, and we can call this get sp.

A

Then, uh in our views, where we do not have access to the context. So this is a a little shortcut for the pmpgs stuff. You can check that out uh in the repository again. Don't want to dwell on that and so for our last one, which I think is the cooler of the samples here. So let me just get.

A

Going and while that's running up, I will glance up at the questions here. uh I ignore something stupid, a reminder you get spoiled by accelera. Your version of adaptive car, which version of adaptive cards is supported, is a great question. I believe it's 1.2.

A

um It might be more um and there's a couple small caveats of things at this point that don't uh work exactly right yet in aces. So um uh how is ace related to viva connections, so aces are going to appear on the viva connections dashboard. So this is the way you can add. uh Oh no v1.3 supported currently so that question was answered up above. Thank you uh for that. uh So these are the way you can eject your extensibility into viva.

A

So the viva dashboard allows you to create these cards and link out to your other applications or link out to a team's channel or do other uh work. However, you might need to do this is your path to customizing the viva experience.

A

I've probably just upset a marketing person with saying it that way, but I stand by what I said and let's scroll down here and for our final one. uh This is a team's chat, so we're gonna come in here and we need a link to a channel and so hey here's a channel where I've been talking to myself a bunch.

A

um So I'm just gonna get a link to that channel, we'll copy that we'll come back over here and paste that there and uh what you're gonna see, hopefully hey good, it's working so you've seen this now go out and it's read nine new messages uh in the channel and here's here's the channel we're linked to. So you can check my work and count these messages, uh but some neat things here. So this is this sample here is going to uh show you a little bit more of complicated patterns.

A

We've got multiple card views, we've got multiple quick views and we've got uh some real interactivity now in a form talking back to that team's channel. So a couple things I want to show is: if I come in here- and I start a new conversation, I say hello from the demo uh we'll send that into the team's channel and if we are lucky today, this is going to update momentarily here. I think it takes about 15 seconds, give or take hey 10 new messages, that's fantastic, that it works, love it. So this is neat.

A

It shows us how many new messages we have. So you can imagine this on your mobile device uh checking in not necessarily just to teams, but imagine this pattern you're checking into a help desk ticketing system- or uh you know your email or there's lots of you know things in our world right that are notification based now. So this pattern kind of shows you an approach to that now I could click the quick view. I'm gonna caution, folks, I'm a very, very good designer, so visually.

A

This is probably the prettiest thing you're gonna see, but it's uh shows all our messages from the channel. So you can see here hello from the uh the demo there and you can see you've got down the little text there says from patrick, so we're able to get this information from the uh team's channel and uh now I want to go in here and this uh you know: cool little sunglasses icon. uh It actually says here hello from the demo. I can enter a reply hi there right.

A

I'm going to click my button, so there's a little rendering snafu there, but you can see I've said hi there and if we go back to our channel hey, it's always neat. When the code works, we've responded to our team's channel and said hi there. So I can close this. I can see my other messages. I can look at other messages and they're all pretty much me just talking to myself.

A

So it's not the most exciting chat, but the point of this is: we've shown a pattern where we can go pull something get information from it. We've got a quick view that shows us a list of things and then we've got another quick view that shows us the detail of those things and we've added interactivity into that quickview. So we can interact with that thing that we're seeing the details of right. That is probably one of the most common web patterns right. So this sort of highlights how to do all that.

A

Well, how did we do all that? Well, it just so happens. We've got the code right here.

A

So again, we scaffolded our extension using the omen generator exactly as before, we're going to go into our adaptive card extension and there's a lot more code in this one. So we've got five different views, uh three card views and two quick views and we've uh got in our on init. We've registered all of our uh different views. Just as before, again using the card navigator and the quick view navigator, we've set our initial state note. One thing: we're tracking here is the card view to render.

A

So this is saying our base or our default view is going to be this one which happens to be called default view uh make it easy on myself and some of this other stuff we're just going to null it up negative ones, no big deal, and then we have this method set up views we'll come to that in just a second- uh and this is now we're there. So here's setup views and we're checking some things now.

A

So we've got this idea that we have these views and we need settings to actually go to the channel. So the first thing we do is do our in our properties. Do we have a channel link right? If we don't, we set the state card view to render uh setting the state, so we remember it in state the set channel registry id and then we're calling uh this method of the card navigator replace.

A

So this is a very important thing. I want to point out that, while this, uh where is my render card, while this is called and tells you what card to render, this is only called on the initial rendering of the card. So if you, even if this is controlled by state, it will not reflow. If you, if the value here changes, it's not checked right.

A

So you, you are responsible for using the methods of the card navigator, in this case we're showing replace and we're going to show another technique here in a second, so replace says whatever view you're showing just get rid of it and put. This is the view I want you to show now and remember the views all share the same state. So there isn't a huge penalty here, you're setting the state as one thing and the view is another thing, so we're replacing our current view with another view.

A

That's just going to pull the current state and show its self to the world. In this case. It's our card that says hey, we need some data go please set the the channel there and then I like regex is a great way to solve uh problems. So uh you know by introducing other problems, and so what we do is we use this to parse the stuff we need out of our channel link. So if you've ever looked at the team's channel link, you have all the information in there.

A

You need to understand how to communicate with that channel via graph, and so uh if our matches are null or we don't have the number we expect, which is three- uh we have another card we're going to show here, which is hey the channel link you gave us, we don't understand uh that could be because you didn't give us a channel link, that's correct or perhaps channel links have changed right. This could be a bug in our regex, which would be shocking to have a bug in regex and then we're doing the same operation.

A

We're replacing that card navigator view there. uh We're gonna update the state again with our channel base url that we've built from uh the values we captured there. We're gonna set our card view to render and again we still have to do the replaces right, so everyone replaced that uh we've got our ms graph client factory. So this is very much like sharepoint framework built right in so I'm getting it off of this dot context, get client got my client and then I've got a module here.

A

uh I'll show you uh briefly, but again graph isn't quite the topic of this uh demo, but uh we're passing in the client and the channel base url. So a similar pattern to what you saw with the previous one, we're sort of capturing those things.

A

So we can use this module in our views that do not have access to the context and then we're getting a message reader here and that reader actually is just uh it's a it's going to pull the graph service and any time it has new messages, we're just going to add those to our state.

A

This for production is not nearly correct, but for our sample. This shows the general idea of we need to get new messages. We need to add those to our state and update our state.

A

So let's look then at uh some of our views, so I put all the card views in a folder. You can do this, however, you want to do it. um It's really up to you, but I think this is nice, because the card views are pretty compact single uh file things, and so this is really uh just saying uh this is our default. So this is saying you know: we've got this many new messages, so our state message is linked.

A

That's our messages, array, uh icon properties and so forth, uh and we are returning uh from our card selection. The quick view and the view we're going to show is the message list right we're going to look at that in a second. These other two are just saying: hey: we cannot parse the channel link and hey. You must set a channel link to connect the channel. You could have each of these be like a generic error view that you set. You know, values on lots of ways to do that.

A

I did this just because it's simple and clean. uh The next thing I want to show uh is the message list view. So this is taking the messages we've got in our state. Remember this state is going to be constantly updated by this reader, so we don't have to keep worrying about.

A

Are there new messages in other places, right we're just going to get our messages from the state and return those messages we're going to require a template and on action we set the state of what the selected method is and then here's the other option. In quick view, navigator card view, navigator works the same way here, we're doing quick views, but we're doing push so we're pushing into a stack of views, uh a new view right and you'll see in a second. Why we've done that real, quick looking at the template.

A

This is a little bit more complicated template again not going to go through this completely. But uh one thing to note here is, and where do you do so in adaptive cards you have this dollar sign data to which you can bind collections and then the rest of the things in uh this block are essentially gonna, be a repeater right. So it's gonna do a column and it's gonna do a subject uh from each message right and the the user from each message. So you've got your data and then adaptive cards is gonna.

A

Essentially repeat that and you've got your action here to view, and you can see in the data, you can add things into this data property data value things in my case, I'm using the index. We go back and look I'm getting the index there. That tells me the selected message- and I pushed our view in there and I'm running out of time on myself, which is fine and then message view uh is very similar. It's getting our messages, it's showing them off, uh setting our state on our action.

A

We're doing some logic here to keep our polling going correctly, we're setting timeouts again to load up that message. Content. Those message replies, I'm not going to dive too much into the messages module. I do encourage you to check it out, as you have time uh outside of this demo, but you can see how we've done readers uh we've used. Generator functions, uh interesting pattern there to to process delta next links uh and then we've got our onmessage function.

A

That is returning out the actual messages from our uh generator as we get them and then we've got different functions here to get message. Details get message, replies but they're all using that client uh that we sort of grabbed a ref to with that init messages when we were still in the ace.