 Do you know what adaptive cards are? Have you ever worked with them before? Maybe you're a Microsoft Teams developer and you want to use adaptive cards in your bots or messaging extensions or whatever. Maybe you're a Microsoft SharePoint framework developer and you want to create adaptive card extensions and you need adaptive cards for your card views and your quick views. Well you need to understand what adaptive cards are because all of these different things I just mentioned previously they all take advantage of adaptive cards. So in this video I'm going to give you a quick little primer on what adaptive cards are and how you can create them for your applications. Developers can use adaptive cards to create engaging messages that are rendered into a native UI that adapts to the hosted app experience. Adaptive cards are authored in JSON and can be used for outlook actionable messages, Microsoft Teams conversations, Viva Connections dashboards and a whole bunch of other host applications. Adaptive cards are a platform agnostic snippet of UI that's authored in JSON that apps and services can openly exchange. When delivered to a specific app the JSON is then transformed into a native UI that automatically is going to adapt to its surroundings. This helps design and integrate lightweight user interfaces for all major platforms and frameworks. The cards are created using an open card exchange format that enables developers to exchange UI content in a common and a very consistent way. Adaptive cards can be rendered natively in a host application as I said like in Outlook or Teams or Microsoft Windows or Viva Connections or even custom applications as well. So the goals for adaptive cards are as follows they need to be portable to any app, device and UI framework. They need to be open for libraries and schemas that are open sourced and shared. They need to have low cost and be easy to define and easy to consume. They need to be expressive and targeted at the long tail of content that developers want to produce. They also need to be purely declarative. No code is needed or allowed. They also need to be automatically styled to the host application user experience and follow the host app's brand guidelines. Adaptive cards offer plenty of benefits to card authors and user experience owners. For card authors adaptive cards are great for authors of cards. You have just one schema that you get a single format minimizing the cost of creating a card and maximizing the number of places where it can be used. Your content can be more closely aligned with what you want to say because you have a richer palette that you can paint with. And your content is also going to work across a broader set of applications without you having to learn brand new schemas. Your card can also include input controls to gather information back from the user that is viewing the card to create cool forms. In an open card ecosystem that means that we have better tooling that is shared by all developers. Now if you're an app developer who wants to tap into the ecosystem of third party content you're going to love adaptive cards. And the reason why you're going to love it is because you guarantee a consistent experience for your users because you own the style of the rendered card. You also get native performance as it targets your UI a framework directly. Content is delivered in safe payloads so you don't have to open up your UI framework to raw markup and scripting. And you get a library to easily integrate any platform that you want to support. You can also save time because you don't have to go invent and implement and document some proprietary schema using an open schema that's already available. And you can also save time for your developers because you don't have to create some custom tooling. Now adaptive cards are defined in a schema that's versioned. In all adaptive cards in the adaptive card schema explorer they display the version when they were introduced to the schema. Developers should note what elements are supported in specific schema versions because some application hosts may not currently support the latest version of the schema. The schema is broken up into multiple different categories. We have cards, card elements, containers, actions, inputs, type and types. Now each of these different categories contains a couple different elements. The adaptive card schema evolved from a messaging card format that originated back in Microsoft Outlook. Now the basic structure of a card is generally as follows. You've got an adaptive card object. This is the rude object that describes the adaptive card itself, including the element markup, its actions, how it should be spoken, and the schema version that's required to render it. The body of the card is the makeup of building blocks known as different elements. And these elements can be composed in nearly infinite arrangements to create many, many different types of cards. Now then many cards also have a set of actions that a user may take on them. And this property describes those actions, which typically get rendered in something called an action bar that's at the bottom of the card. Now some of these extra properties include things like a body. That's the card elements that are shown in the primary card region. The actions section is where actions are shown in the cards action bar. You also have a select action. That's an action that's going to be invoked when the card is tapped or selected. You also have fallback text. That's text that's going to be shown when the client doesn't support the version that's been specified. And that text can contain markdown that'll get rendered out for you. Now card elements include the different controls that can be added to the body property of the card. And these include elements such as a text block. This is going to display text allowing for control over different font sizes and weight and color. You have an image control and the image control is going to allow you to be able to display images. You have a media control that's going to display a media player for audio or video content. You also have a media source element that's going to find the source for a media element. And that's going to be that's going to allow you to define the type of media for a media element. For example video would be video slash mp4. You've also got things like a rich text block. The rich text block is going to give you an array of inlines that's going to allow for inline text formatting that you can see here. You've also got a text run that's defining a single run of formatted text. Now the containers category contains elements that are used to group multiple elements together. And these include elements such as an action set that's going to display a set of actions that you see here. These two buttons will be listed in an action set. A container that's going to allow you to group a bunch of different items together. So in this case here we have a container that's got a text block and an image. The column and column set are going to be able to let you define a region into columns allowing elements to all sit side by side. So for example that's going to allow us to do things like create kind of like a table based layout that you see here. The fact and fact set this is an element that's going to display a series of facts for example name value pairs in a tabular form as you can see here. The image set displays a collection of images similar to like an image gallery. The table and table cell these are going to be able to provide a way to display data in a much more tabular form. Now actions are used to invoke behavior such as opening a URL submitting a card or displaying another card. The action open URL when that's invoked it's going to show the given URL either by launching it in an external web browser or by showing it within an embedded web browser in the client. The action dot submit the action dot submit is going to gather input fields and merge them with the optional data field and it's going to send an event to the client. Now it's up to the client to determine how the data is going to be processed. So for example with bot framework bots the client would send an activity through the messaging medium to the bot. The actions show card is going to define an adaptive card which is shown to the user when the button or a link is clicked. The action toggle visibility that's an action that's going to toggle the visibility of an associated card element. The target element represents an entry for the actions target visibility property and the action dot execute is going to gather input fields and merge them with the optional data fields and send an event to the client. Clients then process the event by sending an invoke activity of type adaptive card slash action to the target. The inputs that are gathered are those on the current card and in the case of a show card any of the parent cards as well. Now inputs are used to collect information from users that can be submitted to the host application or different systems. The input text is going to let the user enter some text. The input number is going to allow a user to enter a number. The input date is going to let a user choose a date. The input time is going to let a user select the time. The input toggle that lets the user choose between two options. A choice set and the choice option is going to allow a user to input a choice. The input choice set is going to allow a user to input a choice. Now the adaptive card designer is going to provide a rich and interactive design time experience for authoring your adaptive cards. It's one of the best tools you'll have available to you. The designer is available at the following URL adaptivecards.io slash designer. Now whether you're filling out a survey approving an expense report or updating a CRM sales opportunity actionable message is going to allow you to take quick actions right from within outlook and developers can now embed adaptive cards in emails or notifications elevating user engagement with their services and increasing organizational productivity. Microsoft Teams also supports the latest versions of adaptive card schemas and multiple extensibility points. Developers can use adaptive card messages from bots and messaging extensions and also in task modules and tabs. Now let's see a demo on how we can design and view the rendering of adaptive card using some of the provided tools. The adaptive card site is your one-stop source for all the resources related to adaptive cards including documentation samples blog post and the designer. This site as I just said hosts the visual designer that you can use to create and test your adaptive cards. It's a great tool. Make sure you use this. The designer contains multiple panels that serve a couple different purposes as you can see here. The card element section is going to list of all the card elements that you can use with adaptive cards and it's going to be filtered based on the target version of the adaptive card schema that you select. So for example if I choose 1.5 you'll see that I have a table listed but if I go to the schema 1.3 you'll see table is removed because that wasn't added until a later schema. The rendered card panel is going to give you a preview rendering of the card as it would appear in the currently selected host app. You can see right now we're seeing the web bot framework web chat. I can see what it looks like if it was an actionable adaptive, an actionable message for Outlook. If it was in Microsoft Teams I can even switch it over to the dark mode of Teams. I can see what it looks like in Viva Connections. Again the light and the dark mode of Viva Connections. All these different options here you can see of the different options that we have for the different rendering. The third panel is the card payload editor and that's a browser friendly JSON editor that contains the source of the adaptive card that's rendered on the rendered card pane. So you see here if I select one of these elements here it's going straight over to my text block that you see listed here and then I can scroll over here and make changes using the element properties panel here. The card structure panel that's the card that's represented in this panel that has a hierarchical structure that you see in the that we're working with in the designer. Notice that as I select different elements in this panel it's the corresponding control is highlighted in the rendered card panel. So if I choose the image it's going to the image here. If I go to the show card there's the show card right here and I can even switch it over into preview mode to see what this looks like if I click on some of these different controls like saying the due date is going to open up my other card view that I see down here at the bottom. The element properties panel that's the properties including that those that are not specified in the source of the adaptive card that's down here at the bottom. So if I select the image you can see here's all the properties related here and it may not include everything that's listed right here that you see like there's a whole bunch of ones we can have like a separator but check a separator you'll see that the separator gets added and what that's going to do is that would have added a separator in the rendering if that's something that would have actually been rendered in the current host which in this case here the Viva connections doesn't render out the separator. The sample data editor panel this panel contains the JSON that's used when I'm editing or using the templating capability of adaptive cards. This is a really cool capability because what I can do is I can define just kind of move things around a little bit. I can define what my card looks like but then I can specify these like wild card elements of or variables in my card to make my card a little more dynamic like in this case here in this text block this is the the title of the adaptive card here the published adaptive card schema. What the adaptive card technology what it has available to us is this templating model where I could create this JSON object where I've got a title property that's defined and then when I take my adaptive card and my data and I mesh them together using the templating engine the templating engine will take the data and it'll populate the adaptive card as kind of like a template and then return back a new adaptive card that contains the resulting adaptive card that should be rendered with my data that's actually been populated in it. Now the adaptive card website also has a place where I can go check out a bunch of samples and I can see all these different options of different adaptive cards that the adaptive cards team has gone through and generated for us so things like looking at flight details looking at a simple fallback that we have maybe an expense report that you can see here is getting a little bit more complicated that's all been generated with this click the reject you see I have to put reject message that I'm going to include there these are all really cool and can give you some inspiration but what's also cool is if I come back to the designer I can select I want a new card and it'll open up one of these in my in the designer so like I'll choose the one for the flight itinerary I'll pick that here's the flight itinerary and then I can see all the the the adaptive card listed as well as all the data that's getting merged with it so I can use that as kind of inspiration for creating a new card let's do this let's actually see this in action so I'm going to go create a new card and let's choose the activity update option the very first one we saw initially let's make some changes to this card and see how it impacts both the source and the rendering of the card so in the card structure panel I'm going to select the text block within the person's name that's listed in the panel so there's there there's the person's name there now in the card payload editor I'm going to scroll down to the JSON that represents this control now notice the contents of this control are displayed in the text property and the element properties I'm going to use the element properties panel and I'm going to make a couple different changes here in the text block section I'm going to change the text over to Alex Wilbur so I'll change this to Alex Wilbur and you can see the text changed in the rendering in the style section I'm going to set the weight of the property to lighter so let's go down to style and we'll set the weight to lighter and you'll see the text gets a little bit lighter notice how the card has been immediately updated throughout the designer all throughout the designer that's not just over here in the card structure in the rendering but everywhere I can then also preview the card the adaptive card online designer also supports previewing the card in the various hosts as I showed you earlier and previewing the card and testing out the interaction in various hosts is pretty useful during the development process so again you do that by clicking the preview mode button in the top navigation notice the card structure and the element properties panels they change when the designer is in preview mode now I'm going to select the due date that you see listed here to see how it's going to behave when it's rendered in the host app so here I selects due date we can see how it's changing around let's see how this works in a couple different options so here we're looking at in the web chat app that's the one that's currently selected so let's instead switch this out to try a different one like what happens in viva connections if I come down and select select due date looks pretty similar I can see how it would look if I switch over to outlook as an actionable message so we can see the due date looks a little bit like this in outlook I can see what it does also in Microsoft teams which is very similar like in this case here you can see it's being rendered using a botter in a conversation and so I can then select select due date and you can see how it shows up in teams now let's do another demo now what I'm going to do now is let's add a custom card to the designer that's going to display information from a wiki from wikipedia on one of the planets in our solar system so what I'm going to do is I'm going to replace the the contents of the card editor payload with some json here so I come down here in the payload editor I'll take everything that's there I'm just going to paste in some json we'll take a look at this so we can see we're in we're looking at this in teams so here's our list now notice the preview card is changing to display the new card with a specific date with some specific data now let's take advantage of this templating capability the adaptive card templating specifies that I can reuse cards by disconnecting the card layout from the data in the card now the lay of the card is implemented in json except for the value of the data driven properties that are indicated with the property name from a data file and then surrounded with the curly brackets around it now the data is going to be expressed as json and at runtime the adaptive card SDKs are going to merge the two json structures together the card template and the data for example to set the value of the textbox control on a of a planet with the property planet name from a data file I'm going to set the text property on the textbox to a planet name so let's go back and let's update the existing card layout in the card editor panel with some different json that's expecting some placeholders as you can see here they're all being rendered as these dollar signs all over the place notice in the preview they're all showing up as broken links in placeholders surrounded by this dollar and then the bracket from the card now what I'm going to do is I'm going to replace the sample data that we have over here with the real data that I want to display and this data that I've pasted in that's going to represent the planet mars I can then switch over to preview mode and I can see how this is going to look when I go to render this and my different clients and just to show you how flexible this is let's change our data to show data for a different planet like Saturn and there we go we can see that it all got rendered out differently pretty cool what do you think about adaptive cards you like it you want to see more let me know what kinds of things you want to see leave a little leave a note in the comments below this video and maybe I'll make that as my next video that I create for this channel also I'd really appreciate it if you would subscribe and like this video so that you can be notified of future videos that I create again maybe on adaptive cards depends on your feedback thanks a lot and I'll see you in the next video