Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion msteams-platform/TOC.yml
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
items:
- name: Static tabs
href: ./concepts/tabs/tabs-static
- name: Dynamic tabs
- name: Configurable tabs
href: ./concepts/tabs/tabs-dynamic
- name: Configuration pages
href: ./concepts/tabs/tabs-configuration
Expand Down
28 changes: 10 additions & 18 deletions msteams-platform/concepts/tabs/tabs-overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,33 +3,25 @@ title: Get started with tabs
description: Describes how to get started with tabs in Microsoft Teams
keywords: get started tabs teams
---
# Get started with tabs for Microsoft Teams

Tabs in Microsoft Teams allow you to display rich interactive web content. You can build a Microsoft Teams tab from scratch or by adapting your existing web app experience.

Microsoft Teams supports tabs in two different [scopes](~/concepts/apps/apps-overview):

* Team scope: Tabs in channels allow teams to interact with your shared experience. Currently, all tabs in channels are "configurable tabs" where a user configures the content of your tab experience when the tab is first added to a channel.
* Personal scope: Personal tabs allow users to interact with your experience privately, via the app bar. Currently, all personal tabs are "static tabs" that are always present and cannot be added or removed.

<!-- TODO screenshot of team and personal task lists from sample app -->
# Get started with tabs for Microsoft Teams

## Overview of building a Microsoft Teams tab
Tabs in Microsoft Teams allow you to display rich interactive web content. You can build a Microsoft Teams tab from scratch or adapt your existing web-app experience.

Follow these steps to build a tab:
Microsoft Teams supports tabs in two scopes:

* [Design a great tab](~/get-started/design#designing-a-great-tab): Although it's easy to adapt a web app to become a Microsoft Teams tab, it's worth considering which of your experiences and functionality will work most effectively.
* [Create the package](~/publishing/apps-package): This package contains the manifest, which specifies attributes of your tab, as well as other app components you may provide as part of your Teams app experience.
* **Team scope**&emsp;Tabs in channels allow teams to interact with your shared experience. Currently, all tabs in channels are *configurable tabs*&mdash;a user configures the content of your tab experience when the tab is first added to a channel.
* **Personal scope**&emsp;Personal tabs allow users to interact with your experience privately. Currently, all personal tabs are *static tabs*&mdash;content that is relevant to individual users.

### For configurable tabs
## Build a configurable tab

* [Create the configuration page](~/concepts/tabs/tabs-configuration): For configurable tabs, you must provide a configuration page to present options and gather information so users can customize the content and experience with your tab. This iframed HTML page will be displayed when a user first pins the tab to a channel via the **Add a Tab** dialog.
* [Create the configuration page](~/concepts/tabs/tabs-configuration): For configurable tabs, you must provide a configuration page to present options and gather information so users can customize the content and experience with your tab. This iframe'd HTML page is displayed when a user first adds the tab to a channel.
* You can also [enable users to update a tab](~/concepts/tabs/tabs-update-remove#updating-an-existing-tab-instance) after they add it.
* [Create the content page](~/concepts/tabs/tabs-dynamic): Microsoft Teams displays this content page when the user visits your tab. This is also an HTML page which you host and Microsoft Teams displays within an iframe.
* [Create the content page](~/concepts/tabs/tabs-dynamic): A content page is an HTML page that you host. Microsoft Teams displays the page in an iframe when the user visits your tab.
* You can also provide a page for users to specify [what happens to content when they remove a tab](~/concepts/tabs/tabs-update-remove#removing-a-tab).
* You can enable users to create and share [deep links to items within your tab](~/concepts/deep-links), such as a link to an individual task within a tab that contains a task list.

### For static tabs
## Build a static tab

* [Declare your static tab identity](~/concepts/tabs/tabs-static): Static tabs are declared directly in your app package's manifest.
* [Create the content page](~/concepts/tabs/tabs-dynamic): Microsoft Teams displays this content page when the user visits your tab. Content in a Static tab is subject to the same constraints as a configurable tab.
* [Create the content page](~/concepts/tabs/tabs-dynamic): Microsoft Teams displays the page in an iframe when the user visits your tab. Content in a static tab is subject to the same constraints as a configurable tab.