diff --git a/msteams-platform/tabs/how-to/create-personal-tab.md b/msteams-platform/tabs/how-to/create-personal-tab.md index 60511df88e9..db5b83daeb9 100644 --- a/msteams-platform/tabs/how-to/create-personal-tab.md +++ b/msteams-platform/tabs/how-to/create-personal-tab.md @@ -11,13 +11,13 @@ ms.owner: ryanbliss # Create a tab -Tabs in chats, channels, or meetings behave more like apps, as you can pin only one tab per app to the left pane for easy access. +Tabs in chats, channels, or meetings behave more like apps because developers can pin only one tab per app to the left pane for easy access. > [!IMPORTANT] > -> We've introduced [Microsoft 365 Agents Toolkit](../../toolkit/agents-toolkit-fundamentals.md) (previously known as Teams Toolkit) extension within Visual Studio Code. This version comes to you with many new app development features. We recommend that you use Agents Toolkit v5 for building your Teams app. +> Microsoft has introduced [Microsoft 365 Agents Toolkit](../../toolkit/agents-toolkit-fundamentals.md) (previously known as Teams Toolkit) extension within Visual Studio Code. This version includes many new app development features. It is recommended that developers use Agents Toolkit v5 for building Microsoft Teams apps. -Ensure that you've all the [prerequisites](~/tabs/how-to/tab-requirements.md) to build your tab. +Developers must ensure that all the [prerequisites](~/tabs/how-to/tab-requirements.md) are met before building the tab. [!INCLUDE [sdk-include](~/includes/sdk-include.md)] @@ -59,7 +59,7 @@ Following are the steps to create a tab: yo teams ``` -1. Provide your values to a series of questions prompted by Microsoft Teams app generator to update your `manifest.json` file. +1. Provide values in response to the series of questions prompted by the Microsoft Teams app generator to update your `manifest.json` file. :::image type="content" source="~/assets/images/tab-images/teamsTabScreenshot.PNG" alt-text="Teams generator"::: @@ -68,19 +68,19 @@ Following are the steps to create a tab: * **What is your solution name?** - The solution name is your project name. You can accept the suggested name by selecting **Enter**. + The solution name serves as the project name. Developers can accept the suggested name by pressing **Enter**. * **Where do you want to place the files?** - You're in your project directory. Select **Enter**. + Since developers are already in the project directory, press **Enter**. * **Title of your Microsoft Teams app project?** - The title is your app package name and is used in the app manifest and description. Enter a title or select **Enter** to accept the default name. + The title serves as the app package name and appears in the app manifest and description. Enter a title or press **Enter** to accept the default. * **Your (company) name? (max 32 characters)** - Your company name is used in the app manifest. Enter a company name or select **Enter** to accept the default name. + This value is used in the app manifest. Enter a company name or press **Enter** to accept the default. * **Which manifest version would you like to use?** @@ -88,11 +88,11 @@ Following are the steps to create a tab: * **Quick scaffolding? (Y/n)** - The default is yes; enter **n** to enter your Microsoft Partner ID. + The default is yes; enter **n** if developers want to provide a Microsoft Partner ID. * **Enter your Microsoft Partner Id, if you've one? (Leave blank to skip)** - This field isn't required and must be used only if you're already part of the [Microsoft Cloud Partner Program](https://partner.microsoft.com), formerly known as Microsoft Partner Network. + This field is optional and is used only for developers who are part of the [Microsoft Cloud Partner Program](https://partner.microsoft.com), formerly known as Microsoft Partner Network. * **What do you want to add to your project?** @@ -100,31 +100,31 @@ Following are the steps to create a tab: * **The URL where you will host this solution?** - By default, the generator suggests an Azure website URL. You're only testing your app locally, so a valid URL isn't necessary. + By default, the generator suggests an Azure website URL. Developers testing locally do not need a valid URL. * **Would you like show a loading indicator when your app/tab loads?** - Choose **not** to include a loading indicator when your app or tab loads. The default is no, enter **n**. + Developers can choose not to include a loading indicator. The default is no; enter **n**. * **Would you like personal apps to be rendered without a tab header-bar?** - Choose **not** to include personal apps to be rendered without a tab header-bar. Default is no, enter **n**. + Developers can choose not to render personal apps without a tab header-bar. The default is no; enter **n**. * **Would you like to include Test framework and initial tests? (y/N)** - Choose **not** to include a test framework for this project. The default is no, enter **n**. + Developers can choose not to include a test framework. The default is no; enter **n**. * **Would you like to include ESLint support? (y/N)** - Choose not to include ESLint support. The default is no, enter **n**. + Developers can choose not to include ESLint support. The default is no; enter **n**. * **Would you like to use Azure Applications Insights for telemetry? (y/N)** - Choose **not** to include [Azure Application Insights](/azure/azure-monitor/app/app-insights-overview). The default is no; enter **n**. + Developers can choose not to include [Azure Application Insights](/azure/azure-monitor/app/app-insights-overview). The default is no; enter **n**. * **Default Tab Name (max 16 characters)?** - Name your tab. This tab name is used throughout your project as a file or URL path component. + Name the tab. This name is used throughout the project as a file or URL path component. * **What kind of Tab would you like to create?** @@ -132,9 +132,9 @@ Following are the steps to create a tab: * **Do you require Microsoft Entra Single-Sign-On support for the tab?** - Choose **not** to include Microsoft Entra Single-Sign-On support for the tab. The default is yes, enter **n**. + Developers choose not to include Microsoft Entra Single-Sign-On support for the tab. The default is yes; enter **n**. > [!NOTE] - > In a tab, the tab home page appears only when the user selects the back button (or moves out of the tab) and comes back to the home page. The tab doesn't maintain or retain the previous state by design. + > In a tab, the tab home page appears only when the user selects the back button (or navigates away and returns). The tab does not maintain or retain previous state by design. --> @@ -144,9 +144,9 @@ Following are the steps to create a tab: ### Add a content page to the tab -Create a content page and update the existing files of the tab application: +Developers create a content page and update the existing tab application files as follows: -1. Create a new **personal.html** file in your Visual Studio Code with the following markup: +1. Create a new **personal.html** file in Visual Studio Code with the following markup: ```html @@ -168,19 +168,19 @@ Create a content page and update the existing files of the tab application: ``` -1. Save **personal.html** in your application's **public** folder in the following location: +1. Save **personal.html** in the application's **public** folder at the following location: ``` ./src/public//personal.html ``` -1. Open `manifest.json` from the following location in your Visual Studio Code: +1. Open `manifest.json` from the following location in Visual Studio Code: ``` ./src/manifest/manifest.json ``` -1. Add the following to the empty `staticTabs` array (`staticTabs":[]`) and add the following JSON object: +1. Add the following JSON object to the empty `staticTabs` array (`"staticTabs":[]`): ```json { @@ -193,40 +193,40 @@ Create a content page and update the existing files of the tab application: ``` > [!IMPORTANT] - > The path component **yourDefaultTabNameTab** is the value that you entered in the generator for **Default Tab Name** plus the word **Tab**. + > The path component **yourDefaultTabNameTab** represents the value entered in the generator for **Default Tab Name** appended with the word **Tab**. > - > For example: DefaultTabName is **MyTab** then **/MyTabTab/** + > For example: If DefaultTabName is **MyTab**, then the path becomes **/MyTabTab/** -1. Update the **contentURL** path component **yourDefaultTabNameTab** with your actual tab name. +1. Update the **contentUrl** path component **yourDefaultTabNameTab** with the actual tab name. 1. Save the updated `manifest.json` file. -1. Open **Tab.ts** in your Visual Studio Code from the following path to provide your content page in an iFrame: +1. Open **Tab.ts** in Visual Studio Code from the following path to supply your content page in an iframe: ```bash ./src/server//.ts ``` -1. Add the following to the list of iFrame decorators: +1. Add the following to the list of iframe decorators: ```typescript @PreventIframe("//personal.html") ``` -1. Save the updated file. Your tab code is complete. +1. Save the updated file. The tab code is now complete. > [!div class="nextstepaction"] > [I ran into an issue](https://github.com/MicrosoftDocs/msteams-docs/issues/new?template=Doc-Feedback.yaml&title=%5BI+ran+into+an+issue%5D+Add+a+content+page+to+the+tab&author=%40laujan&pageUrl=https%3A%2F%2Flearn.microsoft.com%2Fen-us%2Fmicrosoftteams%2Fplatform%2Ftabs%2Fhow-to%2Fcreate-personal-tab%3Fbranch%3Dpr-en-us-12027%26tabs%3Dvs%26pivots%3Dnode-java-script%23add-a-content-page-to-the-tab&contentSourceUrl=https%3A%2F%2Fgithub.com%2FMicrosoftDocs%2Fmsteams-docs%2Fblob%2Fmain%2Fmsteams-platform%2Ftabs%2Fhow-to%2Fcreate-personal-tab.md&platformId=7b2eedc9-c3ef-d30c-e8e1-e6d80e341b11&documentVersionIndependentId=6d43a761-19e0-541e-ba06-170099411ac1&metadata=*+ID%3A+61f5ca59-ab3e-b7ef-d3bc-55a88a362abf+%0A*+Service%3A+**msteams**) ### Create your app package -You must have an app package to build and run your application in Teams. The app package is created through a gulp task that validates the `manifest.json` file and generates the zip folder in the `./package` directory. At the command prompt, use the command `gulp manifest`. +An app package is required to build and run the application in Microsoft Teams. The app package is created by running a gulp task that validates the `manifest.json` file and generates a zip folder in the `./package` directory. At the command prompt, run the command `gulp manifest`. ### Build and run your application #### Build your application -Enter the following command at the command prompt to transpile your solution into the **./dist** folder: +Run the following command at the command prompt to transpile the solution into the **./dist** folder: ```cmd gulp build @@ -234,17 +234,17 @@ gulp build #### Run your application -1. At the command prompt, enter the following command to start a local web server: +1. At the command prompt, run the following command to start a local web server: ```cmd gulp serve ``` -1. Enter `http://localhost:3007//` in your browser to view your application's home page. +1. Enter `http://localhost:3007//` in a browser to view the application’s home page. :::image type="content" source="~/assets/images/tab-images/homePage.png" alt-text="Default Tab"::: -1. Browse `http://localhost:3007//personal.html`, to view your tab. +1. Navigate to `http://localhost:3007//personal.html` to view the tab. :::image type="content" source="~/assets/images/tab-images/personalTab.PNG" alt-text="Default html Tab"::: @@ -253,32 +253,29 @@ gulp build ### Establish a secure tunnel to your tab -At the command prompt exit the localhost and enter the following command to establish a secure tunnel to your tab: +At the command prompt, exit the localhost session and run the following command to establish a secure tunnel to the tab: ```cmd gulp ngrok-serve ``` -After your tab is uploaded to Microsoft Teams through **ngrok** and successfully saved, you can view it in Teams until your tunnel session ends. +Once the tab is uploaded to Microsoft Teams through **ngrok** and is saved successfully, developers can view it in Microsoft Teams until the tunnel session ends. ### Upload your application to Teams -1. Go to Teams and select **Apps** :::image type="content" source="~/assets/images/tab-images/store.png" alt-text="Microsoft Teams Store":::. +1. In Microsoft Teams, select **Apps**  :::image type="content" source="~/assets/images/tab-images/store.png" alt-text="Microsoft Teams Store":::. 1. Select **Manage your apps** > **Upload an app** > **Upload a custom app**. -1. Go to your project directory, browse to the **./package** folder, select the zip folder, and choose **Open**. +1. In the project directory, navigate to the **./package** folder, select the zip folder, and choose **Open**. :::image type="content" source="~/assets/images/tab-images/addingpersonaltab.png" alt-text="Adding your tab"::: -1. Select **Add** in the dialog. Your tab is uploaded to Teams. +1. In the dialog, select **Add**. The tab is uploaded to Microsoft Teams. :::image type="content" source="~/assets/images/tab-images/personaltabuploaded.png" alt-text="Personal tab uploaded"::: -1. In the left pane of Teams, select ellipses ●●● and then choose your uploaded app to view your tab. +1. In the left pane of Microsoft Teams, click the ellipses ●●● and select the uploaded app to view the tab. - Your tab is successfully created and added in Teams. You can also [reorder](#reorder-tabs) your tabs in Teams. - -> [!div class="nextstepaction"] -> [I ran into an issue](https://github.com/MicrosoftDocs/msteams-docs/issues/new?template=Doc-Feedback.yaml&title=%5BI+ran+into+an+issue%5D+Upload+your+application+to+Teams&author=%40laujan&pageUrl=https%3A%2F%2Flearn.microsoft.com%2Fen-us%2Fmicrosoftteams%2Fplatform%2Ftabs%2Fhow-to%2Fcreate-personal-tab%3Ftabs%3Dvs%26amp%3Bpivots%3Dnode-java-script%23upload-your-application-to-teams&contentSourceUrl=https%3A%2F%2Fgithub.com%2FMicrosoftDocs%2Fmsteams-docs%2Fblob%2Fmain%2Fmsteams-platform%2Ftabs%2Fhow-to%2Fcreate-personal-tab.md&platformId=7b2eedc9-c3ef-d30c-e8e1-e6d80e341b11&documentVersionIndependentId=6d43a761-19e0-541e-ba06-170099411ac1&metadata=*+ID%3A+61f5ca59-ab3e-b7ef-d3bc-55a88a362abf+%0A*+Service%3A+**msteams**) + The tab is successfully created and added in Microsoft Teams. Developers can also [reorder tabs](#reorder-tabs) within Microsoft Teams. ::: zone-end @@ -286,15 +283,15 @@ After your tab is uploaded to Microsoft Teams through **ngrok** and successfully ## Create a tab with ASP.NET Core -1. At the command prompt, create a new directory for your tab project. +1. At the command prompt, create a new directory for the tab project. -1. Clone the sample repository into your new directory using the following command or you can download the [source code](https://github.com/OfficeDev/Microsoft-Teams-Samples) and extract the files: +1. Clone the sample repository into this new directory using the following command or download the [source code](https://github.com/OfficeDev/Microsoft-Teams-Samples) and extract the files: ```cmd git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git ``` -Following are the steps to create a tab: +The following steps guide the creation of the tab: 1. [Generate your application with a tab](#generate-your-application-with-a-tab-1) 1. [Update and run your application](#update-and-run-your-application) @@ -306,9 +303,9 @@ Following are the steps to create a tab: 1. Open Visual Studio and select **Open a project or solution**. -1. Go to **Microsoft-Teams-Samples** > **samples** > **tab-personal** > **razor-csharp** folder and open **PersonalTab.sln**. +1. Navigate to **Microsoft-Teams-Samples** > **samples** > **tab-personal** > **razor-csharp** folder and open **PersonalTab.sln**. -1. In Visual Studio, select **F5** or choose **Start Debugging** from your application's **Debug** menu to verify if the application is loaded properly. In a browser, go to the following URLs: +1. In Visual Studio, press **F5** or select **Start Debugging** from the **Debug** menu to verify that the application loads correctly. In a browser, navigate to the following URLs: * `` * `` @@ -320,7 +317,7 @@ Following are the steps to create a tab: #### Startup.cs -This project was created from an ASP.NET Core 3.1 web application empty template with the **Advanced - Configure for HTTPS** check box selected at setup. The MVC services are registered by the dependency injection framework's `ConfigureServices()` method. Additionally, the empty template doesn't enable serving static content by default, so the static files middleware is added to the `Configure()` method using the following code: +This project originates from an ASP.NET Core 3.1 web application empty template with the **Advanced - Configure for HTTPS** option selected during setup. The MVC services register via the dependency injection framework’s `ConfigureServices()` method. Additionally, since the empty template does not enable serving static content by default, the static files middleware is added in the `Configure()` method using the following code: ```csharp public void ConfigureServices(IServiceCollection services) @@ -336,11 +333,11 @@ public void Configure(IApplicationBuilder app) #### wwwroot folder -In ASP.NET Core, the web root folder is where the application looks for static files. +In ASP.NET Core, the web root folder is the location where the application accesses static files. #### Index.cshtml -ASP.NET Core treats files called **Index** as the default or home page for the site. When your browser URL points to the root of the site, **Index.cshtml** is displayed as the home page for your application. +ASP.NET Core uses files named **Index** as the default or home page. When the browser URL points to the root of the site, **Index.cshtml** displays as the home page. #### AppManifest folder @@ -348,13 +345,13 @@ This folder contains the following required app package files: * A full color icon measuring 192 x 192 pixels. * A transparent outline icon measuring 32 x 32 pixels. -* A `manifest.json` file that specifies the attributes of your app. +* A `manifest.json` file that defines the app attributes. -These files must be zipped in an app package for use in uploading your tab to Teams. Teams loads the `contentUrl` specified in your manifest, embeds it in an , and renders it in your tab. +These files must be zipped into an app package for uploading the tab to Microsoft Teams. Microsoft Teams loads the `contentUrl` specified in the manifest, embeds it in an