Microsoft 365 Community Adaptive Cards, 15 Oct 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Adaptive Cards community call-October 2020

Description

In this month's call, Matt Hidinger gave a demo and deep-dive into Adaptive Components, a new concept that enable the creation of high-level UI “components” powered by templating and Adaptive Card elements.
(Note: we’ve iterated on this quite a bit since last month’s community call)

Resources:
GitHub https://aka.ms/adaptivecomponents
Templates https://aka.ms/ACTemplating

Stay connected:
Twitter https://twitter.com/microsoft365dev
YouTube https://aka.ms/M365DevYouTube
Blogs https://aka.ms/M365DevBlog

A

Hi everyone, I'm matt heidinger thanks for joining the community, call if it's your first time welcome, and if you come every month, we're very excited to have you back. This call will be kind of cool it's a little bit of a continuation of last month. So I'll do a couple, quick updates and then we've actually kind of miraculously like thrown together a demo and are really making some pretty good progress on a pretty big evolution to adaptive cards and in a couple different facets.

A

So we're calling it adaptive components so we're going to do a demo and a walkthrough of of what that is, you'll, be able to play with it yourself as well and help kind of give us feedback and drive where this goes so that'll be the meat of what we talk about today.

A

So I just want to call a couple important links. We will have a whole bunch of links, especially if you're new. There is a lot to absorb with adaptive cards, but the biggest one, the one that I want to make sure people see every month is our roadmap, and that includes things we've committed to doing uh things. We've recently released, as well as the a good look at what's kind of in our backlog. That has a high likelihood of being implemented.

A

uh So it's it's divided into three different sections. There's uh under consideration, there's planned and then there's released. So that's going to be your main link at ak dot. Ms slash ac roadmap, just kind of keep a look at that, and it's also our main portal for receiving user feedback.

A

If you don't have a developer account at github or you want to submit more anonymous feedback, you can click, you can basically upvote ideas or backlog items. Tell us why you like it and you don't need to create an account or anything and it'll kind of privately send to us and that's the data that we use to really prioritize what we're going to work on and build next, so keep an eye on that. Pin it if you like, and it's really your best opportunity to control the direction.

A

I want to call another thing, so we had an ignite session by some different folks, some folks on teams. It was called elevate, user experiences with adaptive cards and teams. I don't have a short link so check out that session. It's pretty great and it really dives into some some team stuff in particular.

A

The last thing is we're doing a power platform focus group next week, so next tuesday uh 8 30 a.m. I know it's a little early for some of us, but we wanted to accommodate multiple time zones. We are looking for a couple extra people, so if you're interested in that, if you're a power user using adaptive cards, we're going to focus pretty heavily on power automate, but we would still like to hear about the experiences people have some of the needs. People have some of the workflows.

A

People are doing with the power platform and adaptive cards. So we, if you'd, be interested in joining about that. I can give you more details, just email matt.heidinger at microsoft.com, and it will be about an hour about 45 minutes of you know things like that, so that'll be next month and we're trying out these focus group things.

A

I'll just be honest, so we did one last month that was pretty good um learned a lot about how to do virtual focus groups, so we're certainly on a learning journey on these things, we're going to try and scope them a little bit to our different customer segments. So this one's specifically a power platform we'll likely be doing a different one with some of our more traditional devs uh and- and you know, trying to understand the needs and motivations of our different cohorts.

A

If you will so okay what's next, next is the big thing, so adaptive components. So a whole bunch of links are here, but this github issue is your start of it, and I want to summarize just kind of the two big motivations behind adaptive components. One of the things and I'll be honest. This has been a recurrent message coming from the focus groups, we've done meeting people at ignite uh talking to some of our more vocal members, like tim uh and sometimes tomash as well.

A

um We we've we've heard people sometimes have a hard time getting started like how do I just get started building cards? How? How can we more promote, uh reuse discovery? Some of you who've been a long time. Follower of this call. We've we've tried to build this thing, called the template service to help with that. But really it's just about you just want to build a car. Do you want to build a great looking card and you don't necessarily want to build it from scratch?

A

Maybe someone else already has a really great way to put a file in a card, or you know a restaurant look up or like even a website url. So that's the concept behind components and it's a whole bunch of really cool things working together, which is why, last month, all we really did was kind of a spec review and that's a little boring, but we were at least just trying to get feedback from the from the community.

A

This time we've actually been able to prototype it a little bit and, like I said you will be able to play with it yourself so diving in what the heck do we mean by component. Here is what we reviewed last month and I'll give a quick example. So, in this card there are things if you're familiar with adaptive cards, we have ui primitives the ones every ui framework has like text blocks and images and columns, and things like that and there's also other things in here.

A

So if you look at this card- and I do apologize, I know it's a little blurry, so hopefully it's at least legible, but we'll see the demo. So this will make a little more sense, but this was the inspiration behind components. So you've got a text block you've got a text block, that's wrapping and then you've got what they were. Calling this file chiclet just a little preview of a file. It's got the icon, it's got the file name and a url some actions and that's a thing. That's the thing: we're calling a component.

A

It's a file, it's a way of previewing a file. You'll, see more examples of these things, but that's the general concept and also in this card is another component and it's a it's called the user component or sometimes persona, and so in a user.

A

What we're typically seeing is you know the the person's photograph or profile picture along with their name, and you usually get some kind of mouse over behavior right like if I mouse over this person, I would usually get the live persona card that you're familiar with, and outlook and teams and stuff like that.

A

So what a lot of this is is how can we allow people to create these components that are really just they're? uh You know to use like a physics or a chemistry analogy, our text blocks and things are all like. Our atoms and our components are more like molecules, they're, just this higher order concept that puts the atoms together in a certain way and says: hey here's this.

A

If you have a file or you have a person, you know you can use this another example and I'll skip some of the definition, because we'll just jump right into it, but another example is a thing this is like. I just have this data, there's things all over the place if you're familiar with schema.org, which is a huge effort.

A

I'll show you what a thing looks like by you know: whenever you either google or bing, something you get all those cards that surround your results. Those are all built by this semantic metadata that is usually backed by schema.org. So it's everything it's like this is a thing or whatever and a thing usually has a name, a description, an image. So that's a way of getting a thing and now again a thing is just anything: it's something: that's got a name and description and image.

A

The next thing we wanted to add- and that will demo too, is that for a given component, there's very likely going to be multiple views or layouts.

A

So, for example, if I'm looking at a thing, I may want this, what's known, as you know, a hero view where I've got the image on top and then the name and then the description or maybe a thumbnail view where the image is on the left and then the name and description are on the right or a stack view where the image becomes the background image, but the name and the description is the same. So for a component. The data that you're sending name description image for a file. It's the file name file, url.

A

The data is always the same. It's what it turns into. That's that's a little different, and so we wanted to support that. And, lastly, these things are purely declarative files uh which we'll get into which enables a really cool way of promoting reuse and discovery.

A

So hopefully, with that backstory I can say this is what we went through last month. uh What we've ended up been able to build, and this is a little bit- um this will be a little buggy and it'll also be a little bit slow at times, because it's on our very free azure function tier, but it seems warm and so well, so so bear with me a little bit. uh If, if this goes, we literally just got this together uh last night, here's the designer again you can play with this.

A

uh I will admit it's a little bit. You know you'll some, some slowness with the service and whatnot. This is very much very much pre alpha. This is, like you know, you're getting a live demo and we'll slowly iterate on it so expect it's. uh You know, expect us to work through this over the next little bit, but we wanted to get something for you for today.

A

Okay, so what I've done? I've pulled up the designer I've clicked new card and we're now at an empty card and here's the new thing right. So we've always seen I can drag in a text block and say you know: double click, hello community call wow. It is so hard to type with this microphone floating in front of me um and then I'm going to drag in a component.

A

This is the new thing, so I'm going to drag in a component right here just like I would dragging anything else, and it's saying the component name is missing, and so what we can do david on our team built this pretty cool component picker and what this is doing is hitting our service, which is which we will go into. But there is a service that basically shows all of the available components and they're grouped by a namespace and a name, and so I'll start out by just doing a very basic like stock quote one.

A

So iextrading.com is a very popular financial api people use it all the time to basically get stock data, all sorts of data. So what this is is an iaxtrading.com stock quote. So I'm going to click on this one and show you what happens in the card. Obviously, now I've got a stock quote in here, but the cool thing and how this is very different than what we had with the template service is. This fits naturally with my other card elements.

A

I can drag in another text block here and say you know, look look up there with with these cool carrots.

A

Look up there for a stock quote, you know whatever, so I can compose these things much more flexibly than I used to be able to, but so what the heck is this component? So first we've done some really cool work on the property sheet, so that when you click on things, so for those of you are like really brand new to this. Let me just quickly see so when I have a text block well, like most designers, we have uh the property sheet. That tells you what you can do with you know a text box.

A

So if I want to change the size to large- and so we wanted to follow the same thing with a component, the thing about a component is its data is dynamic. So when I click on this component, which name so the component name is idxtraining.com stock quote. This is a stock quote component and there may be different stock quote components so, um like maybe nasdaq has an api.

A

I don't know if they do, but if they do and they want to have their own way of viewing a stock quote, it would be something like stock nasdaq.com, so everyone can start to contribute and build these components that they can share uh in a github repo and a service that that we can basically learn so, hopefully, that's falling along and again I'll try and connect these dots as we go, uh but I wanted to kind of get through the end to end and also by the way open it up to questions as people have.

A

That said, if people have completely clarifying questions, please do raise your hand, because I want people to be able to follow along with this. If you have questions, I'm like oh why'd, you do it that way or how are these things happening? I absolutely want to take those questions, but we'll do that at the end.

A

But if you're, just kind of lost don't feel bad, raise your hand, it's totally cool and we'll make sure you're following along so what's happening, and I can show you in the json just as well, so the the json actually might be an easier way to to look at this for now.

A

So what I've dragged on under my text, block that says, hello community call is a component and that component has some properties and that's basically the data. So, as I say, msft that's happens to be this. If you know, what's you know our fans over, you know, let's do like apple or something so aapl, which is. Is it apple corporation? I don't know what their full thing is. um Oh maybe it doesn't actually update in the in the json. I have to change it in the property sheet.

A

Oh yeah, okay, there it's working there so now you're seeing some of the the cracks in our early demo, but you totally hopefully get it so what's happening here. Is I'm changing just the properties, I'm changing just the data? What symbol is this? What's the company name? What's the change value you have, you know no idea what their stocks is doing right now. What's the change percent, when was the last update, this is in unix epoch format.

A

That's again how uh there's one particular uh how iex trading has their data and what you're- and I can you know- change like the price and things I can change the open price. I can basically just massage the data and the ui just gets updated. If I change this uh change value to 6.3, so it's up six dollars watch when I change this to negative.

A

So as I change it to negative 6.3, the entire component updates its ui to show it just changed. You know to a red, color and the arrow went down, but all I had to do as a card author to put a stock quote in is drag in this component.

A

I can choose the stockhold one and I just have to update the data and you can see in the json here most likely. You know if you're hitting that api. This is the data that that api sends you. So basically, if you happen to be a customer of iex trading or something you hit their api, you drop in the component. You fill in the data as received from their api and just put in this name and literally with those three pieces.

A

You get this full ui, completely minimal, minimal work. Basically, you would drag in a component type in the name of the component. You want a stock quote and then fill in the data, and you get this really nice uh automatic uh representation of of say a stock quote. So there's some really cool things happening here. I will because we've got some time, I'm going to dig a little bit into uh into.

A

You know the implementation side, but let me know if that didn't make sense, I'm going to show one other example, possibly a little more simple one, but let's say I'm going to have a new kind of blank card here. I'm going to drag in a component and this time you know, I just want that thing component, and so a thing again is just is anything um a thing.

A

Just has a name, a description, an image and so, instead of adaptive cards, maybe it's matt heidinger, who is also a thing and he is a person and I have a photo somewhere that I would be able to get. But but hopefully you get it now- here's what we talked about again with a thing that data type name, description and image.

A

We want multiple views of the same thing, so we have this view drop down and a com. Every component gets to decide what views it supports. So a thing happens to have multiple. It has this thumbnail view or it has this stack view, which could probably be improved a little bit, but hopefully you kind of get there's different ways of interpreting that same data. So I just say I want a thumbnail view now, what's really cool about this?

A

Let's just uh maybe I haven't tried this, but let's see if we can copy and paste this okay cool. So now I've got three people: I've got three components, let's say: we've got matt, we've got david and we've got shalini and uh oh yeah, so it's not updating from the json, so you'll have to bear with me from that that will work. Obviously, oh okay. We've got a couple of bugs it's updating, all of them, so you're seeing kind of the pre-alpha state, but hopefully you can sort of get what this would do.

A

It makes it very easy, and maybe you want the top one. You know you're in your card. You want the top one to be kind of the hero view or you want like three of these stack views.

A

um You know again it's it's showing a little bit of the the composability of these things, where you're not explicitly laying out all these things you're not having to do here's a column set. Here's my thing, it's just very, very short and concise. By saying I just want these three components they happen to be things. I want the view of thumbnail and just here's the data that that backs them.

A

So that was the thing I'll do one other quick demo and then show the how the heck this thing was put together and how you build components and if I can think about it I'll tee up some suggestions from the audience. Maybe I wanted to kind of build one and show you how easy it is. We can build one and then publish a component to a repository, so I saw a question in there is the plan to have a registry there, and that is the plan.

A

We will offer a centralized repository, but we will also make sure this works in a decentralized way and I'll explain a little bit about that uh in a little bit. So, let's drag in on one final component, I'm going to choose and again you'll. Imagine this uh by the way the the the evolution of this picker component thing is you this is showing the whole list. Let me see if that's serviced a lot. Sometimes I just have to reboot it.

A

So if you get this and you're testing it right now, sometimes it's because the service is is slow because it's on a free alpha tier, but sometimes you just need to refresh the the page.

A

If you, if you happen to be hitting that so I'll, go to new card and drag in the component, and so the final thing we'll do on this page is you'll, be able to have a box in here and you will be a search right. So, like you know, if, if you're just getting started with adaptive cards and you're like do you guys support files, do you support uh music tracks?

A

You know: do you have calendar items you'll be able to type that or like a github issue, you'll kind of see and the hope is over time? If, if we do our jobs right and make this really friction free that we'll get a lot of people contributing to this, so we're hoping that you'll see components from all sorts of places like we. We pre-populated this where there's github.com issues, there's graph files graph users iex stocks quotes schema.org, has things and also a local business, I'll show and again with the local business component.

A

It just does this, so it pulls in a component. It pre-populates the data. This happens to be, you know a business, but this is showing some pretty cool stuff too, like there's a star rating. So, depending on um you know what what the rating oh yeah, I can't edit the json keep forgetting so with that small bug, but this, I think, makes it so much easier to just get started. You've already got this data, maybe it's your own data.

A

Certainly what I'm showing here is public internet facing data, but we absolutely want to make it work that if you're a business and you're an organization you'll have your own components, most likely, maybe you're a group that is in a microservices architecture and you've got a whole bunch of different teams.

A

Well, this gets us a lot closer to a world where api owners, the people who send that data can also say- and here's a really great component for our data. Like someone somewhere owns this data shape right. This is how a local business is. It's got an address. It's got a review since they're most familiar with the data.

A

Maybe you know if they're a small company, maybe they don't have designers and things maybe they're like and here's the best way to represent our data, so you will very likely have your own internal uh component repository that isn't necessarily for public consumption. You know it's just for your business uh and your needs, uh so we want to support that and I'll sort of explain how you would even maybe get get around that today using using what we have so cool. uh That's a look. I see a bunch of questions coming in dana.

A

Can you let me know- or someone like? Let me know if they're, if they're just questions on like, why are you doing things totally cool? uh If people aren't getting it.

B

um There's a couple one asked: if the adoptive card itself will become a component.

A

um Let's let me hold that question and ask a little bit. That's a good question and I think so yes, uh but let's, let's save that for some of the more discussion I'm loving by the way, thanks for the chat stream kind of filling up with stuff, that's that's cool. I appreciate the the the enthusiasm with some of this.

A

So the the final thing and then I will just kind of take it to q. A is how did this whole thing work like? Let me let me do a quick. What could I do uh to try? I was trying to think like what could we build like a really quick thing and actually maybe that's what I'll do real, quick, we'll build? One we'll publish it and it should take less than a couple minutes and then and then, while that's building we'll we'll we'll take a couple questions.

A

So let's say uh right now: I've got I've got my component uh for steam.. I've got things, um let's just do like a music song, a music recording. So here's what it looks like we've got: a separate github repo in the branch called components and again I'll share these links. So don't worry if you're not following along, but we've got a folder of all the components in a github repo and they're grouped by the domain. So these are all the components you saw.

A

So when I go to schema.org here's the thing and here's the local business, that was the the molten blind one. So if I click on thing, here's what a component looks like it has a name: it's an adaptive component. It has a name. We provide some sample data which makes it easy. That's what, when you drag the component onto the designer it populates with that sample data? That's why you get a thing out of the box.

A

So by the way I do want to explicitly mention one thing: there is a service involved here so when, when I'm clicking choose here- and this component list is loading, it is hitting a service, so the designer itself doesn't have any components baked in. uh If you you know, I I just want to make that clear like when we build and publish one it will be available, we'll click on choose and we'll see music right there like without doing anything.

A

So it's very much a world of uh the client just is learning and getting better with without any updates, and so that's what I'm showing here in this github. This is. This is the service where all the the component definitions live, so just to make that that clear, it's not embedded into the designer, so it has some sample data.

A

It also has a schema, and this is where you define: what are the properties that the the purely data properties that this component needs? So it has a name. It has a description and it has an image, and this is what we use to build up the property sheet. So I'll refresh it real, quick and show you what a thing looks like. So, if I drag back on a thing, some of them don't have all this figured out like so now. I click on that and you'll see here, name description and image.

A

So this property sheet is being automatically populated, dynamically populated by the schema of this component, and that's where you can say it's a string. I think I can't remember what level of sport we got, but you can say if it's a boolean, so maybe your data, we certainly supported numbers. So if you look at the stock one, you know you could see that it's numbers, so you basically describe what's the shape of your data and then you describe the views and in thing every component will have a default view.

A

So here's the default view and it- and this is where you see it- it builds up. This is where I kind of I don't know. If I lost you, I literally made up that metaphor on the dot or on the spot, but the molecule the atoms metaphor.

A

This is the molecule and then the view basically takes all those components. It takes our adaptive card elements our primitives and binds them to the incoming properties.

A

So the default view has a container and at the first thing, is an image and then a text block, and then the description and it's using our templating binding language to to build that stuff up in the thumbnail view. For a thing it creates a column set and in the first column, goes the image and then the second column goes the name in the description. And then in that stack view which I showed, and I can again show you that so that we can go to view thumbnail.

A

You can see it's in a column now and then, if I go to stack, it actually makes the image a background. And obviously it's a really poor image to choose for this. But if it was a prettier image, it would look, it would look decent and all that's doing is taking the container and it's setting the background image property to the image.

A

So it's just changing what ultimately adaptive card elements get created from that same data and if we ever want to add a new view to this, which I guess is something we could do as a as a quick demo. uh Let's just take stack here, so this is my vs code version of that same repo. So I could. I could edit it right here uh just to show you but I've cloned this repo here and so we're going to make another view.

A

It's going to be called demo and all we're going to do is add in a simple text. Block that says: don't use this. This is how creative I'm feeling right now don't use this view.

A

It's just for funsies, perfect. Okay! So now we did, we add a new view called demo. It's gonna do the same thing as the other one uh and, and it basically just added a new element in here, and I just I just formatted it real quick, but it's basically just adding a text block to the top with some hard-coded text. Don't use this view as just for funsies, and I could you know, bind to different properties.

A

I can do all sorts of stuff in here if I wanted to make this more real, but that'll be one example, and actually what I'll do real quick is I'll just commit this? I made a demo change change, commit this to our repo and I'll push it and that'll take like a minute or so to build, and so I'll keep talking while that's happening.

A

But what we expect to happen once that builds and the service shows up is we'll refresh our designer click on the view, and this will see a new item in the view called demo, and that is a pretty cool example of the client just learning new behavior out of the gate, so maybe that'll be as as simple as our demo goes, and we can. We can take some questions, but if we want to- and if we have time, I can show you how easy it is to just add a whole new one.

A

So all we do you know we go. Let's say you know: we've got a github issue whatever you basically just create a new component in here and follow the same steps. You say: okay, what's this component's name? What is its sample data? What is its schema and what are its views? And that's it? You follow that same formula and that's all we need to discover components.

A

Dynamically as new one gets added discover what properties they support, so a user can automatically fill them in and then discover what views ultimately get uh get rendered, and what's so cool about this is you can see, we can just drag it around. It's it's just part of our everyday adaptive card so, like you can really build out these. Really.

A

These really neat things. uh In fact, if I can build it, if the new one's working, I could show you that file one. What we could have done is created that um that file, one from the original I mean this was our original inspiration for this thing. I'm looking at this card and I'm seeing okay text block text block file, I mean we could.

A

We could totally recreate uh recreate that you know in a very easy way, and I won't do it all right now, but you know proposal requested really really quickly and it's like what would it say something like fy2020, something something and then they drag in the file component, and this is where I would choose my component. I would say I want a graph.microsoft.com file, looks like it's. Loading might be trying to load we'll see if it uh we'll see if it loads up um but yeah, and then you can really just recreate this exact. Look.

A

You've got this text block text, block file, blah blah blah, so okay uh tons of tons of stuff. I just went through. Let me wind back. If people want to raise their hands, though it looks like there is one hand up. I can start going through. That list uh looks like mark. Do you want to unmute and and kick us off.

C

uh Yeah I've. Can you hear me? Okay, yes, okay, great um I've been uh putting some comments on the side and uh I see a few people have done the thumbs up on it. So um one of the things uh I was asking about is uh if the components could use templated data and uh tomas uh confirm that it can yeah.

A

Yeah, absolutely yup, you can do binding right in there. um Yes, it will work.

C

And and then just one other thing, I I just kind of popped in there I said it'd be cool to have a component that it serves as a data input for the data for the components themselves. So, if you're pointing off to a schema.org restaurant, let's say, and uh you need all the data to be filled in by somebody, it would be great to say, oh uh render a card that will accept the input for all those data values for that schema render.

C

Yes, I can just accept that data and I'll suck it into my database for by you know creating the the json for that card. When I want to present.

A

It again yeah, that's cool, to hear you would uh like that. That is definitely on the roadmap. If you we a couple months ago, we did demo on the template service. um We we we could build a an editable card, so with text block based on a json schema, so you give us the schema and we'll basically render kind of a similar thing to the property sheet, only it's in the card, and it makes it so yeah.

A

If you don't want to display the the thing you basically want to fulfill the data, and I think saying you want an input set of inputs representing that schema in the card itself.

C

Exactly just to make it convenient, because uh the thing that we're using cards for would totally be helpful to uh allow a third party to input all the data for us. You know we just present the parts they now fill out, all these properties and uh which actually brings me to one other suggestion, uh if you're using a templated uh solution.

C

uh If your source template says I'm expecting data to be in the the in the data json, but the data is not there, it would be rather nice to have a way to in the template json to have a property. It says if this portion of the data json isn't provided it's missing for some reason don't render this section.

C

uh In other words, uh you know I don't have everything in my data to compose everything. That's probably should be shown in that uh subsection.

A

C

A

I think some kind of uh have you seen our dollar win concept.

C

Yeah yeah, I was actually considering, if that's maybe an option to prove yeah, provide that kind of ability.

A

It is at a kind of broad strokes, like you want to drop this entire object. If you need a little more fine grained, uh we do have kind of null checks. You can do in the templating, so you know. If, if you know you could do something like if title is, I can't remember like just blank or something or not what exactly you can do a little more stuff like that, but that's a little more heavy-handed.

A

So if you have a scenario that you you think even both of those answers are a little kind of clumsy um be happy to hear about that and see. If there's improvements, we can make.

C

Okay, um I don't want to hog all the time, but I I'd actually uh bring it up to your attention here in order to provide this kind of functionality. I I use the html renderer quite a bit and uh we're the documentation indicates that we are to provide all the event handling for everything that happens in that renderer.

C

The problem is, is that when html is rendered for each element, there is no ids is set on any of the of the element objects, the buttons uh you know they have no id on them. So I can't you know conveniently set a a listener to that button, and it really hampers me so I I I did provide a suggestion of providing as a base object for every item in in the schema to put a tag: option: okay, um yeah. I think you may have read my my suggestion.

C

uh I don't know if you did but uh anyways.

A

I'm not yeah me, but certainly bring it back to the top of our.

C

A

Me or post the github issue.

C

A

Come up a lot and yeah, it probably just fell by the wayside. So sorry about that, no.

C

Worries no he's. uh That's all I have, but thanks for taking my uh awesome, my hand raised great.

A

Yeah thanks thanks mark yeah, I see another question. uh Jeff.

D

Yes, I just had a quick question, so um we currently implement some adaptive cards into teens and I'm just wondering teams kind of has a a constraint on the size of the cards, and I'm wondering if this is a way to tell within the designer if this is going to be something that's supported within the teams, because I think it's like a 20 28 kb limit yeah.

A

D

And, as you add more components to it, obviously the size is going to increase and wondering, if there's a way to to notify the design. The engineer when he's designing it that this could could possibly go over the size.

A

Yeah yeah, that's a great suggestion. I don't see anyone from teams on our call today, um but I'm pretty sure in q4 the quarter we're currently in count or q4. They are removing that size limit uh significantly bigger like like, like 10 fold plus, um and so hopefully that gets around it. That's the last I heard was q4. I can check on that. I think there actually is an issue in our github.

A

If you just search for team size limit, you might be able to follow it and you can watch it because that's the one I've asked the team's folks to comment on once they address it, so that you can at least kind of be a prize to that. That said, if we can't address it, I will note down that we should. um We can make design time improvements to to make it so you catch some of these things earlier awesome.

B

Yeah to add to that, I just um got in touch with the team's pm for that, and it is coming soon and they'll share more as it moves into preview. So.

E

B

For more information on that coming soon, as all I can say now,.

D

Great appreciate.

E

D

Thank you very much talking about the full width uh issue, or is it something else that you're talking about in teams the card itself doesn't get full width uh like for.

E

Example, so it's not.

D

So much about the width, it's more about the actual content itself. If there's too much content, it gives you a warning message.

A

That said, we are fixing both of those things, so the the width, the the getting more width- will be rolling out shortly. They actually covered it at the ignite talk.

A

um I think they may have cut it from the content just to keep the content smaller, but it's still in their backlog, so the cards will get additional width uh in teams soon great. Thank you, okay, so tons of chat. If anyone else wants to raise their hand, please feel free.

A

Otherwise I will scroll back and let's actually just see real quick. I don't know if anyone else has a better handle on which question we could dana. I don't know if you got a handle on it.

B

There was a lot and maybe um tomas has been answering some of it around um around storage and cdn, and the best options um around that. So first scenarios thomas had said to send adaptive cards using power automate, the cdn is transparent to the user um and if that's not an option, someone else talked about a workaround using the graph api yeah. A couple comments around sharepoint. So if there was anyone who had a specific question around the storage and your scenario, we're happy to have you unmute and ask.

A

Yeah and just add a couple: some color commentary there so right now we're backing these things in a github repo and think that that makes sense for public components, schema or microsoft, graph, etc, like that are meant for this general consumption.

A

For those of you that want to store, you know, certainly you're using maybe um cds, I can't remember if it got renamed to something I think got kind of like a cool name with a fancy word in it. But if you plan on storing these components in other ways, I'd love to hear from that. Like tenant storage, um it's not an area, I'm an expert in by the way. So it's very much I want to kind of ground it in you know.

A

What would you use today if a github repo wouldn't work and by the way you would totally be able to fork this repo and have a private repo?

A

The the renderer api, the other side of this coin is, you will be able to configure your component registries live so the default one will be baked in and right now it's it's looking like it'll, be something like. I think: api dot, adaptive cards, dot, io components, that's what we're thinking will be the default one, but you will be able to remove that default. If you don't want the default and you will be able to add in your own, including multiple registries, so it's kind of like a first match wins.

A

So maybe you know you want. You've got a handful of them locally that you want to find first, but you also don't mind supporting the public ones, so you can kind of enter what your preference is in, what order those components get resolved and the quick thing I'll say. So I drag again, let's see if I just restart it. Let's just see real, quick and I'll refresh this dragon.

A

Let's see if, let's see, if our view, our weird view we made for the for the thing is going to be here, so we went to again I'm picking a component. I happen to be picking thing.

A

I click on it and the view we've got a new one called demo and if I click on it just says, don't use this. It's just for funsies, so we just completely like someone somewhere can open a pr added interview to this thing and the thing component just got better. I was able to just now use a whole new view again. We you know, I'm the same person doing both, but hopefully you can imagine a world where you know you're you're, not necessarily the component author.

A

Someone else is defining what a thing looks like and making sure it looks great and providing reviews. All you have to do is say here. I've got a component, it's a thing and I want the demo one or whatever um so pretty neat uh process. I think for for really getting to this distributed contribution and really empowering a ton of people to to create these things.

A

And one final thing I'll say on that too right now, obviously, you have to just edit this json by hand, I'm the one who built all these components and it's a bit of a pain. You know to just do it in json and visualize what they look like. So we do plan on thinking through and making building components in the tool, a first class thing. So you know, if you don't want to just edit json by hand, and you want to be able to author components, we we will think through.

A

What's the best way to uh build a component uh in in the tooling as well and just kind of view, those during things.

B

Hilton had his hand raised.

A

Oh okay, great uh yeah, hilton go ahead.

E

Yeah, um hey, hey thanks, um matt, um so, first of all, thanks for this it looks great, um I think, friends, don't let friends design cards in in raw json, so it'd be great to have that designer coming. I just want to touch on the uh the card hosting or internal repos. um I think, if you know, if the organization has the capability to to, let's say have you know somebody set up a github repo or something like that?

E

Obviously that would be um you know perfect scenario, but I happen to have this with uh putting images into adaptive cards recently I had users who were building some cards themselves um and were struggling to to kind of work out where to put their files. um Just you know raw sort of jpegs and so on, and it touches on this as well.

E

The same might be the case where you know maybe a smaller organization or you're, just not sure who to contact you you're kind of more in the power user scenario, and you really just want to host either these cards or images or anything. You know that you want to use in a card somewhere um sharepoint. Obviously you know I mean as much as you know. We have other options, you know we're kind of all within the you know, the the m365 family would be great to have the ability to use sharepoint for something like that.

E

So I mean the cdn is almost a second price because there's additional setup for that, but you know at least that's a one-off, um but yeah yeah. I realize you know this is kind of jumping into teams and then jumping into sharepoint, and you know things beyond beyond you know your your uh you know personal control, but just maybe to sort of explain that scenario would be great.

E

If there was you know, sharepoint as a super, simple document, um storage mechanism, users could just kind of drag the content they want and be able to use them in the cards directly.

A

Yeah I appreciate that perspective and totally think there's opportunities for us to to solve that um even hosting a side. We do have a current limitation in uh this image url well for right now it has to be kind of a publicly authenticatable url. So a lot of people in power platform today, if they have a sharepoint image, they're running it through a conversion encoded and then you can actually send the base64 encoded payload to adaptive card, but that's limited to about two kilobytes.

A

It works great for things like icons, but you know high-res images really get scaled down. So I think there's a lot of opportunity for us to figure out uh one. How do we access uh some of these images that might be behind some authentication? Presumably if you're in teams and teams knows who you are, I know there's ways we can solve it. We need to kind of think holistically on what does that look like to access and tighten some of the more the m365 integration.

A

I think when it comes to the storage and and the f referencing of things.

E

Yeah yeah exactly so that the suggestion to use a uh public mode, sharepoint cdn was just you know, one possible solution. If you're explicitly saying this is public you're, you know you're sort of making sure that anything there is is something that you know it deals with the authentication issue. At least the restriction is that sharepoint won't um the the the sharepoint cdn engine won't allow uh calls from a non-sharepoint.com referrer, okay, gotcha.

A

Thanks hilton, I totally appreciate that and- and I noted it down um we'll we'll- try and get some traction on it, but if you um have any follow-up feedback or anything or just want to get it mail, like you, know, reach out to me and and we'll we'll make sure it get. We have a way to get back a hold of you. um Scott did you have your hand up.

D

Yeah, so my question was, I couldn't really see on the screen share. Is the contents of the component actually injected into the body of the adaptive card and the reason I'm asking that question is what thoughts have you guys given to around versioning of components and like I could see a situation where, even if the component was injected into the body, if you go into the designer what's sort of the refresh mechanism, like you know, you just did the example of the demo.

D

Let's say I'm going into my adaptive card to make a minor edit with no intention of updating the component. Would components automatically refresh, or is that sort of a manual process or sort? You know? That's sort of the question I have around is uh like the versioning life cycle management and preventing unintended consequences, and I'm.

F

Going to address this sure this is david, uh so no the body of a component like what defines it, the molecules that hazmat called them are not injected uh inside the the body of the card. It's really only just the component definition that is in there and everything is dynamic. So that means that at runtime as the card is rendered, unless there is a local copy, that's available, the sdk will pull the latest version of the component on the fly and render that so right now.

F

Obviously, there is no versioning story, uh because this is just a prototype and there's a lot of stuff that we need to figure out in terms of how we handle versions and that kind of stuff. But that's I'll.

A

Add real quick to that, if you could still sorry I didn't erupt. I just want to add we. We have the kid up issue that you can follow along on this because yeah, this is definitely baking, but we did kind of brainstorm. Some things like okay, you've got a schema.org book, but then maybe you'll have a schema.org book v2 or something so we we totally get versioning as a consideration, and we just you know we're we're definitely working through it.

F

But there are really two different versioning stories here. There is one where, as as an author of a card, you use a specific version of a component explicitly, and then there is the other versioning story, which is whenever a particular version of a component gets updated uh in the backend in the in the store, then the card will automatically get that and.

D

If I may, I have one follow-on comment, slash question with regard to something you said during this explanation, so you said that the definition of the card is queried or basically pulled every time the adaptive card is rendered. Have you what thoughts or considerations have you been um given to performance implications because you're having to re-render? You know re-query that card every time the card's rendered and depending on the number of components that could be negative consequences, yeah.

F

I mean you don't want. Obviously you don't want to make network calls all the time, so the idea is to cache things as much as possible uh and uh there's probably going to be some sort of a default.

F

Well, there is actually already a default built-in cache mechanism in uh the sdk in that prototype version, but there will be ways to upload the the the caching to the host if the host can do a better job or you know save to disk or that kind of stuff, and there will be ways for the host to uh recall that cache at startup, so that components are readily available now.

F

The the the thing, though, is that once a component is in the cache, it will obviously not be pulled again from the service, and if there is a new version of that component in the service, the the application will simply not take advantage of that. So it's it's always that same.

F

You know drawback of using a cache, it improves performance, but it also uh prevents you from getting the latest and greatest so. Host applications will have to implement their own policies for when they refresh the cash and the kind of stuff. But that's the idea and.

A

These are all definitely called out the top of the thing on open issues. So certainly we want to make sure scrolling in teams isn't impacted by any of this stuff. We know there's we if we get to a world where components rely on other components, there's definitely some stuff to kind of figure out.

A

um This has kind of gone from just as a quick timeline from an idea to a spec like in 29 days, so it's we definitely still have some stuff to to think through before we really bake this in, which is why you know anyone, especially scott, if, like scott anyone interested in helping drive this like making sure we're considering things- or at least you know weighing in um we'd, be happy to to chat with you as well, but definitely the basics on security and performance will be some of the first things we really start to to look at.

F

I mean security. I don't believe that there is uh really any security concern here, because again this is entirely declarative. The worst that can happen is uh that a card will look terrible because a component will have a terrible layout, but in terms of security, there's no code that is downloaded, there's no local code injection or anything like that. It's still purely declarative, so not worried personally about that.

A

We're there we're at kind of two minutes there I did put a link to the survey. It definitely helps us out dana thanks for the nudge again on the focus group, we'll we'll reach out to you. Folks, thanks for your interest in that, let us know uh it's a really quick survey. It should take like three four minutes. uh We just like to know how you're enjoying the community calls and the product itself got a whole bunch of resources.

A

The ac roadmap, one, I think, is great. We also have a really great community website that a bunch of folks are helping with uh made with cards.io so check that out. I could totally see components being a major part of that. The ignite session there's a whole bunch of other microsoft. 365 developer community calls and we did q a and so the next.

A

The last thing I'll kind of close with is the next call is november 12th second thursday of every month, so the next one will be november, 12th at 9 00 a.m, and thank you so much for joining we'll get the video up at ak dot. Ms m365 dev youtube, and I think mark has another question so I'll take that, but I did just want to kind of wrap up with that. We'll get the call up, hopefully not too long and get a blog post written.

A

That's always the part I take the longest on and hopefully we'll see you again in november. Thanks a ton, everyone for your participation.

D