Updates from: 01/09/2021 04:07:54
Service Microsoft Docs article Related commit history on GitHub Change details
platform https://docs.microsoft.com/en-us/microsoftteams/platform/build-your-first-app/build-and-run https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/build-your-first-app/build-and-run.md
@@ -21,10 +21,6 @@ Use the Microsoft Teams Toolkit in Visual Studio Code to set up your first app p
1. Enter a name for your Teams app. (This is the default name for your app and also the name of the app project directory on your local machine.) 1. Check only the **Personal tab** option and select **Finish** at the bottom of the screen to configure your project.
-> [!NOTE]
-
-> To install your app package after creating a new project in the toolkit, press F5/run. It will launch Chrome and install your package. The package is stored in App Studio and installed using the `appId`.
- ## 2. Understand important app project components Once the toolkit configures your project, you have the components to build a basic personal tab for Teams. The project directories and files display in the Explorer area of Visual Studio Code.
@@ -35,7 +31,7 @@ Once the toolkit configures your project, you have the components to build a bas
The toolkit automatically creates scaffolding for you in the `src` directory based on the capabilities you added during setup.
-If you create a tab during setup, for example, the `App.js` file in the `src/components` directory is important because it handles the initialization and routing of your app. It calls the [Microsoft Teams SDK](../tabs/how-to/using-teams-client-sdk.md) to establish communication between your app and Teams.
+If you create a tab during setup, for example, the `App.js` file in the `src/components` directory is important because it handles the initialization and routing of your app. It calls the [Microsoft Teams JavaScript client SDK](../tabs/how-to/using-teams-client-sdk.md) to establish communication between your app and Teams.
### App ID
platform https://docs.microsoft.com/en-us/microsoftteams/platform/build-your-first-app/build-channel-tab https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/build-your-first-app/build-channel-tab.md
@@ -21,7 +21,7 @@ You can make this information easier to find by building a channel tab, which wi
> [!div class="checklist"] > > * Create an app project using the Microsoft Teams Toolkit for Visual Studio Code
-> * Identify some of the app configurations and scaffolding relevant to channel and group tabs
+> * Identify some of the app configurations and scaffolding relevant to channel tabs
> * Create tab content > * Create content for a tab's configuration page > * Provide a suggested tab name
@@ -43,25 +43,20 @@ The Microsoft Teams Toolkit helps configure your app and set up scaffolding rele
1. When prompted, sign in with your Microsoft 365 development account. 1. On the **Add capabilities** screen, select **Tab** then **Next**. 1. Enter a name for your Teams app. (This is the default name for your app and also the name of the app project directory on your local machine.)
-1. Check the **Personal tab** and **Group or Teams channel tab** options. (You'll soon learn why you need both types of tabs.)
+Select **Group or Teams channel tab**.
1. Select **Finish** at the bottom of the screen to configure your project. ## 2. Identify relevant app project components
-Much of the app configurations and scaffolding are set up automatically when you create your project with the Teams Toolkit. Let's look at the main components for building a channel and group tab.
+Much of the app configurations and scaffolding are set up automatically when you create your project with the toolkit. Let's look at the main components for building a channel tab.
### App configurations
-You can view and update your app configurations using App Studio, which is included in the toolkit.
-
-During setup, the toolkit initially configured two essential components of channel and group tabs:
-
-* **Configuration page**: The modal for adding a tab to a channel or chat. (In App Studio, you can find this page by going to **Tabs > Team tab**.)
-* **Content page**: Where you display your primary content. (In App Studio, you can find this page by going to **Tabs > Add a personal tab**.)
+In the toolkit, go to **App Studio** to view and update your app configurations.
### App scaffolding
-The app scaffolding provides the components for rendering your personal tab in Teams. There's a lot you can work with, but for now you only need to focus on the following:
+The app scaffolding provides the components for rendering your channel tab in Teams. There's a lot you can work with, but for now you only need to focus on the following:
* Two files located in the `src/components` directory of your project: * `Tab.js` for rendering your tab's content page.
@@ -133,11 +128,13 @@ return (
## 5. Provide a suggested tab name
-When you add a channel or group tab, by default the app name displays (for example, **first-app**).
+When you add a channel tab, by default the app name displays (for example, **first-app**).
This may be fine depending on what you call your app, but you may want to provide a name that makes more sense in the context of group collaboration (for example, **Team Contacts**).
-In `TabConfig.js`, go to `microsoftTeams.settings.setSettings`. Add the `suggestedDisplayName` property with the tab name you want to display by default (as shown). Use the provided name or create your own. (By default, users to change the name if they want.)
+1. In `TabConfig.js`, go to `microsoftTeams.settings.setSettings`.
+2. Add the `suggestedDisplayName` property with the tab name you want to display by default.
+3. Use the name provided in the following example or type your name. (By default, users can change the name.)
```JavaScript microsoftTeams.settings.setSettings({
@@ -178,8 +175,8 @@ Congratulations! You have a Teams app with a tab for displaying useful content i
## Learn more * [Authenticate tab users with SSO](../tabs/how-to/authentication/auth-aad-sso.md): If you only want authorized users viewing your tab, set up single sign-on (SSO) through Azure Active Directory (AD).
-* [Embed content from an existing web app or webpage](../tabs/how-to/add-tab.md#tab-requirements): We showed you how to create new content for a personal tab, but you can also load content from an external URL.
-* [Create a seamless experience for your tab](../tabs/design/tabs.md): See the recommended guidelines for designing Teams tabs.
+* [Embed content from an existing web app or webpage](../tabs/how-to/add-tab.md#tab-requirements): We showed you how to create new content for a tab, but you can also load content from an external URL.
+* [Create a seamless tab experience](../tabs/design/tabs.md): See the recommended guidelines for designing Teams tabs.
* [Build tabs for mobile](../tabs/design/tabs-mobile.md): Understand how to develop tabs for phones and tablets. * [Utilize Teams data with the Microsoft Graph API](https://docs.microsoft.com/graph/teams-concept-overview) * [Create a tab without the toolkit](../tabs/how-to/add-tab.md)
platform https://docs.microsoft.com/en-us/microsoftteams/platform/build-your-first-app/build-first-app-overview https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/build-your-first-app/build-first-app-overview.md
@@ -19,7 +19,7 @@ Here's an idea of what you'll know after going through the lessons.
> * **Get up and running quickly with the Teams Toolkit**: The Microsoft Teams Toolkit for Visual Studio Code takes care of creating your app project and scaffolding so you can have a running app in minutes. > * **Configure your app with App Studio**: Specify the capabilities and services your Teams app uses. > * **Scope your app's audience**: Build a Teams app for personal use, collaboration, or both.
- > * **Get experience with Teams tools and SDKs**: Customize your app (for example, change its color scheme to match the Teams theme) with help from the Teams JavaScript SDK. Also, learn about common tools for creating and managing bots.
+> * **Get experience with Teams tools and SDKs**: Customize your app with help from the Teams JavaScript client SDK. For example, change your app's color scheme to match the Teams theme. Also, learn about common tools for creating and managing bots.
> * **Expand on your app**: Throughout the lessons, you'll find related topics you're probably interested in (such as authentication and design guidelines). ## Teams app fundamentals
@@ -70,7 +70,7 @@ You can get a free Teams test account that allows app sideloading by joining the
</details> > [!Note]
-> If you still can't sideload apps, refer to [Enable custom Teams apps and turn on custom app uploading](https://docs.microsoft.com/microsoftteams/platform/concepts/build-and-test/prepare-your-o365-tenant#enable-custom-teams-apps-and-turn-on-custom-app-uploading).
+> If you still can't sideload apps, see [enable custom Teams apps and turn on custom app uploading](https://docs.microsoft.com/microsoftteams/platform/concepts/build-and-test/prepare-your-o365-tenant#enable-custom-teams-apps-and-turn-on-custom-app-uploading).
### Install your development tools
platform https://docs.microsoft.com/en-us/microsoftteams/platform/build-your-first-app/build-personal-tab https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/build-your-first-app/build-personal-tab.md
@@ -34,9 +34,7 @@ Much of the app configurations and scaffolding are set up automatically when you
### App configurations
-You can view and update your app configurations using App Studio, which is included in the toolkit.
-
-During setup, the toolkit initially configured your tab content page, which is where you display your primary content. In the toolkit, go to **App Studio** and select **Tabs** to see the configuration.
+In the toolkit, go to **App Studio** to view and update your app configurations.
### App scaffolding
@@ -135,13 +133,16 @@ Your theme change handler is in place, but you need some code that responds to t
> [!NOTE] > The following example is just one way you might apply styles to your tab. Use the code as is, expand on it, or write your own.
-Store the state provided by the theme change handler in `isTheme`.
+In the `render()` function, store the state provided by the theme change handler in `isTheme`.
```JavaScript const isTheme = this.state.theme ```
-Provide some conditional logic to render your tab's styles based on the current theme. The following example shows a basic way to do this by 1) checking the current theme in `isTheme`, 2) creating a `newTheme` object with CSS properties relevant to the current theme, and 3) applying the CSS to your tab content's root HTML element (`<div>`).
+After storing the state provided by the theme change handler, provide some conditional logic to render your tab's styles based on the current theme. The following example shows a basic way to do this:
+1. Check the current theme in `isTheme`.
+2. Create a `newTheme` object with CSS properties relevant to the current theme.
+3. Apply the CSS to your tab content's root HTML element (`<div>`).
```JavaScript let newTheme