Use Microsoft Flow to display Teams messages in the SPFx app

Microsoft Teams is a great communication tool for almost all kind of projects. Gaining in the popularity, Teams integration becomes a significant requirement in the development process of many new solutions. There are a few things which are needed but not covered by Teams API, like activity feed or reading messages from the channels. Microsoft Flow can help at least with the latter.

To achieve the goal, we will use a trigger “When a HTTP request is received”. It’s a compelling trigger, but with great power comes great responsibility. That’s why I’ve decided to divide this article into two parts. In this part, I will show you how to create and use API to receive Teams messages. In the article Steal data with MS Flow, I’ve covered the security issue which is associated with the HTTP trigger.

Creating Flow

For a basic Flow, all we need is trigger and three actions. Triggered by HTTP request, the flow will get the messages from the selected channel and create adequate response.

Trigger

The Trigger action can be a simple GET without any parameters, if you want the flow to return messages only from one specific channel. To make it universal, let’s configure an action as a POST. We need at least two properties in the payload:

• Team Id
• Channel Id

Additionally, provide a correct JSON schema:

{
   "type": "object",
   "properties": {
       "teamId": {
           "type": "string"
       },
       "channelId": {
           "type": "string"
       }
   }
}

Teams action: Get messages (Preview)

Please, notice that this action is marked as preview. It accepts only two parameters: team id and channel id. There is a lack of parameters, like time interval or a max number of messages.

Let’s pass parameters from HTTP request to the action.

Response – failure

In most cases, failure is a result of an incorrect request – when a user provides a wrong channel or team id. That’s why, we should create a response with a code 400 and a body containing a “Get Messages” body. It provides an ascetic description of the error, but hey, it’s something.

Remember to set this step to execute only on failure of the previous step. To do this, click on the ellipsis (the three dots icon in the top right corner of the action) and click “Configure run after”.

Response – success

In case of success, we would like to return a list of messages. Create a parallel step and choose “Message List” from the tooltip, as shown on the screen.

The Flow returns messages as a JSON. Every message can contain attachments, subject, body, reactions and other properties.

The whole Flow will look like this:

Usage

You can easily use this Flow from SPFx web part. Just make a REST API call using fetch, ajax or any other similar library. Remember to add content type header:

'Content-Type': 'application/json',

Create a body from your team and channel IDs:

const body = {
    teamId: teamId,
    channelId: channelId
};

And finally make a API POST call:

fetch(url, {
    method: 'POST',
    headers: headers,
    body: JSON.stringify(body)
})

The returned object is an array containing up to 20 messages, the model of which you can find in my repository. Please, note that I have not finished it, as I’ve made it from the data I got from the flow.

Use case

Let’s say you have created a team. Every team member starts his/her day on the dedicated SharePoint site. You want to highlight the most important news from the general channel. In this case, you can put a web part on the page which will use API created in this article.

In the screenshot, I’ve presented a skeleton of that kind of web part. If you want to implement a similar solution, consider those points:

• If bot sent the message, its body would be in the attachment property,
• Every message has a ‘from’ property. It can contain application property, if the message is sent by bot, the user, if it is sent with the use of user account, conversation or device,
• You can create a message URL: https://teams.microsoft.com/l/message/{channelId}/{message.id} Replace {channelId} with the id of your channel. Instead of {message.id}, you can use an ID from message object.

You can find the code web part in my GitHub repository.

https://github.com/Elnathsoft/TeamsFeed

Summary

As long as we don’t have a proper API for some use cases, we can create one with the MS Flow. Flow is an easy to use tool with many capabilities. You can use it in the SPFx solution to get data which you can’t get in any other way or execute actions in the context of another account.

The presented solution isn’t safe. The flow is accessible by people who have access to the URL. Please, read my second article to learn how to make this flow safer.