Blogs 2 Share: July 2024

In this blog, we will be learning about Adaptive Cards and how to send a welcome message automatically to Team's channel when a new member is added to the team.

What is Adaptive Card?

Adaptive cards are a platform-agnostic method of sharing and displaying blocks of information without the complexity of customizing CSS or HTML to render them. Adaptive Cards are authored in JSON format enabling developers to exchange UI content in a common and consistent way with cloud apps and services integrations.

Create Flow

1). Sign in to Power Automate

2). Open the flow, click on the Create option, and select "Automated Cloud Flow".

Enter Flow name.
Choose the flow trigger as "When a new team member is added".
Click on the Create button.

3). Enter the team name in trigger action.

4). Initialize variable of string type.

5). Add an action "Get user profile (V2)" and enter User (UPN) value as trigger output User ID.

6). Add an action "Get user photo metadata" and enter User (UPN) value as trigger output User ID.

7). Add a condition to check if user "Has photo" or not.

a) If Yes, add an action "Get user photo (V2)" and enter User (UPN) value as trigger output User ID. Set variable value as base64 encoded image content (received from above).

concat('data:image/png;base64,',body('Get_user_photo_(V2)')?['$content'])

b) If No, set variable value as default/fallback image absolute hyperlink.

8). Now, add an action "Post card in a chat or channel".
Add mandatory parameter values as shown in below image.

Now we will discuss how to create Adaptive Card parameter value.

9). Open Adaptive Cards Designer portal.

Select host app as "Microsoft Teams" and Target version as 1.4

⊛ Note

Adaptive Card payload size in Microsoft Teams should be less than 28KB. This limit applies to the entire card, including all its elements and actions.
The latest Target version didn't work, but version 1.4 worked in my testing.
Image element:

URL's must start with https and and ends with file extension like JPEG, PNG, GIF.
URL can be an absolute hyperlink to image or base64 encoded file contents.
Emoji's can render differently based on the device's OS (Windows, Android, iOS) and even vary in web browsers.

10). Click on "New card" and select Blank Card template. However you can use existing available templates as well and modify them as per your requirements.

11). Select the required elements from the Card Element left pane. Then drag and drop onto the Card Design area.

12). Set the Card element properties. Currently, we will set the static details and later on add dynamic data from flow itself.

13). Once Adaptive Card design is complete. Click on "Copy card payload" and paste it into the Adaptive Card parameter value (Step 8)

Then add dynamic values for the user display name and user photo (yellow highlighted).

Welcome Message - CARD PAYLOAD

Welcome Message - CARD PAYLOAD
{ "type": "AdaptiveCard", "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "version": "1.4", "body": [ { "type": "TextBlock", "text": "Greetings and welcome to the team!", "wrap": true, "id": "welcomeCardTitle", "horizontalAlignment": "Center", "fontType": "Monospace", "size": "Large", "weight": "Bolder", "color": "Accent" }, { "type": "Image", "url": "https://cdn1.iconfinder.com/data/icons/ user-pictures/101/malecostume-64.png", "altText": "Vikas Bansal", "horizontalAlignment": "Center", "id": "welcomeCardProfileImage", "separator": true, "style": "Person", "size": "Medium" }, { "type": "TextBlock", "text": "Vikas Bansal", "wrap": true, "fontType": "Default", "size": "ExtraLarge", "weight": "Bolder", "color": "Dark", "horizontalAlignment": "Center", "id": "welcomeCardDisplayName" }, { "type": "TextBlock", "text": "Welcome aboard to our team, it's truly incredible to have a fresh and talented new member on board! Through our collaboration, we are poised to elevate the company to new heights. 🚀🚀", "wrap": true, "id": "welcomeCardDescription", "size": "Small", "weight": "Default", "separator": true }, { "type": "Image", "id": "welcomeCardDescriptionImage", "horizontalAlignment": "Center", "url": "https://cdn1.iconfinder.com/data/icons/ welcome-greeting-illustration/3000/Welcome-03-256.png" } ], "id": "welcomeCard" }

{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.4",
    "body": [
        {
            "type": "TextBlock",
            "text": "Greetings and welcome to the team!",
            "wrap": true,
            "id": "welcomeCardTitle",
            "horizontalAlignment": "Center",
            "fontType": "Monospace",
            "size": "Large",
            "weight": "Bolder",
            "color": "Accent"
        },
        {
            "type": "Image",
            "url": "https://cdn1.iconfinder.com/data/icons/
                    user-pictures/101/malecostume-64.png",
            "altText": "Vikas Bansal",
            "horizontalAlignment": "Center",
            "id": "welcomeCardProfileImage",
            "separator": true,
            "style": "Person",
            "size": "Medium"
        },
        {
            "type": "TextBlock",
            "text": "Vikas Bansal",
            "wrap": true,
            "fontType": "Default",
            "size": "ExtraLarge",
            "weight": "Bolder",
            "color": "Dark",
            "horizontalAlignment": "Center",
            "id": "welcomeCardDisplayName"
        },
        {
            "type": "TextBlock",
            "text": "Welcome aboard to our team, it's truly incredible to
                     have a fresh and talented new member on board!
                     Through our collaboration, we are poised to elevate
                     the company to new heights. 🚀🚀",
            "wrap": true,
            "id": "welcomeCardDescription",
            "size": "Small",
            "weight": "Default",
            "separator": true
        },
        {
            "type": "Image",
            "id": "welcomeCardDescriptionImage",
            "horizontalAlignment": "Center",
            "url": "https://cdn1.iconfinder.com/data/icons/
                    welcome-greeting-illustration/3000/Welcome-03-256.png"
        }
    ],
    "id": "welcomeCard"
}

14). Complete flow with all the actions will look like below.