Building Adaptive Cards
Adaptive Cards are a platform-agnostic and customisable way to create interactive and data driven messages that are actioned upon using Microsoft Teams.
Last updated
Adaptive Cards are a platform-agnostic and customisable way to create interactive and data driven messages that are actioned upon using Microsoft Teams.
Last updated
Start by clicking on the Template Designer and then clicking on New Card within the Start menu. Enter a name for your card and then click the Create Button.
The Adaptive Card Designer, created by Microsoft, has been imported into Looply to create Adaptive Cards for Looply Workflows. It provides an easy way to create beautiful data-rich messages that can be sent to teams. This designer provides massive benefits when combined with Looply as data fetched and generated via Looply Workflows can be bound and displayed to your end users in a dynamic way. The Adaptive Card Designer is here to provide you with the tools to create a template for your Adaptive Card so that in each process a dynamically data-driven card can be created.
There are 8 main areas of the Adaptive Card Designer:
This toolbar is located at the top of the Adaptive Card Designer. This acts as a file menu where you can create new cards, undo and redo actions, deploy the card, and alter the several views of the Adaptive Card Designer. You also have quick access to an AI Assistant, and the ability to test your card to see how it would look on Microsoft Teams.
Located to the left of your screen are all the available elements ready to use to create your card. Below are links to understand each element:
Located in the centre (just right of the ) of the Adaptive Card Designer is the canvas. Drag and drop elements from the to create your card. Drag elements already placed on the canvas to realign them. Certain elements placed on the canvas have buttons to add or more if the respective element has been selected. More on this from the respective element sections from the section above.
Note: Manually typing in the Card Payload Editor may cause the card to disappear from the Adaptive Card Canvas. This occurs when the JSON supplied is incorrect.
Currently, Adaptive Cards created are being versioned. Each card is initially given Draft status. Once the card has been Activated that will lock this version in place.
Saving a change made to an Active Adaptive Card will trigger a new version to be made. The new version of the card that's made is automatically placed back into Draft status.
Note: You can still use Draft Adaptive Cards within your Workflows, however, if accidental changes are made to the Card subsequent messages containing this card will be affected.
To make designing Adaptive Cards easier we created some shortcuts for frequent actions.
CTRL+SHIFT+E
CMD+SHIFT+E
New Card
CTRL+S
CMD+S
Save Card
CTRL+SHIFT+R
CMD+SHIFT+R
Rename Card
CTRL+Z
CMD+Z
Undo
CTRL+SHIFT+Z
CMD+SHIFT+Z
Redo
CTRL+SHIFT+L
CMD+SHIFT+L
AI Assistant
Just right of the , you'll find the structure of the card you are currently building. Provided as a tree structure, use this to quickly select elements.
On the right of the Adaptive Card Designer is the Element Properties Toolbar. When an element is selected on the Adaptive Card Canvas you will be provided with a menu to style the respective component. This will contain fields to change text, colour, alignment, and potentially add if the element is clicked. Read more on this by finding out about how each element can be altered via the section above.
The first of the 2 text editors. This contains the JSON of the Adaptive Card that you will build. You can edit the text in this editor to add your own or paste in an Adaptive Card you have already made elsewhere.
The second of the 2 editors. This editor contains a sample data schema, which can either be hand-typed or dynamically passed in if the card was created alongside a workflow. Providing data to this text editor will provide data for the .
Located at the bottom of the Adaptive Card Designer. This will alert you to the Adaptive Card's name, if it has a Looply Workflow attached, and if the Card has been .