-
Notifications
You must be signed in to change notification settings - Fork 767
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Multi Hub] Tab Mail Sample #838
Closed
Closed
Changes from 4 commits
Commits
Show all changes
12 commits
Select commit
Hold shift + click to select a range
473d039
Added Sample for Tab Mail Meta-OS
Mohammed-MSFT 9d0b778
Main Readme Updated.
Mohammed-MSFT 79f02d3
Unused package removed.
Mohammed-MSFT eb48bec
PR Comments Fixed, Need to check Build and buildpipeline
Mohammed-MSFT 9806a49
Pr Comments Fixed, Deployment Pipeline is pending need to create app …
Mohammed-MSFT 26bbda0
Update README.md
ChetanSharma-msft 7cf50f8
Update README.md
ChetanSharma-msft 4c61870
Update README.md
ChetanSharma-msft c995ab5
Gif Images updated
Mohammed-MSFT ddffb71
Update README.md
ChetanSharma-msft b3ab271
Update README.md
ChetanSharma-msft 6d3ddb4
Added Is Supported Function API
Mohammed-MSFT File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
PORT=3978 |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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}}", | ||
ChetanSharma-msft marked this conversation as resolved.
Show resolved
Hide resolved
|
||
"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}}" | ||
] | ||
} |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,95 @@ | ||
--- | ||
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) | ||
ChetanSharma-msft marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
## 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`. | ||
ChetanSharma-msft marked this conversation as resolved.
Show resolved
Hide resolved
|
||
**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. | ||
[tab-mail](https://learn.microsoft.com/en-us/javascript/api/@microsoft/teams-js/mail?view=msteams-client-js-latest) | ||
|
||
ChetanSharma-msft marked this conversation as resolved.
Show resolved
Hide resolved
|
||
[capability support](https://learn.microsoft.com/en-us/microsoftteams/platform/m365-apps/teamsjs-support-m365#mail) | ||
ChetanSharma-msft marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
|
||
<img src="https://pnptelemetry.azurewebsites.net/microsoft-teams-samples/samples/tab-mail-ts" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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,mail,outlook" | ||
ChetanSharma-msft marked this conversation as resolved.
Show resolved
Hide resolved
|
||
} | ||
], | ||
"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." | ||
ChetanSharma-msft marked this conversation as resolved.
Show resolved
Hide resolved
|
||
} | ||
], | ||
"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" | ||
} | ||
] | ||
} | ||
] |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Build and deploy pipelines are missing for this new sample.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fixed
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@Mohammed-MSFT - Deploy pipeline is still missing.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.