Wednesday 28 August 2024

Adaptive Card: Power Automate send birthday greetings to team members

In this blog, we will be learning about Adaptive Cards and how to send a birthday greetings automatically to Team's channel to team members.

Create Flow

1). Sign in to Power Automate

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

Enter Flow name.
Set the flow recurrence interval as daily.
Click on the Create button.


3). Initialize variable of Array type.

4). Add an action "List group members" and enter team name from the dropdown in Group Id parameter. Its used to get all the members details present in the teams in an array.


5). Add "Apply to each" loop and enter previous step output as input value.

6). Add an action "Get user profile (V2)" and enter User (UPN) value as "User Principal Name" dynamic content from step 4.

7). Append the array variable (defined in step 3) value in JSON format for "Display Name", "User Principal Name", "Birthday".

{
  "name": "@{outputs('Get_user_profile_(V2)')?['body/displayName']}",
  "email": "@{outputs('Get_user_profile_(V2)')?['body/userPrincipalName']}",
  "birthday": "@{outputs('Get_user_profile_(V2)')?['body/birthday']}"
}


8). Add an action "Filter Array" and enter array variable in From parameter value.

@equals(formatDateTime(convertFromUtc(item()['birthday'], 'India Standard Time'), 'MM-dd'), formatDateTime(convertFromUtc(utcNow(), 'India Standard Time'), 'MM-dd'))


9). Add "Apply to each" loop and enter previous step output as input value.

10). Add an action "Compose" and add Adaptive Card payload in the inputs parameter (refer step 12).

11). Now, add an action "Post card in a chat or channel" and "Send an email (V2)".
Add mandatory parameter values as shown in below image.


12). Open Adaptive Cards Designer portal and create the Adaptive card design according to your requirements.

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


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

Happy Birthday - CARD PAYLOAD
{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.4",
    "body": [
        {
            "type": "TextBlock",
            "text": "🎂 Happy Birthday 🎂",
            "wrap": true,
            "id": "happyBirthdayCard-Title",
            "horizontalAlignment": "Center",
            "size": "ExtraLarge",
            "weight": "Bolder",
            "fontType": "Monospace"
        },
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "Image",
                            "id": "happyBirthdayCard-Image",
                            "url": "https://cdn0.iconfinder.com/data/icons/
                                    birthday-sticker/100/14_happy_birthday_
                                    balloon_event_celebration-1024.png",
                            "separator": true,
                            "horizontalAlignment": "Center"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Hi Vikas Bansal,",
                            "wrap": true,
                            "id": "happyBirthdayCard-MailHeader",
                            "weight": "Bolder",
                            "size": "Medium"
                        },
                        {
                            "type": "TextBlock",
                            "text": "We extend our warmest wishes for a
                                     wonderful birthday and a year filled
                                     with cherished memories. Best regards
                                     from all of us.",
                            "wrap": true,
                            "id": "happyBirthdayCard-MailBody"
                        },
                        {
                            "type": "TextBlock",
                            "text": "Team HR",
                            "wrap": true,
                            "id": "happyBirthdayCard-MailFooter"
                        }
                    ],
                    "id": "happyBirthdayCard-Column",
                    "verticalContentAlignment": "Center"
                }
            ],
            "separator": true
        }
    ],
    "id": "happyBirthdayCard"
}


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



Now it's time to test the flow. Manually run the flow and wait for sometime.

Adaptive Card output for Teams desktop application.



Adaptive Card output for Teams web application.



Adaptive Card output for Outlook web application.



Refer Adaptive Card blog series:
Adaptive Card: Power Automate send welcome message when new team member added
Adaptive Card: Power Automate send birthday greetings to team members
People Picker in Adaptive Cards
Adaptive Card: Send Form using Adaptive card in MS Teams to group members


I hope this will help all of you! 🧲
Feel free to provide feedback.


🚀 "Happy Coding" 🚀

No comments:

Post a Comment