Creating a Teams “Who’s Where” Board Using Adaptive Cards and Power Automate

Written by Tony Gray

 

COVID has changed the way we work for good!

 

The last few years has fast-tracked us to work better remotely, more efficiently and allowed us the flexibility to work wherever we want. It has also allowed tools like MS Teams, Zoom & Slack to evolve amazingly quickly to support the “new/standard” way of working.

 

With the vast majority of us choosing to work from home during the lock-downs (not that we had any choice) and then once the lockdowns stopped and we had the freedom of moving about more freely, Mojo Soup (along with a lot of people) chose to start working in the office and also having ‘actual meetings’ at client sites.  With Mojo Soup moving a bit more freely around now, we all really wanted to know everyone’s whereabouts in one simple place and more importantly, know when everyone was going to be in the office at the same time! I’m not talking about posting any exact whereabouts, but rather just letting everyone know you might be working from Home (HO) or in the Mojo Soup office (HQ) + any other general locations you might be on the day.

 

Introducing the Mojo Soup “Who’s where” board! As any true IT professional, I set about doing some “googling” on how we could use Teams to gather information from our ‘Mojo Soupians’ and centralise it somewhere for everyone to see. I then came across Microsoft’s documentation regarding Teams adaptive cards and after reading a few other articles of how this could be used, a solution jumped out at me.

 

This blog covers how I implemented what we call the Mojo Soup Teams “Who’s where” board at a reasonably high-level using Teams adaptive cards, Power Automate and a humble SharePoint list. Please reach out to one of our friendly team if you would like further detail on this. If you are a wizard of all things Teams, SharePoint and Power Automate…. Well, hopefully this post will give you some inspiration and improve on how we have implemented this at Mojo Soup.

 

Ok, so below is a screenshot of what is posted by Power Automate every Friday at 8:45am, to get some input on our whereabouts for the next week:

So, first of all this adaptive card was created fairly easily using the Microsoft Adaptive cards designer tool and if you’ve never used this tool before, it can take quite a while to tinker to get thigs right, which is exactly what I was doing on an idle Tuesday evening until about 1am before I realised what the time was! As you can see, I made some space for the ‘Dad joke of the week’ which is absolutely essential to make this solution work!

 

Anyways, so once I got the design right, I then copied the JSON that is generated from the Adaptive cards designer payload editor window and saved it away for later.

The following steps were then taken for this solution:

  • Created a SharePoint list which lists all the active users of the Mojo Soup team.
  • Created a Power Automate process which does the following:
    1. Loops through each member of the team, and for each team member:
    2. Get’s their user profile image link
    3. Shoots a request off to the “Dad joke” API – https://icanhazdadjoke.com/ to obtain the “Dad joke of the week”
    4. Posts the Adaptive card to the ‘Mojo Soupian’ Team member. This is where you past in the .JSON code that was generated from the Adaptive card designer and substitute all the required text. In this case, we wanted to use the profile picture of the person and substitute in the “Dad joke of the week”
    5. It then waits for input from the “Mojo Soupian” (Hopefully not too long), I implemented some logic that it would just cancel the process after a week if we haven’t heard from them but feel free to implement your own logic.
    6. Once the posted adaptive card has been submitted by someone in the team, it then continues the Power Automate process to update the related information back into the SharePoint list.

Here is a screenshot of the Power Automate process:

This is the SharePoint list which has been created and shows the week commencing + Mojo Soupian:

Wanting this solution to be part of a Teams channel, we embedded this SharePoint online list inside a tab resulting in the following:

Conclusion

Although this example is fairly rudimentary and only shows limited information on each team member, there is not reason why you couldn’t just go mad and throw a bunch more time (I’ve been tempted) to enhance this solution to do the following (just some ideas):

  • Enhance the Adaptive card with drop-down values with set values
  • Turn this solution into a fully fledged Teams bot (So many things to do here!)
  • Fully customise the SharePoint list using custom JSON formatting
  • Scale the solution by supporting multiple teams whereabouts
  • Perhaps utilise a Power BI report to get a much more customised look and feel. Possibly using a streaming dataset to get instant data-feeds from Adaptive cards inputs.

Anyways, you can see the list can go on, however I hope this has given some inspiration to implement a Teams adaptive card solution to achieve your data input requirements! Again, reach out to one of the team if you need any more detail. We are all happy to help!