Skip to content

Latest commit

 

History

History
123 lines (84 loc) · 4.75 KB

README.md

File metadata and controls

123 lines (84 loc) · 4.75 KB
Raw
page_type description products languages extensions contentType createdDate
sample
Microsoft Teams tab sample code which demonstrates how to build tabs with Adaptive Cards.
office-teams
office
office-365
csharp
samples
06-10-2021 01:48:56

Tabs with Adaptive Cards

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

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

Adaptive Card

Prerequisites

Setup

  1. Run ngrok - point to port 3978
# ngrok http -host-header=rewrite 3978

  1. Create a Bot Registration In Azure portal, create a Bot Framework registration resource.

  2. Modify the manifest.json in the /AppPackage folder and replace the {{BOT-ID}} with the id from step 2.

  3. Zip the contents of AppPackage folder into a manifest.zip, and use the manifest.zip to deploy in app store or add to Teams as in step 7.

  4. Modify the /appsettings.json and fill in the {{ Bot Id }},{{ Bot Password }} and {{ Connection Name }} with the id from step 2.

  5. Add {{ Application Base Url }}in appsetting.json with ngrok tunnel url or deployed application base url.

  6. 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.

To try this sample

  • In a terminal, navigate to TabWithAdpativeCardFlow

    # change into project folder
cd # TabWithAdpativeCardFlow

  • Run the bot from a terminal or from Visual Studio, choose option A or B.

    A) From a terminal

    # run the bot
dotnet run

    B) Or from Visual Studio

    • Launch Visual Studio
    • File -> Open -> Project/Solution
    • Navigate to TabWithAdpativeCardFlow folder
    • Select TabWithAdpativeCardFlow.csproj file
    • Press F5 to run the project

Interacting with the tab in Teams

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.

Features of this sample

  • Tab showing Adaptive card with action controls.

Adaptive Card

Adaptive Card

Adaptive Card

Adaptive Card

Adaptive Card

Adaptive 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