Adaptive cards — MicroApps — Part-1

Let me start this article with a personal story I struggled through a couple of years, with a lot of content & apps on my phone at the home screen. Though the apps do an excellent job of delivering the answer to me however different apps (weather, clock, calendar, etc) have different UI experiences. Instead of switching between different apps to check things, I needed a simple widget that could give me all my interesting information in one place.

Solution: Widgy widgets saved me, and someone curated a widget (MicroApp) — outcome screenshot below (widget provides me weather info, time, battery level, date, and day and it greets me :))

My iPhone home screen

Did you identify similar issues with your workplace apps or consumer apps such as:

As a user:

• You need to learn and understand many apps (Workday, ServiceNow, Microsoft tools, and many more) to get/do the most common thing that you do regularly.
• Even when you try to understand the app and use it, it is quite difficult to find information and there is too much functionality & features.
• You wished someone curated an end-to-end experience that you can consume?

As an experience owner:

• You know your users are struggling with the above issues
• You identified 20% of experiences that are consumed by 80% of the users you could simplify and deliver a great experience.
• Your specialized apps have APIs to integrate but don’t provide the best user experience.

MicroApps are one of the ways you can deliver actionable apps for the moments that matter to your users. In my previous blog post, I added my initial thoughts on MicroApps. While I am researching more about the topic, I’ve learned that Microsoft's “Adaptive cards” is an interesting UI framework that may enable us to deliver MicroApps.

Note:

1. Adaptive cards are a new framework and have their pros & cons, however, it is valuable to learn.
2. A card can be referred to as a MicroApp.

Adaptive Cards

Content is everything & everything is content
As the content is growing at the scale, the need for quick low-code or no-code UI experiences is in high demand. Adaptive cards provide such easy configuration-based solutions to deliver declarative, and dynamic UI experiences across many platforms. Adaptive cards are a Microsoft-provided Card UI framework released in 2017 that aims to standardize the layout of cards across multiple platforms i.e. define the card layout once, make it portable and leave it to the platforms to skin it according to requirements.

Adaptive cards are platform-agnostic snippets of UI, developed in JSON format, that apps can openly exchange. When delivered to a specific app, the JSON is transformed into a native UI that automatically adapts to its surroundings. Cards are supported by various Microsoft products but can be rendered anywhere.

Content designers

You define the content and card layout only once.
You can leverage adaptive card template designer to design your card.
You learn one schema and that works across many apps
You can define input controls to make the card more interactive

Experience owners

You can deliver a consistent experience for your users across various channels such as web, mobile, Microsoft teams, Outlook etc.
You get libraries that are easy to integrate across microsoft platforms and others.
You develop the cards once and deploy anywhere.
You have a rich set of interactive functionlity available like dropdowns, text fields, buttons, sections etc.

In a summary adaptive cards help you design cards/MicroApps using designer as templates and integrate it with API response (data) to render in a platform such as the web, mobile, outlook, teams, etc.

Adaptive card (template) + API response (data) + UI Renderer = MicroApp experience

UI Renderer — Can be React app, Vue app, Web Component, Microsoft Teams, Outlook, etc.

Getting Started

Adaptive cards primarily have three concepts

1. Template: A template follows adaptive cards JSON schema specification to define the layout of the card. The framework provides various card elements such as text block (label), image, rich text block, etc, also inputs such as text, choice, time, toggle, number, etc, and actions such as OpenURL, Submit, Show another card, etc. Microsoft provides a designer to design your cards.
2. Data: While the template provides the layout and elements to be displayed, data provides a JSON data object that provides the necessary values to render i.e you can define placeholders for data in your template that gets filled in by the framework during the rendering phase. Data can be static (hard-coded) or can be retrieved from an API response (the ideal way).
3. Renderers: Microsoft has renderers in their provided tools like SharePoint, Microsoft Teams, Outlook, etc. However, the framework provides renderers that can be added as a dependency to the most popular platforms such as Android, iOS, JavaScript, ReactNative, etc.

Note: I was able to use the JavaScript renderer in the VueJS app and was able to display a card.

Adaptive Cards Schema: The card schema contains primarily

1. Card definition (The root): It includes version, styling, background, language, etc.
2. Body: It contains all the containers, control elements, and input that is displayed in the card.
3. Actions: Defines a set of possible actions (submit button, links) that the user can interact with ex: opening a URL, taking an action, call an API, etc.

Basic example:

To build a simple card to display a tweet of “Evan You” (VueJS creator).

Artifacts:

TweetData.json: Provides the data needed to render the card, this can be Twitter API response.

TweetTemplate.json: Adaptive card template to render the card.

You can copy the above artifacts to the Adaptive card designer to try it.

1. Copy the TweetTemplate.json file to “Card payload editor”.
2. Copy the TweetData.json file to “Sample Data Editor”.
3. You should see the adaptive card in action.

I’ve rendered the above card in a VueJS app. The final output of the card is as below and can be rendered in native mobile (iOS, Android), web, Microsoft teams, etc.

Adaptive Card (Sample)

In my next article, I will explain my implementation of the VueJS JavaScript renderer of the adaptive card.

Resources:

Designer | Adaptive Cards

Adaptive Cards

Adaptive Cards Overview - Adaptive Cards