Skip to content

Latest commit

 

History

History
 
 

nodejs

Readme.md

page_type description products languages extensions urlFragment
sample
Microsoft Teams tab sample code which demonstrates how to build tabs with Adaptive Cards.
office-teams
office
office-365
nodejs
contentType createdDate
samples
09/02/2021 19:54:22 PM
officedev-microsoft-teams-samples-tab-adaptive-cards-nodejs

Tabs with Adaptive Cards

This App talks about the Teams tab which displays Adaptive card with Node JS. For reference please check Build tabs with Adaptive Cards

This bot has been created using Bot Framework v4, it shows how to create a simple bot that accepts Adaptive Cards V1.4 to render in Teams tab.

This feature shown in this sample is in Public Developer Preview and is supported in desktop and mobile.

Interaction with Adaptive Cards

Tab Adaptive CardsGif

Prerequisites

  1. Office 365 tenant. You can get a free tenant for development use by signing up for the Office 365 Developer Program.

  2. To test locally, NodeJS must be installed on your development machine (version 16.14.2 or higher).

    # determine node version
node --version

  3. To test locally, you'll need Ngrok installed on your development machine. Make sure you've downloaded and installed Ngrok on your local machine. ngrok will tunnel requests from the Internet to your local computer and terminate the SSL connection from Teams.

Setup

NOTE: The free ngrok plan will generate a new URL every time you run it, which requires you to update your Azure AD registration, the Teams app manifest, and the project configuration. A paid account with a permanent ngrok URL is recommended.

  1. Setup for Bot

    • Register Azure AD application
    • Register a bot with Azure Bot Service, following the instructions here.
    • Ensure that you've enabled the Teams Channel
    • While registering the bot, use https://<your_ngrok_url>/api/messages as the messaging endpoint.

    NOTE: When you create your Azure AD application registration, you will create an App ID and App password - make sure you keep these for later.

    Setup Azure Bot connection

  2. Setup NGROK

  • Run ngrok - point to port 3978

    ngrok http -host-header=localhost 3978
  1. Setup for code

  • Clone the repository

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

  • In a console, navigate to samples/tab-adaptive-cards/nodejs

  • Install modules

    npm install

  • Update the .env configuration for the bot to use the MicrosoftAppId (Microsoft App Id) and MicrosoftAppPassword (App Password) from the AAD app registration in Azure portal or from bot Framework registration.

  • Update the BaseUrl as per your application domain like if you are using ngrok, it would be https://1234.ngrok.io

  • Update the ConnectionName with Azure Bot Registration connection name configured in step 1.

NOTE: the App Password is referred to as the client secret in the azure portal and you can always create a new client secret anytime.

  • Run your bot at the command line:

    npm start

  • Install modules & Run the NodeJS Server

    • Server will run on PORT: 3978
    • Open a terminal and navigate to project root directory
      npm run server

  • This command is equivalent to: npm install > npm start

  1. 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 bot earlier) everywhere you see the place holder string <<YOUR-MICROSOFT-APP-ID>> (depending on the scenario the Microsoft App Id may occur multiple times in the manifest.json)
    • Update the <<DOMAIN-NAME>> with base Url 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
    • 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 tab is uploaded to Teams.

Running the sample

You can use this tab by following the below steps:

  • In the navigation bar located at the far left in Teams, select the ellipses ●●● and choose your app from the list.

Sign in card:

Sign in Card

Home Page:

Home Page

Task module:

Task Module

Task module close:

Task Module Close

Show Task module:

Task Module

YouTube Tab:

Task Module

Sign out card:

Sign out Card

Deploy the bot to Azure

To learn more about deploying a bot to Azure, see Deploy your bot to Azure for a complete list of deployment instructions.

Further reading