js

page_type	description	products	languages	extensions	urlFragment
sample	Hello world Messaging Extension that accepts search requests and returns results.	office-teams office office-365	javascript nodejs	contentType createdDate samples 07/07/2021 01:38:27 PM	officedev-microsoft-teams-samples-msgext-search-quickstart-js

Messaging Extension quick start

Bots allow users to interact with your web service through text, interactive cards, and task modules. Messaging extensions allow users to interact with your web service through buttons and forms in the Microsoft Teams client. They can search, or initiate actions, in an external system from the compose message area, the command box, or directly from a message.

Interaction with app

Prerequisites

Dependencies

• NodeJS
• ngrok or equivalent tunneling solution
• M365 developer account or access to a Teams account with the appropriate permissions to install an app.

Setup

1. Register a new application in the Azure Active Directory – App Registrations portal.

2. Azure Bot [Azure Bot] (https://learn.microsoft.com/en-us/azure/bot-service/abs-quickstart?view=azure-bot-service-4.0&tabs=userassigned)

• For the Messaging endpoint URL, use the current https URL you were given by running ngrok and append it with the path /api/messages. It should like something work https://{subdomain}.ngrok.io/api/messages.

• Click on the Bots menu item from the toolkit and select the bot you are using for this project. Update the messaging endpoint and press enter to save the value in the Bot Framework.

• Ensure that you've enabled the Teams Channel

3. Setup NGROK

• Run ngrok - point to port 3978

```bash
ngrok http -host-header=rewrite 3978
```

4. Setup for code

• Clone the repository

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

• In a terminal, navigate to samples/msgext-search-quickstart/js

• Update the .env configuration for the bot to use the MicrosoftAppId and MicrosoftAppPassword, BaseUrl with application base url. For e.g., your ngrok url. (Note the MicrosoftAppId is the AppId created in step 1 (Setup for Bot), the MicrosoftAppPassword is referred to as the "client secret" in step 1 (Setup for Bot) and you can always create a new client secret anytime.)

• Run your app

  npm start

5. Setup Manifest for Teams

• This step is specific to Teams.

  • Edit the manifest.json contained in the ./AppPackage folder to replace your Microsoft App Id (that was created when you registered your app registration earlier) everywhere you see the place holder string {{Microsoft-App-Id}} (depending on the scenario the Microsoft App Id may occur multiple times in the manifest.json)
  • Edit the manifest.json for validDomains and replace {{domain-name}} with base Url of your domain. E.g. if you are using ngrok it would be https://1234.ngrok.io then your domain-name will be 1234.ngrok.io.
  • Zip up the contents of the AppPackage folder to create a manifest.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 the Apps view click "Upload a custom app")

  • Go to Microsoft Teams. From the lower left corner, select Apps
  • From the lower left corner, choose Upload a custom App
  • Go to your project directory, the ./AppPackage folder, select the zip folder, and choose Open.
  • Select Add in the pop-up dialog box. Your app is uploaded to Teams.

Running the sample

Deploy to Teams

Start debugging the project by hitting the F5 key or click the debug icon in Visual Studio Code and click the Start Debugging green arrow button.