nodejs

page_type	description	products	languages	extensions	urlFragment
ssample	This sample demos teams tab to type in Incoming Webhook URL and message card payload, which send the card in the team and also demonstrates the HttpPOST action in the card.	office-teams office office-365	nodejs javascript	contentType createdDate samples 07/01/2022 02:36:57 PM	officedev-microsoft-teams-samples-incoming-webhook-nodejs

Incoming webhook

This sample demos UI to type in Incoming Webhook URL and message card payload, which send the card in the team also demonstrates the HttpPOST action in the card.

Included Features

• Tabs
• Incoming Webhooks

Interaction with tab

Prerequisites

• NodeJS
• dev tunnel or ngrok latest version or equivalent tunnelling solution
• Teams Microsoft Teams is installed and you have an account

Setup

1. Setup for incoming webhook

1. Create a incoming webhook. Create incoming webhooks. Keep this webhook URL handy while running the sample.

2. Setup NGROK

1. Run ngrok - point to port 3978

   ngrok http 3978 --host-header="localhost:3978"

   Alternatively, you can also use the dev tunnels. Please follow Create and host a dev tunnel and host the tunnel with anonymous user access command as shown below:

   devtunnel host -p 3978 --allow-anonymous

3. Setup for code

1. Clone the repository

   git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git

2. Install node modules

   Inside node js folder, navigate to samples/incoming-webhoook/nodejs/api open your local terminal and run the below command to install node modules. You can do the same in Visual Studio code terminal by opening the project in Visual Studio code.

   • Repeat the same step in folder samples/incoming-webhoook/nodejs/ClientApp

   npm install

   If you face any dependency error while installing node modules, try using below command

   npm install --legacy-peer-deps

3. We have two different solutions to run so follow below steps:

   A) In a terminal, navigate to samples/incoming-webhoook/nodejs/api

   B) In a different terminal, navigate to samples/incoming-webhoook/nodejs/ClientApp

4. Run both solutions i.e. samples/incoming-webhoook/nodejs/api and samples/incoming-webhoook/nodejs/ClientApp

   npm start
   

4. Setup Manifest for Teams

1. This step is specific to Teams.
   • Edit the manifest.json contained in the appManifest folder to replace {{Manifest-id}} with any GUID ID.
   • Edit the manifest.json for contentUrl, websiteUrl inside staticTabs section. Replace <<Domain-name>> with app's base Url domain. E.g. if you are using ngrok it would be https://1234.ngrok-free.app then your domain-name will be 1234.ngrok-free.app and if you are using dev tunnels then your domain will be like: 12345.devtunnels.ms.
   • Edit the manifest.json for validDomains with base Url domain. E.g. if you are using ngrok it would be https://1234.ngrok-free.app then your domain-name will be 1234.ngrok-free.app and if you are using dev tunnels then your domain will be like: 12345.devtunnels.ms.
   • Note: If you want to test your app across multi hub like: Outlook/Office.com, please update the manifest.json in the incoming-webhook\nodejs\appManifest_Hub folder with the required values.
   • Zip up the contents of the appManifest folder to create a Manifest.zip or appManifest_Hub folder to create a appManifest_Hub.zip(Make sure that zip file does not contains any subfolder otherwise you will get error while uploading your .zip package)
   • Upload the manifest.zip to Teams (In Teams Apps/Manage your apps click "Upload an app". Browse to and Open the .zip file. At the next dialog, click the Add button.)
   • Add the app to personal scope.

Running the sample

• Open Incoming webhook tab.

• Click on send button. You will get a card from webhook in the team where incoming webhook is added.

Outlook on the web

• To view your app in Outlook on the web.

• Go to Outlook on the weband sign in using your dev tenant account.

On the side bar, select More Apps. Your sideloaded app title appears among your installed apps

Select your app icon to launch and preview your app running in Outlook on the web

Note: Similarly, you can test your application in the Outlook desktop app as well.

Office on the web

• To preview your app running in Office on the web.

• Log into office.com with test tenant credentials

Select the Apps icon on the side bar. Your sideloaded app title appears among your installed apps

Select your app icon to launch your app in Office on the web

Note: Similarly, you can test your application in the Office 365 desktop app as well.

Further reading

• Build webhooks and connectors
• Extend Teams apps across Microsoft 365