csharp

page_type	description	products	languages	extensions	contentType	createdDate
sample	Microsoft Teams tab sample app for demonstrating tab in stage view	office-teams office office-365	csharp		samples	06-10-2021 01:48:56

Stage View

This App talks about the Teams tab in stage view with CSharp. For reference please check Tabs link unfurling and Stage View

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.

   • Ensure that you've enabled the Teams Channel

3. Modify the manifest.json in the /AppPackage folder and replace the following details

   • <<MANIFEST-ID>> with some unique GUID
   • <<BASE-URL>> with your application's base url, e.g. https://1234.ngrok.io
   • {{BOT-ID}} with the id from step 2.
   • <<VALID DOMAIN>> with your app domain e.g. *.ngrok.io

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 }} and {{ Bot Password }} 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 TabInStageView

  # change into project folder
  cd # TabInStageView

• 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 TabInStageView folder
  • Select TabInStageView.csproj file
  • Press F5 to run the project

Interacting with the bot 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

• Welcome message with feature explanation.

• Opening stage view in tab with Adaptive card action.

• Opening stage view from Adaptive Card Action.

• Opening stage view from Adaptive card via deep link.

• Tab with execute deep link action to open stage view.

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