A simple Adaptive Card for your business takes less than 10 minutes to make. But as you start to make more sophisticated layouts you will usually run into common issues where the data you want to show in your Card maybe isn’t 100% what you need it to be, or is just too much to comfortably fit into your layout.
In this post I listed examples of cool little hacks that we’ve accumulated over time that helped push the envelope on what an Adaptive Card can do. Some of these use Adaptive Expressions, but others are just thinking outside the box a little.
Trim to first name
Let say you have an API that gives you the user’s name as “John Hancock” but you want to address the user as just “John” in your Card.
Turn timestamps into “x hours ago”
Most APIs send timestamps in UNIX format, like 2021-09-17T00:00:33.25. But most users prefer relative timestamps to be a little easier to read than that.
Ordinarily you need a library like moment.js that does this kind of transformation. But, in a pinch, you can get very close to this using the following Adaptive expression.
Assemble email addresses
If you want to show a user’s email address, but your API isn’t providing it, then maybe you can “build” the email using their name and company name.
Make tabs
Tab interfaces are popular, but not supported in Adaptive Cards. Or are they?
With this trick you can create a Card that has at least two tabs – although be warned that the widths need tinkering with to display this properly on small screens.
Include icons in the Card
Adaptive Cards can’t host their own images or icons, so you will usually need a URL and capacity to host these yourself elsewhere (for example through a CMS). However, there is one hack to get around this that works at least for icons. You can base64 them, for example with a tool like Elmah.
This makes the Card’s payload quite large so use it with caution and remember that some host apps might have size restrictions that you could run into using this.
Conditional highlighting
If you want text to be either green or red depending on a value, you can conditionally highlight text, or, even switch out arrow symbols to show an upwards or downwards trend. In our example below this is the values we used:
"change": "2.5",
"yesterday": "7"Create fallback text
Sometimes the data you get from APIs is not as uniform as we want. Let’s say you want to make a Card that shows peoples’ job titles beneath their name. Until one record doesn’t contain the job title, causing an awkward change in height.
Wouldn’t it be cool to have a fallback of some kind, say to show the email address when there isn’t a job title?
Create a mini timeline
Whether your showing customer activity or progress of a process, a vertical timeline could be a quirky little addition to your Adaptive Card design. Here’s how to do it:
Use backgrounds for stunning designs
Whether it’s a welcome message, or some digital signage you want to place on the corporate intranet, Adaptive Cards can show background images which make them ideal for your great designs.
Expanding line items
In order to declutter an Adaptive Card, it might be useful to offload some details into a little section that expands and collapses. This is a relatively simple way to get there:
Accordion
Building on top of the expand/collapse function, you could also get whole accordion style sections. Whenever you click on a headline, the respective section opens or closes.
Pseudo active state
Let’s say you want to offer a Like button. On Facebook you press it, it turns bright blue, you know it’s pressed. Adaptive Cards’ buttons don’t offer a similar activated state, but you can get there by using the Action.ToggleVisibility button.
Filtered lists
You know the problem: you get a JSON file that has 25 items but you only want to show the ones that are, say, green. With an Adaptive Expression you can filter items from your array based on a matching attribute.
Turn an integer into a string
Let’s say your JSON has a count of the number of outages your system has. But you can’t show this count inside of your Adaptive Card because it’s just an integer, and Adaptive Cards can only bind to strings wrapped in "".
Rescue has arrived. There is an Adaptive Expression you can inside of your Card that turns your integer into a string.
Count items in an array
Let’s say you have a list but you want to get a count of how many of them are red items, versus other colors. You can wrap this into two Adaptive Expressions, the first count is responsible to output you a number, and the inner function where filters the output for the attribute(s) you specify.
Empty state for a list
If you have an Adaptive Card list but the array is empty, the list just unceremoniously vanishes. This could make you or your users question if the Card could be broken, when it’s just hasn’t anything to show you. To avoid that, empty states are a popular way to signpost a list is deliberately empty.
In this below example, if there are no 🟡 items in our list, we display the empty state container.
~~~
Did you find these hacks useful? If so, you might also be interested in ready-to-use business templates for Adaptive Cards.
