Introducing Multi-card Interfaces with Adaptive Cards

As excited as we were to introduce Adaptive Card functionality in 2022, we believe this new enhancement will make them even more useful for you. In this post I'll review how a new capability recently added to the Adaptive Card Host SPA allows you to build even more complex, interactive, and (now) multi-card user experiences with Adaptive Cards. Instead of returning a toast message from an Action.Webrequest action, you can now return an entirely new Adaptive Card definition!

If you’ve not seen them, make sure to check out the previous posts on Adaptive Cards:

• Adaptive Card SKY Add-ins
• Adaptive card templating
• Table Entry Dropdowns In Adaptive Cards
• Data Entry With Adaptive Cards (part 1)
• Data Entry With Adaptive Cards (part 2)

Adaptive Cards can define “actions” which are typically rendered as buttons within the card. The Adaptive Card Host SPA supports a variety of actions, including the ability to navigate the browser, show a toast message, or show a modal dialog. It also supports an action type of Action.Webrequest which provides the ability to send a web request to a server. This allows the card author to capture input from the user and send that input to a server (where additional interesting business logic can take place).

For example, the following Adaptive Card definition could be used to add a simple constituent record in Blackbaud Raiser’s Edge NXT®:

{ }


The card defines two input fields (first and last name) and a save button. When the save button is clicked, the first/last name are packaged into a request and sent to the specified URL.

Using techniques demonstrated in the previous posts, you can register a SKY Add-in for the Home Page Tile Dashboard in Raiser’s Edge NXT and use the Adaptive Card Host SPA to render this card in a tile:



Previously, the response from the request sent by the save action could only show a toast message like “a new constituent record was added!”. Now, with the new capability of the Adaptive Card Host SPA the response can define a completely new Adaptive Card that will replace the initial data entry card and provide richer feedback to the user (and this new card can even contain its own actions that send requests and return different cards).

To implement this, you'll use Power Automate to implement a flow that will be triggered when the save button is clicked (note: using Power Automate isn’t a requirement, just a convenient way to implement some server-side logic). This flow will accept some input values (first/last name) that will be provided by the Adaptive Card, perform the logic for adding a constituent, and return a new card definition containing a confirmation message that the constituent was added along with a link to open the newly created constituent page.

You'll follow the same process as this post and create a new flow using the Trigger a flow from a SKY Add-in Adaptive Card action template. The flow will be triggered by an add-in on the home page, which provides no additional context, so you''ll remove the context element from the schema and update the placeholder fields in the schema to use the “first” and “last” field identifiers from my initial card:

{ }


After validating the user identity token, you'll use the Create an individual constituent action to create a new constituent using the values supplied in the flow trigger:




Next, you'll build a new adaptive Card with details about the newly added constituent that will replace the initial card. To do this, you'll use the adaptive Card designer with a few placeholder values that I’ll update later in Microsoft Power Automate:




The card payload shown above is:

{ }

Back in Power Automate, you'll paste the card payload from the designer into a Compose action, and replace the xxxxx placeholders with the appropriate values (You'll have the first/last name from the flow trigger, and the system record ID of the newly added constituent will come from the output of the Create new individual constituent action):




Now, it’s just a matter of returning the output from the compose action as the response:




Here is an overview of the flow:




After saving this flow, Power Automate will generate the URL that can be used to trigger the flow and you'll use that to update the url property of the Webrequest action in my original card.

{ }


When you click the save button, the second flow will be triggered. It will add the constituent and return a new Adaptive Card which will replace the original card:




To summarize - in this post we showed how a new Adaptive Card can be returned from an Action.Webrequest action. The new card will completely replace the original card, and allow users to build even more complex, interactive, and (now) multi-card users experiences.

For more information on Adaptive Card web request actions, see the documentation. We're excited to see how you decide to use this new functionality. Please share your thoughts on potential use cases in a comment below - or share completed projects in a discussion thread.

And a big thank you to Ben Lambert for his contribution to bring this functionality to Blackbaud customers.