csharp

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.

Prerequisites

• .NET Core SDK version 3.1

  # determine dotnet version
  dotnet --version

• Publicly addressable https url or tunnel such as ngrok or Tunnel Relay

Setup

1. Run ngrok - point to port 3978

# ngrok http -host-header=rewrite 3978

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

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

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

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

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

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

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

• Bot Framework Documentation
• Bot Basics
• Activity processing
• Azure Bot Service Introduction
• Azure Bot Service Documentation
• .NET Core CLI tools
• Azure CLI
• Azure Portal
• Language Understanding using LUIS
• Channels and Bot Connector Service