Best Practices - Designing Adaptive Cards for Nimbus and MS Teams

Before you start

It's good to know that there are two types of Adaptive Cards in Nimbus: Built-in and Custom.

Built-in Adaptive Cards - Nimbus sends out built-in Adaptive Cards as part of certain Nimbus Features such as Voice Recordings and marking calls as handled / seen in a Team-wide context. These cards cannot be customized. 

Custom Adaptive Cards - These cards can be designed to your own needs, but require a bit of learning. Below in this article you can find a collection of adaptive cards which can be used in the Nimbus Power Automate Connector Flow Integration within Luware Nimbus. Use the card code in your Power Automate Flows according to your needs.

🔍 Some additional notes and sources:

 

Rules for Using Adaptive Cards in Nimbus

☝Use adaptive cards as often as possible

We recommend using adaptive cards as often as possible. Teams messages sometimes do not parse successfully. If you want to output markdown code in a Teams message with “Post a message to a chat” via Power Automate, you could get ugly messages like this one:

The adaptive card with a Text Field and the same input looks nicer and tidier:

 
 

👀Send coherently designed cards

We recommend using a coherent card design so that users have the same look & feel for all interactions in MS Teams and Nimbus. Get inspired from our templates presented in the next chapter. Feel free to copy paste our design and reuse it.

 
 

⏱Always provide a "Cancel” button

Adaptive Cards with submit actions will run for 30 days in MS Teams. This means, users can interact with a pending cards for 30 days until the flow fails. 

→ Users should be able to stop the Power Automate flow for being executed using a “Cancel” button. The View action is an exception, it only opens a URL and does not trigger further processing in the flow and thus does not need to be canceled.

 
 

💫Always validate user inputs

Adaptive Cards have built-in validation functionality. Use it to write clean and tidy cards with input validation, proper labeling, and pattern validation.

 
 

📑Example Templates 

📝 Adaptive Card style template

The template defines a common style for all cards that will be send from Power Automate to MS teams.

Header
  • The header should always contain the Nimbus icon and “Luware Nimbus via Power Automate” and the subtitle including the Service Name.
  • The header is followed by a main title, subtitle, card content and one action set.
Actions
  • If the card has more than one main action, use the action set 1, and style them with icons and set a tooltip text.
  • If the card has a single action button, use the second line.
Cancel Always show a cancel button to cancel the Power Automate Flow if necessary. 
One main action More than one action No action
The action set shows only two buttons: a submit action and the cancel action. The action set shows many buttons as icons with a tooltip text. The cancel button needs to be shown as well. There is no interaction with this card. No action set is shown.

Show code with Nimbus fields…

{
                   "type":"AdaptiveCard",
                   "body":[
                      {
                         "type":"ColumnSet",
                         "columns":[
                            {
                               "type":"Column",
                               "items":[
                                  {
                                     "type":"Image",
                                     "style":"Person",
                                     "url":"https://luware.com/hs-fs/hubfs/Theme%20Luware/svgviewer-png-output.png",
                                     "size":"Small"
                                  }
                               ],
                               "width":"auto"
                            },
                            {
                               "type":"Column",
                               "items":[
                                  {
                                     "type":"TextBlock",
                                     "weight":"Bolder",
                                     "text":"Luware Nimbus via Power Automate",
                                     "wrap":true
                                  },
                                  {
                                     "type":"TextBlock",
                                     "spacing":"None",
                                     "text":"@{triggerOutputs()?['body/ServiceName']}",
                                     "isSubtle":true,
                                     "maxLines":1,
                                     "wrap":true
                                  }
                               ],
                               "width":"stretch"
                            }
                         ]
                      },
                      {
                         "type":"TextBlock",
                         "text":"You missed a call from @{triggerOutputs()?['body/CustomerIdentifier']",
                         "wrap":true,
                         "weight":"Bolder",
                         "style":"heading",
                         "spacing":"Large",
                         "separator":true
                      },
                      {
                         "type":"TextBlock",
                         "text":"Subtitle",
                         "wrap":true,
                         "style":"columnHeader",
                         "weight":"Bolder"
                      },
                      {
                         "type":"TextBlock",
                         "text":"Schedule a call back",
                         "wrap":true
                      },
                      {
                         "type":"Input.Date",
                         "label":"Date",
                         "id":"date",
                         "isRequired":true,
                         "errorMessage":"Date is required"
                      },
                      {
                         "type":"Input.Time",
                         "id":"time",
                         "label":"Time",
                         "isRequired":true,
                         "errorMessage":"Time is required",
                         "value":"01:00"
                      },
                      {
                         "type":"ActionSet",
                         "actions":[
                            {
                               "type":"Action.Submit",
                               "title":"Cancel"
                            },
                            {
                               "type":"Action.Submit",
                               "iconUrl":"icon:Add",
                               "tooltip":"Create",
                               "style":"positive"
                            },
                            {
                               "type":"Action.Submit",
                               "iconUrl":"icon:Airplane",
                               "tooltip":"Do that",
                               "style":"positive"
                            },
                            {
                               "type":"Action.Submit",
                               "iconUrl":"icon:AnimalRabbit",
                               "tooltip":"Do this",
                               "style":"positive"
                            },
                            {
                               "type":"Action.OpenUrl",
                               "url":"https://yourcrm.com",
                               "iconUrl":"icon:ContentView",
                               "tooltip":"View Contact",
                               "style":"positive"
                            }
                         ],
                         "horizontalAlignment":"Right"
                      },
                      {
                         "type":"ActionSet",
                         "actions":[
                            {
                               "type":"Action.Submit",
                               "title":"Cancel"
                            },
                            {
                               "type":"Action.Submit",
                               "title":"Submit",
                               "style":"positive"
                            }
                         ],
                         "horizontalAlignment":"Right"
                      }
                   ],
                   "$schema":"https://adaptivecards.io/schemas/adaptive-card.json",
                   "version":"1.4"
                }
 
 

📝 Send a missed call notification to a MS Teams channel for a known contact with action buttons

Show code…

{
                   "$schema":"https://adaptivecards.io/schemas/adaptive-card.json",
                   "type":"AdaptiveCard",
                   "version":"1.4",
                   "body":[
                      {
                         "type":"ColumnSet",
                         "columns":[
                            {
                               "type":"Column",
                               "items":[
                                  {
                                     "type":"Image",
                                     "style":"Person",
                                     "url":"https://luware.com/hs-fs/hubfs/Theme%20Luware/svgviewer-png-output.png",
                                     "size":"Small"
                                  }
                               ],
                               "width":"auto"
                            },
                            {
                               "type":"Column",
                               "items":[
                                  {
                                     "type":"TextBlock",
                                     "weight":"Bolder",
                                     "text":"Luware Nimbus via Power Automate",
                                     "wrap":true
                                  },
                                  {
                                     "type":"TextBlock",
                                     "spacing":"None",
                                     "text":"Helpdesk Service Line",
                                     "isSubtle":true,
                                     "maxLines":1,
                                     "wrap":true
                                  }
                               ],
                               "width":"stretch"
                            }
                         ]
                      },
                      {
                         "type":"TextBlock",
                         "text":"You missed a call from Maria Sample",
                         "wrap":true,
                         "weight":"Bolder",
                         "style":"heading",
                         "spacing":"Large",
                         "separator":true
                      },
                      {
                         "type":"TextBlock",
                         "text":"Send an email to notify Maria Sample that you are available now."
                      },
                      {
                         "type":"ColumnSet",
                         "columns":[
                            {
                               "type":"Column",
                               "width":"stretch",
                               "items":[
                                  {
                                     "type":"Input.Text",
                                     "placeholder":"Please enter or prefill customer email here",
                                     "maxLength":75,
                                     "id":"recipient",
                                     "label":"To",
                                     "isRequired":true,
                                     "errorMessage":"Please enter a valid email address",
                                     "regex":"^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+[.][A-Za-z0-9-]{2,4}$"
                                  },
                                  {
                                     "type":"Input.Text",
                                     "placeholder":"Sorry, we've missed your call!",
                                     "id":"subject",
                                     "value":"Sorry, we've missed your call!",
                                     "label":"Subject",
                                     "isRequired":true,
                                     "errorMessage":"Subject is required"
                                  },
                                  {
                                     "type":"Input.Text",
                                     "placeholder":"Your email message goes here",
                                     "isMultiline":true,
                                     "maxLength":455,
                                     "id":"content",
                                     "label":"Message",
                                     "isRequired":true,
                                     "errorMessage":"Please write your message."
                                  }
                               ]
                            }
                         ]
                      },
                      {
                         "type":"ActionSet",
                         "actions":[
                            {
                               "type":"Action.Submit",
                               "title":"Cancel"
                            },
                            {
                               "type":"Action.Submit",
                               "title":"Send",
                               "style":"positive"
                            }
                         ],
                         "horizontalAlignment":"Right"
                      }
                   ]
                }
 
 

📝 Send an after call notification to an MS Teams channel for an unknown contact with action buttons

Show code…

{
           "$schema":"https://adaptivecards.io/schemas/adaptive-card.json",
           "type":"AdaptiveCard",
           "version":"1.4",
           "body":[
        	  {
        		 "type":"ColumnSet",
        		 "columns":[
        			{
        			   "type":"Column",
        			   "items":[
        				  {
        					 "type":"Image",
        					 "style":"Person",
        					 "url":"https://luware.com/hs-fs/hubfs/Theme%20Luware/svgviewer-png-output.png",
        					 "size":"Small"
        				  }
        			   ],
        			   "width":"auto"
        			},
        			{
        			   "type":"Column",
        			   "items":[
        				  {
        					 "type":"TextBlock",
        					 "weight":"Bolder",
        					 "text":"Luware Nimbus via Power Automate",
        					 "wrap":true
        				  },
        				  {
        					 "type":"TextBlock",
        					 "spacing":"None",
        					 "text":"Helpdesk Service Line",
        					 "isSubtle":true,
        					 "maxLines":1,
        					 "wrap":true
        				  }
        			   ],
        			   "width":"stretch"
        			}
        		 ]
        	  },
        	  {
        		 "type":"TextBlock",
        		 "text":"Your call with +44766567894",
        		 "wrap":true,
        		 "weight":"Bolder",
        		 "style":"heading",
        		 "spacing":"Large",
        		 "separator":true
        	  },
        	  {
        		 "type":"TextBlock",
        		 "text":"Create Contact",
        		 "wrap":true,
        		 "style":"columnHeader",
        		 "weight":"Bolder"
        	  },
        	  {
        		 "type":"TextBlock",
        		 "text":"I was unable to identify the last caller by phone number. Do you want to create a new contact in the CRM?",
        		 "wrap":true
        	  },
        	  {
        		 "type":"ColumnSet",
        		 "columns":[
        			{
        			   "type":"Column",
        			   "width":"stretch",
        			   "items":[
        				  {
        					 "type":"Input.Text",
        					 "placeholder":"Please fill out this field",
        					 "id":"firstname",
        					 "label":"Firstname",
        					 "isRequired":true,
        					 "errorMessage":"This field is required."
        				  },
        				  {
        					 "type":"Input.Text",
        					 "placeholder":"Please fill out this field",
        					 "id":"lastname",
        					 "label":"Lastname",
        					 "isRequired":true,
        					 "errorMessage":"This field is required."
        				  },
        				  {
        					 "type":"Input.Text",
        					 "value":"+44766567894",
        					 "id":"phone",
        					 "label":"Phone",
        					 "isRequired":true,
        					 "errorMessage":"Please enter a phone number in E.364 format",
        					 "regex":"^\\+[1-9]\\d{1,14}$"
        				  }
        			   ]
        			}
        		 ]
        	  },
        	  {
        		 "type":"ActionSet",
        		 "actions":[
        			{
        			   "type":"Action.Submit",
        			   "title":"Cancel"
        			},
        			{
        			   "type":"Action.Submit",
        			   "title":"Create",
        			   "style":"positive"
        			}
        		 ],
        		 "horizontalAlignment":"Right"
        	  }
           ]
        }
 
 

📝 Send a success response when the bot creates a new contact in the CRM

Show code…

{
                   "type":"AdaptiveCard",
                   "body":[
                      {
                         "type":"ColumnSet",
                         "columns":[
                            {
                               "type":"Column",
                               "items":[
                                  {
                                     "type":"Image",
                                     "style":"Person",
                                     "url":"https://luware.com/hs-fs/hubfs/Theme%20Luware/svgviewer-png-output.png",
                                     "size":"Small"
                                  }
                               ],
                               "width":"auto"
                            },
                            {
                               "type":"Column",
                               "items":[
                                  {
                                     "type":"TextBlock",
                                     "weight":"Bolder",
                                     "text":"Luware Nimbus via Power Automate",
                                     "wrap":true
                                  },
                                  {
                                     "type":"TextBlock",
                                     "spacing":"None",
                                     "text":"Helpdesk Service Line",
                                     "isSubtle":true,
                                     "maxLines":1,
                                     "wrap":true
                                  }
                               ],
                               "width":"stretch"
                            }
                         ]
                      },
                      {
                         "type":"TextBlock",
                         "text":"Success!",
                         "wrap":true,
                         "weight":"Bolder",
                         "style":"heading",
                         "spacing":"Large",
                         "separator":true
                      },
                      {
                         "type":"TextBlock",
                         "text":"The new contact has successfully been created in Salesforce. Please review and complete the contact details.",
                         "wrap":true,
                         "style":"default"
                      },
                      {
                         "type":"ActionSet",
                         "actions":[
                            {
                               "type":"Action.OpenUrl",
                               "title":"Review",
                               "style":"positive"
                            }
                         ],
                         "horizontalAlignment":"Right"
                      }
                   ],
                   "$schema":"https://adaptivecards.io/schemas/adaptive-card.json",
                   "version":"1.4"
                }
 
 

📝 Missed call notification with scheduling a call back

Card Code

{
                   "type":"AdaptiveCard",
                   "body":[
                      {
                         "type":"ColumnSet",
                         "columns":[
                            {
                               "type":"Column",
                               "items":[
                                  {
                                     "type":"Image",
                                     "style":"Person",
                                     "url":"https://luware.com/hs-fs/hubfs/Theme%20Luware/svgviewer-png-output.png",
                                     "size":"Small"
                                  }
                               ],
                               "width":"auto"
                            },
                            {
                               "type":"Column",
                               "items":[
                                  {
                                     "type":"TextBlock",
                                     "weight":"Bolder",
                                     "text":"Luware Nimbus via Power Automate",
                                     "wrap":true
                                  },
                                  {
                                     "type":"TextBlock",
                                     "spacing":"None",
                                     "text":"Helpdesk Service Line",
                                     "isSubtle":true,
                                     "maxLines":1,
                                     "wrap":true
                                  }
                               ],
                               "width":"stretch"
                            }
                         ]
                      },
                      {
                         "type":"TextBlock",
                         "text":"You missed a call from Maria Sample",
                         "wrap":true,
                         "weight":"Bolder",
                         "style":"heading",
                         "separator":true,
                         "spacing":"Medium"
                      },
                      {
                         "type":"TextBlock",
                         "text":"Schedule a call back",
                         "wrap":true
                      },
                      {
                         "type":"Input.Date",
                         "label":"Date",
                         "id":"date",
                         "isRequired":true,
                         "errorMessage":"Date it required"
                      },
                      {
                         "type":"Input.Time",
                         "id":"time",
                         "label":"Time",
                         "isRequired":true,
                         "errorMessage":"Time is required",
                         "value":"01:00"
                      },
                      {
                         "type":"ActionSet",
                         "actions":[
                            {
                               "type":"Action.Submit",
                               "title":"Cancel"
                            },
                            {
                               "type":"Action.Submit",
                               "title":"Schedule",
                               "style":"positive"
                            }
                         ],
                         "horizontalAlignment":"Right"
                      }
                   ],
                   "$schema":"https://adaptivecards.io/schemas/adaptive-card.json",
                   "version":"1.4"
                }
 
 

📝 Send a success response when a callback has been scheduled

Show code…

{
                   "type":"AdaptiveCard",
                   "body":[
                      {
                         "type":"ColumnSet",
                         "columns":[
                            {
                               "type":"Column",
                               "items":[
                                  {
                                     "type":"Image",
                                     "style":"Person",
                                     "url":"https://luware.com/hs-fs/hubfs/Theme%20Luware/svgviewer-png-output.png",
                                     "size":"Small"
                                  }
                               ],
                               "width":"auto"
                            },
                            {
                               "type":"Column",
                               "items":[
                                  {
                                     "type":"TextBlock",
                                     "weight":"Bolder",
                                     "text":"Luware Nimbus via Power Automate",
                                     "wrap":true
                                  },
                                  {
                                     "type":"TextBlock",
                                     "spacing":"None",
                                     "text":"Helpdesk Service Line",
                                     "isSubtle":true,
                                     "maxLines":1,
                                     "wrap":true
                                  }
                               ],
                               "width":"stretch"
                            }
                         ]
                      },
                      {
                         "type":"TextBlock",
                         "text":"Success!",
                         "wrap":true,
                         "weight":"Bolder",
                         "style":"heading",
                         "spacing":"Large",
                         "separator":true
                      },
                      {
                         "type":"TextBlock",
                         "text":"A new callback has been scheduled for +44766545678 on 02.08.2024 at 13:45pm.",
                         "wrap":true
                      },
                      {
                         "type":"ActionSet",
                         "actions":[
                            {
                               "type":"Action.OpenUrl",
                               "title":"View",
                               "style":"positive"
                            }
                         ],
                         "horizontalAlignment":"Right"
                      }
                   ],
                   "$schema":"https://adaptivecards.io/schemas/adaptive-card.json",
                   "version":"1.4"
                }
 
 

📝 Send transcription summary as adaptive card

Show code…

{
                   "type":"AdaptiveCard",
                   "body":[
                      {
                         "type":"ColumnSet",
                         "columns":[
                            {
                               "type":"Column",
                               "items":[
                                  {
                                     "type":"Image",
                                     "style":"Person",
                                     "url":"https://luware.com/hs-fs/hubfs/Theme%20Luware/svgviewer-png-output.png",
                                     "size":"Small"
                                  }
                               ],
                               "width":"auto"
                            },
                            {
                               "type":"Column",
                               "items":[
                                  {
                                     "type":"TextBlock",
                                     "weight":"Bolder",
                                     "text":"Luware Nimbus via Power Automate",
                                     "wrap":true
                                  },
                                  {
                                     "type":"TextBlock",
                                     "spacing":"None",
                                     "text":"Helpdesk Service Line",
                                     "isSubtle":true,
                                     "maxLines":1,
                                     "wrap":true
                                  }
                               ],
                               "width":"stretch"
                            }
                         ]
                      },
                      {
                         "type":"TextBlock",
                         "text":"Your last call with Maria Sample",
                         "wrap":true,
                         "weight":"Bolder",
                         "style":"heading",
                         "spacing":"Large",
                         "separator":true
                      },
                      {
                         "type":"FactSet",
                         "facts":[
                            {
                               "title":"Sentiment",
                               "value":"Positive"
                            },
                            {
                               "title":"Summary",
                               "value":"Maria asked about an offer for Luware Nimbus. Agent Rudolf confirmed to send it out next week after his holidays."
                            }
                         ]
                      },
                      {
                         "type":"TextBlock",
                         "text":"Transcription",
                         "wrap":true,
                         "weight":"Bolder"
                      },
                      {
                         "type":"FactSet",
                         "facts":[
                            {
                               "title":"Maria",
                               "value":"Hi"
                            },
                            {
                               "title":"Rudolf",
                               "value":"Hi Maria what can I do for you?"
                            },
                            {
                               "title":"Maria",
                               "value":"Can you send me an offer for Nimbus?"
                            },
                            {
                               "title":"Rudolf",
                               "value":"Of course. What licences do you need in the offer?"
                            },
                            {
                               "title":"Maria",
                               "value":"Ehm. "
                            },
                            {
                               "title":"Maria",
                               "value":"I  think I need 10 Contact Center Agents"
                            },
                            {
                               "title":"Rudolf",
                               "value":"Sure. I'll send you the offer next week if this is ok for you?"
                            },
                            {
                               "title":"Maria",
                               "value":"Can you send it tomorrow?"
                            },
                            {
                               "title":"Rudolf",
                               "value":"I am sorry, I am out of office this week, I took some days off. I will send it as fast as I can when I am back next week."
                            },
                            {
                               "title":"Maria",
                               "value":"Sure I understand"
                            },
                            {
                               "title":"Rudolf",
                               "value":"Thank you Maria. Anything else?"
                            },
                            {
                               "title":"Maria",
                               "value":"No thanks. Speak to you soon. Bye"
                            },
                            {
                               "title":"Rudolf",
                               "value":"Bye Maria."
                            }
                         ]
                      }
                   ],
                   "$schema":"https://adaptivecards.io/schemas/adaptive-card.json",
                   "version":"1.4"
                }
 
 

📝 Send a table with ticket information of a customer into a MS Teams chat

For creating an adaptive card containing a table, you need to iterate through the JSON payload containing ticket data and add it to the rows. 

Show code…

{
                   "type":"AdaptiveCard",
                   "body":[
                      {
                         "type":"ColumnSet",
                         "columns":[
                            {
                               "type":"Column",
                               "items":[
                                  {
                                     "type":"Image",
                                     "style":"Person",
                                     "url":"https://luware.com/hs-fs/hubfs/Theme%20Luware/svgviewer-png-output.png",
                                     "size":"Small"
                                  }
                               ],
                               "width":"auto"
                            },
                            {
                               "type":"Column",
                               "items":[
                                  {
                                     "type":"TextBlock",
                                     "weight":"Bolder",
                                     "text":"Luware Nimbus via Power Automate",
                                     "wrap":true
                                  },
                                  {
                                     "type":"TextBlock",
                                     "spacing":"None",
                                     "text":"Helpdesk Service Line",
                                     "isSubtle":true,
                                     "maxLines":1,
                                     "wrap":true
                                  }
                               ],
                               "width":"stretch"
                            }
                         ]
                      },
                      {
                         "type":"TextBlock",
                         "wrap":true,
                         "weight":"Bolder",
                         "style":"heading",
                         "spacing":"Large",
                         "separator":true,
                         "text":"Open Tickets"
                      },
                      {
                         "type":"TextBlock",
                         "size":"Default",
                         "text":"Here is a list of all open tickets from Albert Sampling"
                      },
                      {
                         "type":"Table",
                         "gridStyle":"accent",
                         "columns":[
                            {
                               "width":2
                            },
                            {
                               "width":2
                            },
                            {
                               "width":3
                            },
                            {
                               "width":2
                            }
                         ],
                         "rows":[
                            {
                               "type":"TableRow",
                               "cells":[
                                  {
                                     "type":"TableCell",
                                     "items":[
                                        {
                                           "type":"TextBlock",
                                           "text":"Id",
                                           "wrap":true,
                                           "weight":"Bolder"
                                        }
                                     ]
                                  },
                                  {
                                     "type":"TableCell",
                                     "items":[
                                        {
                                           "type":"TextBlock",
                                           "text":"Title",
                                           "wrap":true,
                                           "weight":"Bolder"
                                        }
                                     ]
                                  },
                                  {
                                     "type":"TableCell",
                                     "items":[
                                        {
                                           "type":"TextBlock",
                                           "text":"Description",
                                           "wrap":true,
                                           "weight":"Bolder"
                                        }
                                     ]
                                  },
                                  {
                                     "type":"TableCell",
                                     "items":[
                                        {
                                           "type":"TextBlock",
                                           "text":"View",
                                           "wrap":true,
                                           "weight":"Bolder"
                                        }
                                     ]
                                  }
                               ],
                               "style":"accent"
                            },
                            {
                               "type":"TableRow",
                               "cells":[
                                  {
                                     "type":"TableCell",
                                     "items":[
                                        {
                                           "type":"TextBlock",
                                           "text":"CAS-01115-Y4Y4G7",
                                           "wrap":true
                                        }
                                     ]
                                  },
                                  {
                                     "type":"TableCell",
                                     "items":[
                                        {
                                           "type":"TextBlock",
                                           "text":"Broken laptop",
                                           "wrap":true
                                        }
                                     ]
                                  },
                                  {
                                     "type":"TableCell",
                                     "items":[
                                        {
                                           "type":"TextBlock",
                                           "text":"albert called the helpdesk and needs assistance",
                                           "wrap":true
                                        }
                                     ]
                                  },
                                  {
                                     "type":"TableCell",
                                     "items":[
                                        {
                                           "type":"ActionSet",
                                           "actions":[
                                              {
                                                 "type":"Action.OpenUrl",
                                                 "title":"Open",
                                                 "url":"https://myticketing.system/ticket/CAS-01115-Y4Y4G7"
                                              }
                                           ]
                                        }
                                     ]
                                  }
                               ]
                            }
                         ]
                      }
                   ],
                   "$schema":"https://adaptivecards.io/schemas/adaptive-card.json",
                   "version":"1.4"
                }
 
 

Show card data…

{
                   "tickets":[
                      {
                         "ticketnumber":"CAS-01115-YYYY",
                         "title":"Create offer for products",
                         "description":"Create the offer for the following products.....",
                         "url":"ttps://myticketing.system/ticket/2531468d-a218-4f7a-b871-c5108c5b47f5"
                      },
                      {
                         "ticketnumber":"CAS-01115-XXXX",
                         "title":"Adapt offer",
                         "description":"Add additional products:....",
                         "url":"ttps://myticketing.system/ticket/2531468d-a218-4f7a-b871-c5108c5b47f5"
                      },
                      {
                         "ticketnumber":"CAS-01115-ZZZZ",
                         "title":"Send Delivery Fact Sheet",
                         "description":"Send out the UK delivery factsheet",
                         "url":"ttps://myticketing.system/ticket/2531468d-a218-4f7a-b871-c5108c5b47f5"
                      }
                   ]
                }
 
 

📝 Creating the card in Power Automate with dynamic ticket data

The table entries are dynamic based on a ticket data JSON. For each ticket we need to add a row to the table in the adaptive card. Here is how you can achieve this in Power Automate:

  1. First, you need an array variable:  
  2.  Append the header row to the array:  
     

    Show code…

    {
                                       "type":"TableRow",
                                       "cells":[
                                          {
                                             "type":"TableCell",
                                             "items":[
                                                {
                                                   "type":"TextBlock",
                                                   "text":"Id",
                                                   "wrap":true,
                                                   "weight":"Bolder"
                                                }
                                             ]
                                          },
                                          {
                                             "type":"TableCell",
                                             "items":[
                                                {
                                                   "type":"TextBlock",
                                                   "text":"Title",
                                                   "wrap":true,
                                                   "weight":"Bolder"
                                                }
                                             ]
                                          },
                                          {
                                             "type":"TableCell",
                                             "items":[
                                                {
                                                   "type":"TextBlock",
                                                   "text":"Description",
                                                   "wrap":true,
                                                   "weight":"Bolder"
                                                }
                                             ]
                                          },
                                          {
                                             "type":"TableCell",
                                             "items":[
                                                {
                                                   "type":"TextBlock",
                                                   "text":"View",
                                                   "wrap":true,
                                                   "weight":"Bolder"
                                                }
                                             ]
                                          }
                                       ],
                                       "style":"accent"
                                    }
     
     
  3. Then, you need to parse your JSON data containing the ticket details:  
  4. Iterate over the items from the Parse_JSON object and create the rows for the table:  
  5. Add to your variable TableRows the following data:  

    Show data…

    {
                                      "type": "TableRow",
                                      "cells": [
                                        {
                                          "type": "TableCell",
                                          "items": [
                                            {
                                              "type": "TextBlock",
                                              "text": "@{items('Apply_to_each_3')['ticketnumber']}",
                                              "wrap": true
                                            }
                                          ]
                                        },
                                        {
                                          "type": "TableCell",
                                          "items": [
                                            {
                                              "type": "TextBlock",
                                              "text": "@{items('Apply_to_each_3')['title']}",
                                              "wrap": true
                                            }
                                          ]
                                        },
                                        {
                                          "type": "TableCell",
                                          "items": [
                                            {
                                              "type": "TextBlock",
                                              "text": "@{items('Apply_to_each_3')['description']}",
                                              "wrap": true
                                            }
                                          ]
                                        },
                                        {
                                          "type": "TableCell",
                                          "items": [
                                            {
                                              "type": "ActionSet",
                                              "actions": [
                                                {
                                                  "type": "Action.OpenUrl",
                                                  "title": "Open",
                                                  "url": "@{items('Apply_to_each_3')['url']}"
                                                }
                                              ]
                                            }
                                          ]
                                        }
                                      ]
                                    }
     
     
  6. Then you can use the array variable in your adaptive card   "rows":  @{string(variables('TableRows'))}:  

    Show data…

    {
                                        "type": "AdaptiveCard",
                                        "body": [
                                            {
                                                "type": "ColumnSet",
                                                "columns": [
                                                    {
                                                        "type": "Column",
                                                        "items": [
                                                            {
                                                                "type": "Image",
                                                                "style": "Person",
                                                                "url": "https://luware.com/hs-fs/hubfs/Theme%20Luware/svgviewer-png-output.png",
                                                                "size": "Small"
                                                            }
                                                        ],
                                                        "width": "auto"
                                                    },
                                                    {
                                                        "type": "Column",
                                                        "items": [
                                                            {
                                                                "type": "TextBlock",
                                                                "weight": "Bolder",
                                                                "text": "Luware Nimbus via Power Automate",
                                                                "wrap": true
                                                            },
                                                            {
                                                                "type": "TextBlock",
                                                                "spacing": "None",
                                                                "text": "Created 01.02.2024 at 15:56 ",
                                                                "isSubtle": true,
                                                                "wrap": true
                                                            }
                                                        ],
                                                        "width": "stretch"
                                                    }
                                                ]
                                            },
                                            {
                                                "type": "TextBlock",
                                                "size": "Medium",
                                                "weight": "Bolder",
                                                "text": "Here is a list of all open tickets from Albert Sampling"
                                            },
                                            {
                                                "type": "Table",
                                                "gridStyle": "accent",
                                                "columns": [
                                                    {
                                                        "width": 2
                                                    },
                                                    {
                                                        "width": 2
                                                    },
                                                    {
                                                        "width": 3
                                                    },
                                                    {
                                                        "width": 2
                                                    }
                                                ],
                                                "rows":  @{string(variables('TableRows'))}
                                            }
                                        ],
                                        "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
                                        "version": "1.4"
                                    }
     
     

📝 Send a table with ticket information of a customer into a MS Teams chat

This is not an adaptive card -  using a Teams chat message is much easier than creating an adaptive card if we want to print an HTML table inside of the card.

Here is how to create the message in Power Automate:

  1. Create a HTML Table with the ticket information from your ticketing system in Power Automate:  
  2. Use the MS Teams connector to post a message in a chat or channel using the HTML table. You need to format the HTML output like this, so it gets properly displayed:  
    replace(replace(replace(body('Create_HTML_table'),'&lt;','<'),'&gt;','>'),'&quot;','"')  

📝 Creating the card in Power Automate with dynamic values

🔎 Refer to Use Case - Analyzing a Transcript.

Helpful assets for creating cards

Nimbus Logo for download.
Current Date and Time Nicely formatted formatDateTime(utcNow(),'g')  
For example, in the US locale, it outputs something like "10/23/2024 10:06 AM".
Nimbus Task Service Name @{triggerOutputs()?['body/serviceDisplayName']}
Nimbus Task Customer Email or Phone Number @{triggerOutputs()?['body/CustomerIdentifier']
Get the submitted action id from an adaptive card

There is no standard response. You can get it using this:

@{outputs('Post_adaptive_card_and_wait_for_a_response')?['body/SubmittedActionId']}

Table of Contents