At current stage, Teams App has a wealth of features and many applications. At present, however, only the web documents provide information on these features. This way has a weak direct-viewing display effect. Therefore, this Teams App to show Teams Extension (Teams Toolkit) features. The goal is to allow all the developers, especially rookies, of Teams App to easily access it and get a better development experience.
What is Teams app capabilities
- Simple, intuitive interface for all developers for developers with limited acknowledge and experience on Teams App to be as simple and intuitive as possible.
- Efficient – since reading documents and finding APIs on webs is time consuming, this App had to be efficient with examples such as getting the user information, uploading/downloading files and showing UI components.
- Cross platform[optional] – the App be available across 2 platforms: Teams Client and Mobile Teams App. The app will be designed adaptively to achieve the same experience both on computers and mobile phones.
This part shows Teams Extension (Teams Toolkit) features, there are GIF pictures to display almost all the features giving tips:
- GETTING STARTED: information about how to create an App by using a sample
- PROJECT: includes Create New Project, Add Capabilities, Deploy to the Cloud and so on. You can create your own App and publish it on the Azure or Teams just in Visual Studio Code.
This part shows how to use Teams App ability step by step and Microsoft Graph API in Teams, there are GIF pictures to display some features and giving tips on @microsoft/teams-js and @microsoft/teamsfx SDK:
- Tab: includes Deeplink/Mobile tab[optional]/Static Tab - README
- Bot: includes Adaptive Card - README
- Messaging Extension: includes Action Commands/Search Commands/Link Unfurling
@fluentui/react-northstar - A themable React component library.
The UI components are derived from @fluentui/react-northstar and are divided into 3 parts:
- Overall: includes theming and layout aspects components
- Component: logically divided into multiple parts instead of sorting in alphabetical order
- Prototypes: includes complex or combined components
- Node.js (use the latest v14 LTS release)
- An M365 account. If you do not have M365 account, apply one from M365 developer program
- A browser with developer tools, such as, Microsoft Edge (recommended) or Google Chrome
- Install Visual Studio Code, version 1.55 or later.
- Teams Toolkit Visual Studio Code Extension or TeamsFx CLI
- Sign in to Microsoft 365 admin center
- select Show all > Teams
- Navigate to Teams apps > Setup Policies > Global.
- Toggle Upload custom apps to the On position.
- Select Save. Your test tenant can permit custom app sideloading.
To use the app in Teams, download the release zip file first.
- Upload this app to your Teams
- 1.1 Press
...and choose More app Or Press App icon in the left bottom - 1.2 Press Upload a custom app
- Upload
appPackage.zip - Sideload App by directly press Add (recommended) or add this app to your channel
- Enjoy exploring the App!
- 4.1 Sideload:
- 4.2 channel:
- Debug: Open Debug View (
Ctrl+Shift+D), select Debug Remote (Edge), then Clickstart Debuggingor PressF5 - Run: Open Debug View (
Ctrl+Shift+D), select Launch Remote (Edge), then Clickstart Debuggingor PressF5
Attention: The M365 Account of Collaborators shoule be the same tenant with the owner of the App.
- Sign in to Microsoft 365 admin center
- select Users > Active users, add user to your tenant
- Sign in to Azure Portal
- Search for Users, add New user or Invite user
- Choose to Create user or Invite user
- Accept the invitation in your mailbox
- Select Azure Active Directory > App registrations > Your App > Owners, then add owner
- Sign in to Developer Portal
- Choose app, and add owners of your app
