Embedded Files
In this article, we'll explore a step-by-step guide to pass custom data through Activity Feed notifications. If you're struggling with finding methods to send custom data to your Teams app, you're in the right place. We'll walk you through a clear approach that will help your application render relevant data based on the received custom data.
Understanding Teams Activity Feed Notifications
Before we dive into the implementation details, it's essential to have a basic understanding of Teams Activity Feed notifications. Microsoft Teams provides developers with the capability to send notifications to users, users in chats, users in teams, and even multiple users. These notifications can reference events, tasks, requests, or tabs within your app. To get started, it's recommended to refer to the official documentation (link to documentation) to grasp the fundamentals of the Teams activity feed and its capabilities.
Creating a Simple Custom Teams App
For the purpose of this article, let's consider a simple Teams app. This app features a basic static tab that displays a Sharepoint site, facilitating communication. The site contains a simple webapp developed using React (SPFX App).
The Teams app manifest includes the defined activity types and specify the activity type as "TeamsGlobalNotification."
Note down the appID and tab's entityID, which will be used later in the process.
Sending Custom Data via Activity Feed Notifications using Postman
Once you upload the Teams app, let's use Postman to fire the Notification endpoint.
In the notification payload:
Leverage the custom topic by specifying the source as "text."
Define other properties such as value, previewText and templateParameters.
Define recipients using the Active Directory ID's, allowing you to target specific users, groups, or teams.
Template parameters defined in the Teams App Manifest file replace specific values in the notification. In this case, the "message" parameter serves as the main title of the push notification.
Passing custom data:
The main custom data is passed via the "webUrl" property.
The URL structure is essential, as it must follow certain rules outlined in the documentation. In our case, the URL will lead to the Teams app: https://teams.microsoft.com/l/entity/<appID>/<tabEntityID>?webUrl=<FallbackURL>&context=<Your custom data>
In our case, I've placed an image where I've defined the fallback URL and the custom object I want to send across.
To ensure proper functionality, encode the fallback URL as well as the custom data in the context parameter. The custom data should be placed under the "subEntityId" property of the context object.
Fetching custom data on your Client App
On your client app, in our case, it was built using React framework. Therefore, I had to install "@microsoft/teams-js" library.
The reference of the library is then passed on to one of the child-components in the app.
Inside the child-component, the library is first initialized.
Once initialized, we will then call the getContext() in order to fetch the Teams context.
Once we get the context, we will try to get the custom value which will show up under context.page.subPageId
The "subPageId" object is equivalent to "subEntityId" object mentioned above.
In our case, we will pass a custom object consisting of message and notificationType properties.
Testing and Implementation
Once the endpoint is triggered, the notification will appear. Clicking on it redirects users to the specified Teams app tab. The app then fetches the context, including the custom data, for rendering.
Once the endpoint is triggered, the notification in Teams will show up in few seconds. Once clicked, Teams will redirect user to our custom app.
Here, you can see that my custom message is shown to the respective user through Teams. In this way, we can target specific user with customized notifications and help create a personalized experience for them.
Demonstration
For a visual demonstration, check out the below YouTube video.
Conclusion
By following this approach, developers can successfully pass custom data to their Teams apps through Activity Feed notifications. This technique empowers developers to create personalized user experiences that enhance engagement and streamline communication within the Teams platform.
For any questions or further assistance, feel free to reach out to me on LinkedIn. Your feedback and insights are highly appreciated as we continue to explore the dynamic possibilities of Microsoft Teams.
Page updated
Report abuse