[Multi Hub] Tab Mail Sample

.github/workflows/build-complete-samples.yml

@@ -899,6 +899,10 @@ jobs:
               name: 'meetings-app-icon-badging'
               version: '18.x'
 
+            - project_path: 'samples/tab-mail/ts'
+              name: 'tab-mail'
+              version: '18.x'
+
       fail-fast: false
     name: Build all "${{ matrix.name }}" nodejs
     defaults:

README.md

@@ -54,6 +54,7 @@ The [Teams Toolkit](https://marketplace.visualstudio.com/items?itemName=TeamsDev
 |21| Personal Tab with Nav-Bar menu | Add multiple actions to the upper right in Nav-Bar and build an overflow menu for extra actions in an app. ||[View][tab-navbar-menu#ts]|
 |22| App Caching in Meetings | This sample shows how to improve the subsequent loading time of an App. |||[View][app-cache-meetings#nodejs]|
 |23| Personal Tab with Nav-Bar menu | Add multiple actions to the upper right in Nav-Bar and build an overflow menu for extra actions in an app. ||[View][tab-navbar-menu#ts]|
+|24| Compose Mail in Outlook using Personal Tab app | This sample app shows how to compose mail in Outlook using personal tab app. ||[View][tab-mail#ts]|
 
 ## [Bots samples](https://docs.microsoft.com/microsoftteams/platform/bots/what-are-bots) (using the v4 SDK)
 >NOTE:
@@ -238,6 +239,7 @@ The [Teams Toolkit](https://marketplace.visualstudio.com/items?itemName=TeamsDev
 [tab-request-approval#nodejs]:samples/tab-request-approval/nodejs
 [bot-request-approval#nodejs]:samples/bot-request-approval/nodejs
 [tab-navbar-menu#ts]:samples/tab-navbar-menu/ts
+[tab-mail#ts]:samples/tab-mail/ts
 
 [group-channel-tab#cs#razor]:samples/tab-channel-group/razor-csharp
 [group-channel-tab#cs#mvc]:samples/tab-channel-group/mvc-csharp

samples/tab-mail/ts/.env

@@ -0,0 +1 @@
+PORT=3978

samples/tab-mail/ts/Manifest/manifest.json

@@ -0,0 +1,44 @@
+{
+  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.16/MicrosoftTeams.schema.json",
+  "manifestVersion": "1.16",
+  "version": "1.0.0",
+  "id": "{{Manifest-Id}}",
+  "packageName": "com.mail.outlook",
+  "developer": {
+    "name": "Microsoft",
+    "websiteUrl": "https://www.microsoft.com",
+    "privacyUrl": "https://www.teams.com/privacy",
+    "termsOfUseUrl": "https://www.teams.com/termsofuser"
+  },
+  "icons": {
+    "color": "color.png",
+    "outline": "outline.png"
+  },
+  "name": {
+    "short": "Tab-Mail",
+    "full": "Tab Mail React js"
+  },
+  "description": {
+    "short": "Compose Mail in Outlook using Personal Tab app",
+    "full": "This sample app shows how to compose mail in Outlook using personal tab app."
+  },
+  "accentColor": "#5558AF",
+  "staticTabs": [
+    {
+      "contentUrl": "https://{{domain-name}}/tab",
+      "websiteUrl": "https://{{domain-name}}/tab",
+      "entityId": "com.contoso.tabmail.help",
+      "name": "Tab-Mail",
+      "scopes": [
+        "personal"
+      ]
+    }
+  ],
+  "permissions": [
+    "identity",
+    "messageTeamMembers"
+  ],
+  "validDomains": [
+    "{{domain-name}}"
+  ]
+}

samples/tab-mail/ts/README.md

@@ -0,0 +1,92 @@
+---
+page_type: sample
+description: This sample app shows how to compose mail in Outlook using personal tab app.
+products:
+- office-teams
+- office
+- office-365
+languages:
+- typescript
+extensions:
+ contentType: samples
+ createdDate: "20/06/2023 01:38:27 PM"
+urlFragment: officedev-microsoft-teams-samples-tab-mail-ts
+---
+
+# Tab-Mail
+
+This sample app shows how to compose mail in Outlook using personal tab app.
+
+ ## Included Features
+* Tabs
+
+## Interaction with app
+
+![Tab-Mail](Images/tab-mail.gif)
+
+## Prerequisites
+-  [NodeJS](https://nodejs.org/en/)
+
+-  [M365 developer account](https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/build-and-test/prepare-your-o365-tenant) or access to a Teams account with the appropriate permissions to install an app.
+- [Ngrok](https://ngrok.com/download) (For local environment testing) Latest (any other tunneling software can also be used)
+
+- [Teams](https://teams.microsoft.com) Microsoft Teams is installed and you have an account
+
+## Setup
+
+1. Setup NGROK
+  - Run ngrok - point to port 3978
+
+    ```bash
+    ngrok http 3978 --host-header="localhost:3978"
+    ```
+2. Setup for code
+ - Clone the repository
+
+    ```bash
+    git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
+    ```
+
+-  In a terminal, navigate to `samples/tab-mail/ts`
+
+ - Install modules
+
+    ```bash
+    npm install
+    ```
+ - Run your app
+
+    ```bash
+    npm start
+    ```
+3. Setup Manifest for Teams
+
+- **This step is specific to Teams.**
+    **Edit** the `manifest.json` contained in the `Manifest/`, you can use any GUID Id in place of `{{Manifest-Id}}` or [Generate Guid](https://guidgenerator.com/).
+    **Edit** the `manifest.json` for `validDomains` and replace `{{domain-name}}` with base Url of your domain. E.g. if you are using ngrok it would be `https://1234.ngrok-free.app` then your domain-name will be `1234.ngrok-free.app`.
+    **Zip** up the contents of the `Manifest/` folder to create a `manifest.zip`.
+    **Upload** the `manifest.zip` to Teams (in the left-bottom *Apps* view, click "Upload a custom app")
+
+
+## Running the sample
+
+**Install App:**
+
+![InstallApp](Images/1.add_app_teams.png)
+
+**App In Teams:**
+
+![Tab-Mail](Images/2.teams_mail_form.png)
+
+**App In Outlook**
+
+![OpenOutlook](Images/3.app_outlook.png)
+
+**Compose Mail From Tab**
+
+![Compose Mail](Images/4.compose_mail.png)
+
+## Further Reading.
+[TeamsJS capability support across Microsoft 365](https://learn.microsoft.com/en-us/microsoftteams/platform/m365-apps/teamsjs-support-m365#mail)
+
+<img src="https://pnptelemetry.azurewebsites.net/microsoft-teams-samples/samples/tab-mail-ts" />

samples/tab-mail/ts/assets/sample.json

@@ -0,0 +1,68 @@
+[
+  {
+    "name": "officedev-microsoft-teams-samples-tab-mail-ts",
+    "source": "officeDev",
+    "title": "Compose Mail in Outlook using Personal Tab app.",
+    "shortDescription": "This sample app shows how to compose mail in Outlook using personal tab app.",
+    "url": "https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-mail/ts",
+    "longDescription": [
+      "This sample app shows how to compose mail in Outlook using personal tab app."
+    ],
+    "creationDateTime": "2023-06-19",
+    "updateDateTime": "2023-06-10",
+    "products": [
+      "Teams"
+    ],
+    "metadata": [
+      {
+        "key": "TEAMS-SAMPLE-SOURCE",
+        "value": "OfficeDev"
+      },
+      {
+        "key": "TEAMS-SERVER-LANGUAGE",
+        "value": "reactjs"
+      },
+      {
+        "key": "TEAMS-SERVER-PLATFORM",
+        "value": "reactjs"
+      },
+      {
+        "key": "TEAMS-FEATURES",
+        "value": "tab,outlook mail"
+      }
+    ],
+    "thumbnails": [
+      {
+        "type": "image",
+        "order": 100,
+        "url": "https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Samples/main/samples/tab-mail/ts/Images/tab-mail.gif",
+        "alt": "Solution UX shows how to compose mail in Outlook using personal tab app."
+      }
+    ],
+    "authors": [
+      {
+        "gitHubAccount": "OfficeDev",
+        "pictureUrl": "https://avatars.githubusercontent.com/u/6789362?s=200&v=4",
+        "name": "OfficeDev"
+      }
+    ],
+    "references": [
+      {
+        "name": "Teams developer documentation",
+        "url": "https://aka.ms/TeamsPlatformDocs"
+      },
+      {
+        "name": "Teams developer questions",
+        "url": "https://aka.ms/TeamsPlatformFeedback"
+      },
+      {
+        "name": "Teams development videos from Microsoft",
+        "url": "https://aka.ms/sample-ref-teams-vids-from-microsoft"
+      },
+      {
+        "name": "Teams development videos from the community",
+        "url": "https://aka.ms/sample-ref-teams-vids-from-community"
+      }
+    ]
+  }
+]