MIcrosoft Power Platform Website
Image: IB Photography/Adobe Stock

When you want something with a richer interface than a bot but you don’t need a whole application, Adaptive Cards are a handy way to package up a small chunk of user interface in a format that will look like part of the application you use it in — whether that’s Microsoft Teams, Microsoft Outlook or an app you built yourself in Power Apps, running on Windows, Android or iOS.

Microsoft open sourced the Adaptive Cards framework, which uses JSON to describe what Ryan Cunningham, VP of Power Apps at Microsoft, describes as “snippets of UI” and hosts a free web designer for developers to use to build Adaptive Cards in.

SEE: Google Workspace vs. Microsoft 365: A side-by-side analysis w/checklist (TechRepublic Premium)

Third party apps like Apfluence’s Priority Matrix and Cisco’s Webex Teams use Adaptive Cards to drop functionality into chat tools so users don’t have to switch to another app to do something. The format, Cunningham says, is “incredibly widely used: There are hundreds of millions of people that interact with an adaptive card every month.”

Making Adaptive Cards available via low code

But while Adaptive Cards are very easy to use, these micro apps have been something only professional developers could build.

“Not only do you need to describe a card in code, you need to have all the back end services that make it happen, that make it show up and handle what happens when you click on the buttons,” Cunningham said. “How do you make it easier for more people to innovate more experiences, in a way that starts to bring together data and an experience across the company?”

The new Cards feature in Power Apps lets you get the same results using low code, working in the familiar Power Apps Studio. The drag-and-drop Card Designer exposes the controls and connectors that are already available in the Power Platform so you can build a card by dragging and dropping buttons, tables, text, images, options, checkboxes, input fields, containers and other elements onto it.

If you want to write business logic to filter information or do some calculations like changing the number shown as users click plus or minus buttons, you can use Power FX, the Excel-based expression language that’s already used in PowerApps and Power BI.

Adaptive cards match the app’s UI

With Adaptive Cards, you choose what the content on the card is, but the application that you use it in controls the way the card looks so it fits in with the app’s user interface. The Designer shows you a preview of what your card will look like when people use it inside different apps; initially that’s just for Teams, but you can pick light or dark mode. Copy the URL that the Designer shows, and you can paste that straight into a Teams chat, channel or meeting and the Adaptive Cards runtime displays the card and fills in the right data, hosting it without you needing to do extra work.

Figure A

Image: Microsoft. Building Adaptive Cards in Power Apps and using them in Teams.

“I copy the hyperlink, and the card is instantly hosted,” Cunningham said. “When I’m in Teams, I paste the hyperlink in the flow of conversation and it automatically unfurls just like if I paste a link to a Word document. Right away, anybody in this Teams chat can click those buttons to upvote, downvote, add comments, see the details — everything this card can do.”

Centralized data and code for security

The card itself, the code that makes it work, and the data that’s shown in (or collected from) the card is all stored in Dataverse — the same place Power Apps and Dynamics 365 store business data. That keeps the data that’s shown on the card and any new data people create using a card secure inside your Microsoft tenant, where it can be used in other workflows and processes.

“It’s not just the small rectangle of user experience: This thing is automatically wired up to a back end and it’s automatically interacting with everybody else in the chat,” Cunningham said. “I can share it just like any other Office document, grab a shareable link and then the magic starts to happen when I’m in these other embedded environments in Microsoft 365.”

Professional developers could already extend Teams and other Microsoft 365 applications with this kind of custom interaction, but now far more people will be able to add exactly the right experience for the tasks they collaborate on with colleagues.

“Taking this essential micro experience and embedding it right in Teams means Teams is no longer just a place for chat and collaboration in full screen applications,” Cunningham pointed out. “It’s really democratizing how you use the conversation itself as an application: You can bring experiences right in line that are incredibly custom.”

Bot, Loop or card?

There are already several ways to add interactivity to Teams, like Loop components and Power Virtual Agents, which are a simple kind of chatbot.

Similar to Loop components, cards are interactive, render inline in different apps and are easy to share: In fact, Cunningham noted that cards use “a lot of the same underlying tech as Loop components.” The difference is that while Loop components have a fixed interface, like a list or a table, cards are for when you need a custom user interface.

“You can think of this almost as a low code way to edit and author exactly the same type of thing,” Cunningham said.

Power Virtual Agents also give you a lightweight user experience with buttons for interaction, but cards give you more options when you want more control over the design and how the interaction will work.

“If I want a business process that requires some level of structure, and it’s not just a conversation — there are buttons that need to be pressed, sliders that need to be slid, text that needs to be captured — it’s a little bit more structured, but it doesn’t necessarily need to be full screen, on an island outside of the flow of work,” Cunningham noted.

Cards are particularly well suited for “processes that are either really lightweight in the moment, or are inherently collaborative and you want a lot of people around the virtual table to contribute,” he suggested.

Using Adaptive Cards in real life

A nonprofit in Washington state that offers scholarships and leadership programs to at-risk youth has been using the private preview of Adaptive Cards in Power Apps. The committee that reviews scholarship applications has a specific framework for making decisions. The committee already discusses them in Teams, but historically they’ve done that by putting scores into an Excel spreadsheet while they talk about the applications.

“The problem is, people influence each other: How do we get input from each individual in a way where they are not influencing each other?” Cunningham asked. “How do we get input in a really structured way? There’s no ready-made software for that, but this non-profit is able to build it themselves on the Power Platform.”

Power Virtual Agents and cards can work together as part of a workflow.

“The beautiful thing about the Power Platform is that I can assemble all of these into one solution,” he said. “I’ll be able to have a virtual agent trigger an automation that drops a card into a chat. I can have a card itself kick off an interaction later as a follow up. I can have the data from this card populate a richer full screen app when people need it. I can have all that data go into a Power BI dashboard. You can adapt the experience with the tool that’s right for the job.”

When will Adaptive Cards be available?

Cards will be available as a preview feature in Power Apps in October; initially you’ll be able to paste the URLs for Cards into Teams, but when the feature ships, they will work in Outlook emails as well. Because Adaptive Cards use an open source framework, Cunningham hinted that “they render in all kinds of other places; in fact, you can render them even beyond the Microsoft ecosystem.”

The tools for building cards will also get extra features.

“Over the next couple of months, as this comes towards general availability, we’ll add other capabilities into the platform,” he said.

That will include the same code assistant for helping you write Power FX that’s already in the Power Platform, Cunningham told us. That will help users build more sophisticated business logic into their cards.

Expand your knowledge of Microsoft Apps with the 2022 Premium Microsoft Office Certification bundle on TechRepublic Academy.

Subscribe to the Developer Insider Newsletter

From the hottest programming languages to commentary on the Linux OS, get the developer and open source news and tips you need to know. Delivered Tuesdays and Thursdays

Subscribe to the Developer Insider Newsletter

From the hottest programming languages to commentary on the Linux OS, get the developer and open source news and tips you need to know. Delivered Tuesdays and Thursdays