GET IN TOUCH
+1-732-668-8002
+91-62843-00850
info@penthara.com
LOCATIONS
USA
131 Continental Drive
Suite 305
Newark, DE 19713
United States
India
SCO 515, Third Floor
Sector 70, Mohali
Punjab, 160055
Follow Us on Social -

Creating interactive adaptive cards in MS Teams with dynamic data from SharePoint Lists

Learn how to create interactive adaptive cards in MS Teams with dynamic data from SharePoint Lists
CATEGORIES:
SHARE THIS BLOG:

Goal

Our end goal here is to post an adaptive card to 2 different departments for approval. Each department will be presented with a different set of rejection reasons based on their department dynamically. These rejection reasons are being fetched dynamically from the SharePoint List and are being appended to the adaptive cards. This eliminates the need to modify the adaptive cards each time the data in the SharePoint list is modified.

Pre-Requisites

  1. An account with license for below services:
    1. SharePoint Online (Plan 1/Plan 2)
    2. Microsoft Teams
    3. Microsoft Power Automate Free
  2. A SharePoint Online site with contribute access to the account in use
  3. A SharePoint List that will be used as a data input source. In our case, we are using a list called Equipment Request with the below columns:
    1. Title (this is the default column)
    2. Status (Single line of text)
      1. Default value has been set to Pending
    3. A SharePoint List that will be used as a source to fetch dynamic data for reason based on department. In our case, we are using a list called Rejection Reason with the below columns:
      1. Department (We have renamed Title column to Department)
      2. Rejection Reason (Single line of text)

Steps to perform:

Create a SharePoint List Equipment Request. We will be using this list to add content and trigger a flow (when an item is created or modified) that will post an adaptive card. We will use the below columns in the list:

  1. Title (this is the default column)
  2. Status (Single line of text) 
    • Default value has been set to Pending

2. Create another SharePoint List Rejection Reason that will be used to dynamically render rejection reasons in the adaptive cards basis the department the card is being posted to. We will use the below columns in the list:

  1. Department (We have renamed Title column to Department)
  2. Rejection Reason (Single line of text)

3. Populate data in the Rejection Reason list since we will be using data from this list in our adaptive cards. For our case, below is the sample data table:

  1.  We will make use of Power Automate to automatically post an adaptive card to a channel as soon as a new item is created in Equipment Request List.
  2. Create a Flow and set it to trigger when an item is created or modified.
  1.  We will now initialize variables HRCounter & ITCounter. We will be using these variables as an item counter at a later stage. We have used these counters for making our troubleshooting a little bit easier. You can do away without creating these counters.
  1. Initialize another set variables HRReasons & ITReasons (Array). We will be using these variables to append data to the adaptive card.
  1. Initialize another set variables HRResponse & ITResponse (String). We will be using these variables to capture the response that is submitted by the approver.
  1.  Get List Items (with Filter Query). Here we will filter and fetch rejection reasons only for “Human Resource” department (for demo purpose). Here you can dynamically fetch department for a given user and apply that filter for this query accordingly.
  1. In this step, we will use Apply to each to append all the items (that we have retrieved from the list) to an array while incrementing the counter by 1.
  • These values that we have appended to the HRReasons Array will be used later when composing the adaptive card.
  • We have used the below Expression Value for both Title & Value sections:

body('Get_Human_Resource_Rejection_Reasons_items_from_Rejection_Reason_List')['value'][variables('HRCounter')]['RR']

  1. We will use Compose Action to compose an adaptive card message
  • Below is the JSON code that we used for composing our adaptive card:
  •  

{

  "type": "AdaptiveCard",

  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",

  "version": "1.2",

  "body": [

    {

      "type": "TextBlock",

      "text": "A New Request has been submitted by @{triggerOutputs()?['body/Author/DisplayName']}",

      "wrap": true,

      "id": "Request_Head",

      "size": "Medium",

      "weight": "Bolder",

      "horizontalAlignment": "Center"

    },

    {

      "type": "TextBlock",

      "text": "@{triggerOutputs()?['body/Title']}",

      "wrap": true,

      "id": "Request_Body"

    }

  ],

  "actions": [

    {

      "type": "Action.Submit",

      "title": "Approve",

      "id": "Approve",

      "style": "positive"

    },

    {

      "type": "Action.ShowCard",

      "title": "Reject",

      "card": {

        "type": "AdaptiveCard",

        "body": [

          {

            "type": "TextBlock",

            "text": "Please select a reason for rejecting the request.",

            "wrap": true,

            "id": "Rejection_Heading"

          },

          {

            "type": "Input.ChoiceSet",

            "choices": @{variables('HRReasons')},

            "placeholder": "Placeholder text",

            "style": "expanded",

            "value": "@{body('Get_Human_Resource_Rejection_Reasons_items_from_Rejection_Reason_List')['value'][0]['RR']}",

            "id": "Choices"

          }

        ],

        "actions": [

          {

            "type": "Action.Submit",

            "title": "Reject",

            "id": "Rejected",

            "style": "destructive"

          }

        ]

      },

      "id": "Reject",

      "style": "destructive"

    }

  ],

  "id": "Adaptive_Card"

 }

  •  Highlighted sections in the JSON above is the Dynamic content or expression that has been used to compose an adaptive card
  1. Now we will post an Adaptive Card to the Human Resource Channel & Wait for a response
  1. Once a new request is submitted by a requestor, an adaptive card will be posted in the Human Resource Channel in Operations Team letting the department know of a new request.
  2. This is how the adaptive card will look like
  1. The approver will be presented with 2 options; Approve or Reject.
  2. When the approver clicks Reject, they will be presented with department specific rejection reasons as filtered in the flow above.
  1. We will capture the response of the HR approver in the HRResponse variable

@{body('Post_an_Adaptive_Card_to_a_Human_Resources_Teams_channel_and_wait_for_a_response')['submitActionId']}

  1. We will then update the status of the request with the response of the first approval.
  1. If the HR Approver approves the request, it will then be forwarded to the IT Team for fulfilment.
  2. For this, we will add a condition to validate the outcome of HR Approval. If the outcome of the HR Approval is Approve, then proceed further.
  1. We will follow same steps from #11 to #20 for the IT Approval process.
  2.  Now that request has been approved by HR Team, it has now been forwarded to IT Team for fulfilment.
  3. A new adaptive card will be posted in the IT Team Channel as below:
  1. If the request adheres to the set guidelines, the IT Team will approve the request otherwise the request will be rejected.
  2. The IT Team will be presented with IT specific rejection reasons (as below):

26. We will capture the response of the HR approver in the ITResponse variable

@{body('Post_an_Adaptive_Card_to_IT_Helpdesk_Teams_channel_and_wait_for_a_response')['submitActionId']}
  1. We will then update the status of the request with the response of the next approval

Conclusion

We just saw how we can dynamically filter values and present them as dynamic options in an adaptive card.

In this demo the First Approval request goes to the Human Resource Channel in the Operations Team. Once the request is approved by the Human Resource Team, it is then forwarded for Second level Approval & Fulfilment to the IT Helpdesk Channel in the Operations Team. If the request is rejected by the HR, it will not be presented to the IT Helpdesk for fulfilment.

This kind of dynamic filtering can be achieved by using content from SharePoint Lists.

Written By
Akkhil Ohri, M365 Architect at Penthara Technologies
Akkhil Ohri
M365 Solution Architect
peer reviewed By
Jasjit
JAsjit Chopra
chief executive officer
Graphics designed By
Sanika Sanaye
sanika sanaye
Creative Design Director
Recommended Content

Email Insights

Get the latest updates from Penthara right in your mail box.
Sign Up

LinkedIn Newsletter

Monthly updates, news & events from Microsoft to help  your business grow.
Subscribe To Newsletter

More From This Category

Penthara Org Chart for your Microsoft Teams – an extended version of Microsoft Org Chart

Explore the extended version of Microsoft Org Chart - Penthara Org Chart for MS Teams. Discover its capabilities, such as seamless integration with SharePoint user profiles and Azure AD, advanced search functionality, and customizable user cards. Enhance collaboration with clear hierarchy views and enjoy simple installation.

Read More
Create and Publish custom Teams Together Mode Backgrounds using Canva and Scene Studio

Want to learn how to design, build, and publish a custom together mode background for Microsoft Teams? Our blog provides step-by-step instructions on how to make and publish custom-together mode Teams backgrounds using Canva and Scene Studio Editor in a matter of hours.

Read More
Creating reminder Adaptive cards in Microsoft Teams for upcoming events from a SharePoint calendar list

Learn how to create an Adaptive Card in Power Automate that posts a summary of upcoming events like Birthdays, Work Anniversaries and Holidays to an MS Teams Channel. The source of these events is the SharePoint legacy calendar app. Advanced Dynamic JSON Adaptive Card implementation has been covered extensively in this example.

Read More