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 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.
1. Get the first name out of a user's full 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.
2. Transform timestamps into "x hours ago"
Most APIs send timestamps in UNIX format, like
2021-09-17T00:00:33.25. But most users prefer 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.
3. Build 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.
4. 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.
5. 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.
6. Show text as green or red depending on a value
You can conditionally highlight text, and even switch out arrow symbols, based on values coming from your API. In our example below this is the values we used:
"change": "2.5", "yesterday": "7"
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?
8. 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:
9. 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.
11. 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:
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.
Did you find these hacks useful? If so, you might also be interested in ready-to-use business templates for Adaptive Cards.