Send activity feed notification
The Microsoft Teams activity feed helps users to assess items that require attention by notifying changes. You can apply by using the activity feed notification APIs in Microsoft Graph to extend the functionality to your app.
Key features of activity feed broadcast
- Provides enhanced experience.
- Keeps users up to date.
- Broadcasts message for all the members.
- Displays activity feed notification.
- Broadcasts details available for members.
This step-by-step guide helps you to broadcast messages and notify all the members of an organization using activity feed notification. You'll see the following output:
Prerequisites
Ensure you install the following tools and set up your development environment:
Install | For using... | |
---|---|---|
Visual Studio 2022 version 17.3 | You can install the enterprise version in Visual Studio 2022, and install the ASP.NET and web development workloads. Use the latest version. | |
.NET Core SDK version 3.1 | Customized bindings for local debugging and Azure Functions app deployments. If you haven't installed the .NET 3.1 (or later) SDK globally, the portable version to be installed. | |
ngrok | Teams app features (conversational bots, message extensions, and incoming webhooks) require inbound connections. A tunnel connects your development system to Teams. It isn't required for apps that only include tabs. This package is installed within the project directory (using npm devDependencies ). |
Note
After downloading ngrok, sign up and install authtoken.
Ensure you have the following accounts and set up your development environment:
- Microsoft account.
- The Teams app must be installed for the recipient, either personally, or in a team or chat.
- The Tenant ID for sending and receiving notifications must match.
Set up your Teams development tenant
A tenant is like a space or a container where you chat, share files, and run meetings for your organization in Teams. You can also upload and test the custom app.
Check for custom app upload option
After creating the app, you must load your app in Teams without distributing it. The function is known as custom app upload. Sign in to your Microsoft 365 account to view this option.
Note
Custom app upload is necessary for previewing and testing apps in Teams local environment. Enable custom app upload to preview and test your app in Teams locally.
Do you already have a tenant, and do you have the admin access? Let's check if you really do!
To verify custom upload apps in Teams:
1. In the Teams client, select the **Apps** icon.
1. Select **Manage your apps**.
1. Select **Upload an app**.
1. Look for the option to **Upload a custom app**.
:::image type="content" source="~/assets/images/teams-toolkit-v2/prerequisites/upload-app.png" alt-text="Screenshot shows the custom upload app in Teams.":::
> [!NOTE]
> Contact Teams administrator, if you can't upload a custom app.
Create a free Teams developer tenant (optional)
If you don't have a Teams developer account, you can get it free. Join the Microsoft 365 developer program!
Go to the Microsoft 365 developer program.
Select Join Now and follow the onscreen instructions.
Select Set-up E5 subscription from the welcome screen.
Set up administrator account. After you finish, the following screen displays.
Sign in to Teams using the new administrator account. Now you can select Upload a custom app.
Set up local environment
Open Microsoft Teams Samples.
Select Code.
From the dropdown menu, select Open with GitHub Desktop.
Select Clone.
Register your Teams Auth SSO with Microsoft Entra ID
The following steps help you to create and register Teams authentication SSO in Azure portal:
- Create and register a new application under App registrations
- Use ngrok to create a tunnel to your web server's endpoints
To create and register new application
Go to the Azure portal. The system prompts you to sign in with your Microsoft account credentials.
Select Microsoft Entra ID.
In the left navigation pane, select App registrations.
Select New registration.
Register an application page appears.
Enter the following details to register an application.
- Set Name to your app name
- Set Supported account types to any account type
- Leave the Redirect URI empty
Select Register.
App Overview page appears.
Important
Save the Application (client) ID and Directory (tenant) ID for future reference.
To create tunnel for local web server
Use ngrok or Command Prompt to create a tunnel to your locally running web server's publicly available HTTPS endpoints. Run the following command in ngrok:
ngrok http --host-header=localhost 3978
Tip
If you encounter ERR_NGROK_4018, follow the steps provided in the Command Prompt to sign up and authenticate ngrok. Then run the ngrok http --host-header=localhost 3978
command.
Update the Microsoft Entra app registration
In the left navigation pane, select Expose an API.
Select Add.
Set the Application ID URI in the form of
api://{AppID}
.Insert the
WebAppDomain
value betweenapi://
and/{AppID}
.api:// your ngrok/{AppID}
The following image shows the domain name:
Note
If you're using a tunneling service such as ngrok, ensure you update the value whenever your ngrok subdomain changes.
For example: api://f631****.ngrok.io/c4e88a5d-e3d4-47f4-accb-0ef9de3bce8a
, wheref631****.ngrok.io
is the new ngrok subdomain name.Select Add a scope.
Add a scope page appears.
Enter the details for configuring scope.
- Enter access_as_user as the Scope name.
Note
The Scope name should match with the Application ID URI with
/access_as_user
appended at the end.api://bff2****.ngrok.io/00000000-0000-0000-0000-000000000000/access_as_user
.Set Who can consent to Admins and users.
To configure the admin and user consent prompts with appropriate values for access_as_user scope, provide the following information in the fields:
Enter Teams can access the user’s profile as Admin consent display name
Enter Allows Teams to call the app’s web APIs as the current user as Admin consent description
Enter Teams can access the user profile and make requests on the user’s behalf as User consent display name
Enter Enable Teams to call this app’s APIs with the same rights as the user as User consent description
Ensure that State is set to Enabled.
Select Add scope to save.
Your application ID URI is created with scope name.
In the Authorized client applications section, identify the applications that you want to authorize for your app’s web application.
Select Add a client application.
Add a client application pane appears.
Enter the Client ID for desktop and web application separately that you want to authorize. It's the application ID of client application that you want to authorize.
Client ID For authorizing 1fec8e78-bce4-4aaf-ab1b-5451cc387264
Teams desktop or mobile application 5e3ce6c0-2b1f-4285-8d4b-75ee78787346
Teams web application Select Authorized scopes to determine, which type of token return the service.
The following image displays the Client ID:
In the left pane, select API Permissions.
Note
Users need to consent to these permissions only if the Microsoft Entra app is registered in a different tenant.
Select Add a permission.
Request API permission page appears.
Select Microsoft Graph.
Select Delegated permissions.
Add the following permissions:
- Directory.Read.All
- Directory.ReadWrite.All
- TeamsActivity.Send
- TeamsAppInstallation.ReadForUser
- TeamsAppInstallation.ReadWriteForUser
- User.Read
Note
User. Read is enabled by default.
Select Add permissions.
Select Add a permission.
Select Microsoft Graph.
Select Application permissions.
Add the following permissions:
- Directory.Read.All
- TeamsActivity.Send
- TeamsAppInstallation.ReadForUser.All
Select Add permissions.
Ensure to grant the admin consent for the required permissions.
From the left pane, select Authentication to set a redirect URI.
Note
If an app isn't granted IT admin consent, users must provide consent the first time they use an app.
Select Add a platform.
For this tutorial, select Web.
Enter the redirect URI for your app by appending
Auth/end
to fully qualified domain name:https://ngrok.io/Auth/end
.Enable Implicit grant and hybrid flows by selecting the following checkboxes:
- ID tokens
- Access tokens
Select Configure.
Select Add URI and enter
https://ngrok.io/Auth/Start
.Select Save.
To create client secret
In the left pane, select Certificates & secrets.
In the Client secrets section, select New client secret.
The Add a client secret window appears.
Enter a value in Description.
Select Add.
In the Value column, select Copy to clipboard.
Important
Save the Client secrets value or app password for future reference.
Set up app settings and manifest files
Go to appsettings.json file in cloned repository.
Open appsettings.json file in the latest version of Visual Studio and update the following information:
- Set
"MicrosoftAppId"
to your bot's Microsoft App ID. - Set
"TenantID"
to Directory (tenant) ID. - Set
"MicrosoftAppPassword"
to your bot's client secret ID value. - Set
"BaseUrl"
to the[WebAppDomainName]
.
- Set
Go to manifest.json file in cloned repository.
Open manifest.json file in the latest version of Visual Studio and make the following changes:
- Replace all occurrences of
<<Microsoft-App-ID>>
with your bot's Microsoft App ID. - Replace all occurrences of
<<Base_URL>>
with your fully qualified domain name. - Set
validDomains
to[WebAppDomainName]
.
- Replace all occurrences of
Build and run the service
Open Visual Studio.
Go to File > Open > Project/Solution....
Select ActivityFeedBroadcast.sln file from csharp folder.
Select Open.
Press F5 to run the project.
Select Yes if the following dialog appears:
A webpage opens with a message, Your bot is ready!
Add activity feed broadcast app to Teams
In your cloned repository, go to graph-activity-feed-broadcast > csharp > ActivityFeedBroadcast > AppPackage.
Create a .zip file with the following files that are present in the AppPackage folder:
- manifest.json
- outline.png
- color.png
Go to Microsoft Teams.
Select Apps > Manage your apps.
Select Submit an app to your org.
Select Open to upload the .zip file that you created in the AppPackage folder.
Select Add.
The app is visible in the meeting SidePanel.
Interact with the app in Teams
Let's interact with the app in Teams!
The BroadcastTab displays Message title and Message description.
Enter the message title and description, and then select Send message.
The Message broadcasted successfully appears.
Activity feed notification displays in the Activity tab of the recipient with the same Tenant ID.
The message details appear on selecting the message.
Complete challenge
Did you come up with something like this?
Congratulations!
You've completed the tutorial to get started with the activity feed broadcast app!
Have an issue with this section? If so, please give us some feedback so we can improve this section.
Platform Docs
Feedback
https://aka.ms/ContentUserFeedback.
Coming soon: Throughout 2024 we will be phasing out GitHub Issues as the feedback mechanism for content and replacing it with a new feedback system. For more information see:Submit and view feedback for