Adaptive Cards for Teams to collect data from users using Power Automate | SharePoint Lists

Adaptive Cards is something so cool and works like magic!! I’m sure there are so many creative ways to use it.

Here’s an example – Use Adaptive Cards to gather data from Microsoft Teams Users and populate it automatically to SharePoint List.

Scenario

Let’s say, you have a set of data to collect from your employees – for instance, planning a trip (or any other event for that matter) where you have to take data from employees in order to better plan the logistics.

So, in my example, I want to plan an event for which I need to ask each employee their T-Shirt size, food preference and any allergies to be taken care of.

It’s better to let the users answer at their own accord. You simply need to create a SharePoint list and list out all the Employees whom the short questionnaire should be sent to.

Adaptive Cards (https://adaptivecards.io/)

As their website says, Adaptive Cards are platform-agnostic snippets of UI, authored in JSON, that apps and services and open exchange.

It’s a superb way to make these cards pop-up in Teams, Outlook, Bot Framework etc.

In this post, we’ll ask Microsoft Teams users to submit some info which will be automatically populated to the SharePoint List.

In https://adaptivecards.io/designer/, you can design your own Adaptive Card by looking at the samples already provided on the website.

SharePoint List

Let’s say, you’ve prepared a SharePoint List called ‘Employee Preferences‘ which looks like the below. And you need to get info from them on their Allergies, Food Preference and T-Shirt size in order to prepare for the event

Power Automate

Next step, is to create a Flow in PowerAutomate to send out these Adaptive Cards to the Teams member in their Chat so that they can send back their preferences which is automatically updated in the SharePoint List.
Let’s begin –
(Before we begin, it’s up to you to decide when should the Power Automate trigger, whether on create of Each Item, or all at once when the SP List is ready. I just chose the later. So, see what’s most suitable to you.)

  1. Let’s say my first step is to get all the items from the SharePoint List I created, called ‘Employee Preferences


    And then, set the below preferences –


  2. Next, I’ll loop through each of the SP items and initiate an Teams action to send Adaptive Card and wait for the response.

  3. Now, in Adaptive Card you’ve selected for the user of the Team, I’ve used the Email field from the SP list so that I can use it in the recipient field to send the Adaptive Card to that Teams user.

    And paste the content from Adaptive Card editor in Message field.


  4. You can use dynamic data at the right places to populate you Adaptive Card wherever needed.


  5. Finally, you can have an Update message filled in. This is shown once the User Submits back the Adaptive Card with data.
    Should update card should be selected to Yes so that it doesn’t stay like that and the user knows that the response has been captured.


  6. Then, you need to update the captured response back to the SP List.



  7. At this point, your Adaptive Card is ready! Let’s test.

Adaptive Card in Microsoft Teams

Once this is run, the Teams user gets the below in the chat.

  1. User receives and Adaptive Card in their Teams Chat.

    Let’s zoom a little and see how it looks. Notice that we had populated the name dynamically in the Adaptive Card body.

  2. Now, click on Fill Out information and the card will expand to expose the form

  3. Now, I’ll fill the information as below and Submit the same

  4. Once I click Submit, I’ll see the below message. Remember, this populated from Update message field in the Adaptive card options.

  5. And when you check back the SharePoint List, the data has been updated in the same.

    And that’s it!!
    Hope this helped!

Here are some Power Automate / Flow posts you might want to look at –

  1. ChildFlowUnsupportedForInvokerConnections error while using Child Flows [SOLVED] | Power Automate
  2. BPF Flow Step as a Trigger in CDS (Current Environment) connector | Power Automate
  3. http://flowPause a Flow using Delay and Delay Until | Power Automate
  4. Generate Dynamics 365 record link in a Flow using CDS connector | Power Automate
  5. Text Functions in a Flow | Power Automate
  6. Loop through array of objects in a Flow & Create records in CDS | Power Automate
  7. Get Count of records retrieved in CDS connector in a Flow | Power Automate
  8. Number Formatting in a Flow | Power Automate
  9. Call a Dynamics 365 Action from Flow [Bound and Unbound Actions] | Power Automate
  10. Setting Retry Policy for an HTTP request in a Flow | Power Automate
  11. Switch-Case in a Flow | Power Automate
  12. Make HTTP request from Flow in Power Automate

Thank you for your time!

Adding a Canvas PowerApp to Teams

Let’s take a look at how you can simply export the Canvas App from your Organization and import it to Teams. And you should be good to go!

Exporting Canvas App

  1. Assuming you are an Admin and you have Owner/Co-Owner rights to the App, you can click the ellipses part on the App and look for Add to Teams option.
    addToTeams
  2. Once done, you can check on the right hand-side to see some details and Download the zip file of the Canvas App when ready
    downloadApp
  3. And that’s it, it gets downloaded like any other Model Driven/Canvas App solution file.
    downloaded

 

Importing App to Teams

  1. Now, you can import the same as a custom App in Teams. Navigate to the Apps section and look for Upload a custom app in menu as shown below.
    uploadACustomApp
  2. Now, chose the Org you want to import the solution file to. In my case, it’s just one organization, you may have multiple.
    selectOrg
  3. A dialog box will pop up to ask you to select the solution file, navigate to the saved location and pick the file.
    selectSolution
  4. And you’re ready. The App has been imported. You can see it in the Apps section under Built for CFT 146.
    findAppOnTeams

 

Adding App Per User

Each user needs to add the App themselves in order to be able to access it.

Also, remember that the user who is adding the App should have rights to access the App itself i.e. the App should be shared with those users.

Let’s say Kuldeep is another user in the CFT 146 Organization. He can explicitly search for the App and add it as below –

  1. Go to Apps, then look for the area, Build For <Org Name> and then look for the App that was imported.
    Attendees AppfindAppOnTeams
  2. Click on the App, and the dialog box will provide with a button to Add to Teams, along with other details mentioned alongside.
    clickAdd
  3. Once added, it will appear next in the left navigation menu and you can simply run it by clicking on it.
    appRunning
  4. In case the user doesn’t have appropriate rights on the App, they will see this message when trying to open the App in Teams.
    errorInAccessing

Hope this helps!! Happy 365ing!