Skip to content

Latest commit

 

History

History
131 lines (90 loc) · 4.83 KB

README.md

File metadata and controls

131 lines (90 loc) · 4.83 KB
Raw
page_type description products languages extensions urlFragment
sample
Microsoft Teams tab sample app for demonstrating tab in stage view
office-teams
office
office-365
csharp
contentType createdDate
samples
06/10/2021 01:48:56 AM
officedev-microsoft-teams-samples-tab-stage-view-csharp

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

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

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

Welcome Message

  • Opening stage view in tab with Adaptive card action.

Card Actions

  • Opening stage view from Adaptive Card Action.

Stage View

  • Opening stage view from Adaptive card via deep link.

Stage View Deep Link

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

Tab 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