Skip to content

Latest commit

 

History

History
 
 
page_type description products languages extensions urlFragment
sample
Sample app showing custom personal Tab with ASP. NET Core
office-teams
office
office-365
csharp
contentType createdDate
samples
07/07/2021 01:38:27 PM
officedev-microsoft-teams-samples-tab-personal-mvc-csharp

Personal Tab with ASP. NET Core MVC

In this quickstart we'll walk-through creating a custom personal tab with C# and ASP. Net Core MVC. We'll also use App Studio for Microsoft Teams to finalize your app manifest and deploy your tab to Teams.

Interaction with app

personaltab

Prerequisites

  • .NET Core SDK version 6.0

    determine dotnet version

    dotnet --version
  • Ngrok (For local environment testing) Latest (any other tunneling software can also be used)

  • Teams Microsoft Teams is installed and you have an account

Setup

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

  2. Clone the repository

    git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
  3. If you are using Visual Studio

  • Launch Visual Studio
  • File -> Open -> Project/Solution
  • Navigate to samples\tab-personal\mvc-csharp folder
  • Select PersonalTabMVC.sln file and open the solution
  1. Modify the manifest.json in the /AppManifest folder and replace the following details:

    • <> with any random GUID.
    • <<Base-url>> 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.
    • validDomains 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.
  2. 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 ./AppManifest folder, select the zip folder, and choose Open.

Running the sample

personaltab

Greytab

tab

Fruther Reading

Tab-personal Create a Custom Personal Tab with ASP. NET Core MVC