[Onboard] add new sample of Office Add-in #1372
There are no files selected for viewing
This file contains hidden or 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 hidden or 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,8 @@ | ||
| { | ||
| "plugins": [ | ||
| "office-addins" | ||
| ], | ||
| "extends": [ | ||
| "plugin:office-addins/recommended" | ||
| ] | ||
| } |
This file contains hidden or 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,33 @@ | ||
| # TeamsFx files | ||
| env/.env.*.user | ||
| env/.env.local | ||
| appPackage/build | ||
|
|
||
| # Dependency directories | ||
| node_modules | ||
|
|
||
| # Azure Functions artifacts | ||
| bin | ||
| obj | ||
| appsettings.json | ||
|
|
||
| # ignore local.settings.json if it contains your own credentials | ||
| # local.settings.json | ||
|
|
||
| # misc | ||
| .DS_Store | ||
| .deployment | ||
| .env | ||
|
|
||
| # build | ||
| /dist | ||
|
|
||
| # Azurite emulator | ||
| _storage_emulator | ||
|
|
||
| # Local data | ||
| .localConfigs | ||
| .notification.localstore.json | ||
|
|
||
| # production | ||
| /build |
This file contains hidden or 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,5 @@ | ||
| { | ||
| "recommendations": [ | ||
| "TeamsDevApp.ms-teams-vscode-extension" | ||
| ] | ||
| } |
This file contains hidden or 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,45 @@ | ||
| { | ||
| "version": "0.2.0", | ||
| "configurations": [ | ||
| { | ||
| "name": "Word Desktop (Edge Chromium)", | ||
| "type": "msedge", | ||
| "request": "attach", | ||
| "port": 9229, | ||
| "timeout": 600000, | ||
| "webRoot": "${workspaceRoot}", | ||
| "preLaunchTask": "Debug: Word Desktop", | ||
| "postDebugTask": "Stop Debug" | ||
| }, | ||
| { | ||
| "name": "Excel Desktop (Edge Chromium)", | ||
| "type": "msedge", | ||
| "request": "attach", | ||
| "port": 9229, | ||
| "timeout": 600000, | ||
| "webRoot": "${workspaceRoot}", | ||
| "preLaunchTask": "Debug: Excel Desktop", | ||
| "postDebugTask": "Stop Debug" | ||
| }, | ||
| { | ||
| "name": "PowerPoint Desktop (Edge Chromium)", | ||
| "type": "msedge", | ||
| "request": "attach", | ||
| "port": 9229, | ||
| "timeout": 600000, | ||
| "webRoot": "${workspaceRoot}", | ||
| "preLaunchTask": "Debug: PowerPoint Desktop", | ||
| "postDebugTask": "Stop Debug" | ||
| }, | ||
| { | ||
| "name": "Outlook Desktop (Edge Chromium)", | ||
| "type": "msedge", | ||
| "request": "attach", | ||
| "port": 9229, | ||
| "timeout": 600000, | ||
| "webRoot": "${workspaceRoot}", | ||
| "preLaunchTask": "Debug: Outlook Desktop", | ||
| "postDebugTask": "Stop Debug" | ||
| } | ||
| ] | ||
| } |
This file contains hidden or 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,8 @@ | ||
| { | ||
| "eslint.validate": [ | ||
| "javascript", | ||
| "javascriptreact", | ||
| "typescript" | ||
| ] | ||
| } | ||
|
|
This file contains hidden or 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,146 @@ | ||
| { | ||
| "version": "2.0.0", | ||
| "tasks": [ | ||
| { | ||
| "label": "Build (Development)", | ||
| "type": "npm", | ||
| "script": "build:dev", | ||
| "group": { | ||
| "kind": "build", | ||
| "isDefault": true | ||
| }, | ||
| "presentation": { | ||
| "clear": true, | ||
| "panel": "shared", | ||
| "showReuseMessage": false | ||
| }, | ||
| "dependsOn": [ | ||
| "Install" | ||
| ] | ||
| }, | ||
| { | ||
| "label": "Build (Production)", | ||
| "type": "npm", | ||
| "script": "build", | ||
| "group": "build", | ||
| "presentation": { | ||
| "clear": true, | ||
| "panel": "shared", | ||
| "showReuseMessage": false | ||
| }, | ||
| "dependsOn": [ | ||
| "Install" | ||
| ] | ||
| }, | ||
| { | ||
| "label": "Debug: Excel Desktop", | ||
| "type": "npm", | ||
| "script": "start:desktop:excel", | ||
| "presentation": { | ||
| "clear": true, | ||
| "panel": "dedicated" | ||
| }, | ||
| "problemMatcher": [], | ||
| "dependsOn": [ | ||
| "Install" | ||
| ] | ||
| }, | ||
| { | ||
| "label": "Debug: Outlook Desktop", | ||
| "type": "npm", | ||
| "script": "start:desktop:outlook", | ||
| "presentation": { | ||
| "clear": true, | ||
| "panel": "dedicated" | ||
| }, | ||
| "problemMatcher": [], | ||
| "dependsOn": [ | ||
| "Install" | ||
| ] | ||
| }, | ||
| { | ||
| "label": "Debug: PowerPoint Desktop", | ||
| "type": "npm", | ||
| "script": "start:desktop:powerpoint", | ||
| "presentation": { | ||
| "clear": true, | ||
| "panel": "dedicated" | ||
| }, | ||
| "problemMatcher": [], | ||
| "dependsOn": [ | ||
| "Install" | ||
| ] | ||
| }, | ||
| { | ||
| "label": "Debug: Word Desktop", | ||
| "type": "npm", | ||
| "script": "start:desktop:word", | ||
| "presentation": { | ||
| "clear": true, | ||
| "panel": "dedicated" | ||
| }, | ||
| "problemMatcher": [], | ||
| "dependsOn": [ | ||
| "Install" | ||
| ] | ||
| }, | ||
| { | ||
| "label": "Dev Server", | ||
| "type": "npm", | ||
| "script": "dev-server", | ||
| "presentation": { | ||
| "clear": true, | ||
| "panel": "dedicated" | ||
| }, | ||
| "problemMatcher": [] | ||
| }, | ||
| { | ||
| "label": "Install", | ||
| "type": "npm", | ||
| "script": "install", | ||
| "presentation": { | ||
| "clear": true, | ||
| "panel": "shared", | ||
| "showReuseMessage": false | ||
| }, | ||
| "problemMatcher": [] | ||
| }, | ||
| { | ||
| "label": "Lint: Check for problems", | ||
| "type": "npm", | ||
| "script": "lint", | ||
| "problemMatcher": [ | ||
| "$eslint-stylish" | ||
| ] | ||
| }, | ||
| { | ||
| "label": "Lint: Fix all auto-fixable problems", | ||
| "type": "npm", | ||
| "script": "lint:fix", | ||
| "problemMatcher": [ | ||
| "$eslint-stylish" | ||
| ] | ||
| }, | ||
| { | ||
| "label": "Stop Debug", | ||
| "type": "npm", | ||
| "script": "stop", | ||
| "presentation": { | ||
| "clear": true, | ||
| "panel": "shared", | ||
| "showReuseMessage": false | ||
| }, | ||
| "problemMatcher": [] | ||
| }, | ||
| { | ||
| "label": "Watch", | ||
| "type": "npm", | ||
| "script": "watch", | ||
| "presentation": { | ||
| "clear": true, | ||
| "panel": "dedicated" | ||
| }, | ||
| "problemMatcher": [] | ||
| } | ||
| ] | ||
| } |
This file contains hidden or 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,75 @@ | ||
| --- | ||
| page_type: sample | ||
| languages: | ||
| - typescript | ||
| products: | ||
| - office | ||
| name: Hello World Office add-in | ||
| urlFragment: officedev-teamsfx-samples-hello-world-office-add-in | ||
| description: A hello world project that contains Office add-in capability. | ||
| extensions: | ||
| createdDate: "2024-12-06" | ||
| --- | ||
| # Getting Started with Hello World Office Add-in Sample | ||
|
|
||
| Office add-ins are integrations built by third parties into Office by using our web-based platform. | ||
|
|
||
| Now you have the ability to create a single unit of distribution for all your Office applications by using the same manifest format and schema, based on the current JSON-formatted MetaOS manifest. | ||
|
Contributor
There was a problem hiding this comment. With the unified app manifest, you can create a single unit of distribution for all your Microsoft 365 extensions by using the same manifest format and schema. |
||
|
|
||
| Currently unified manifest of Office add-in is in public preview, so it does not support deploy and publish. | ||
hermanwenhe marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
|
||
| ## This sample illustrates | ||
|
|
||
| - How to create an Office add-ins with a unified manifest that works on Word, Excel, Powerpoint, and Outlook. | ||
hermanwenhe marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
|
||
| > [!NOTE] | ||
| > The unified app manifest for Word, Excel, and PowerPoint is in preview. Visit [this link](aka.ms/officeversions) to check the required Office Versions. Also, publishing a unified add-in for Word, Excel, PowerPoint is not supported currently. | ||
|
|
||
hermanwenhe marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| ## Prerequisites to use this sample | ||
|
|
||
hermanwenhe marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| * Download and install [Visual Studio Code](https://visualstudio.microsoft.com/downloads/). | ||
| * [Teams Toolkit Visual Studio Code Extension version](https://aka.ms/teams-toolkit) 5.0.0 and higher or [Teams Toolkit CLI](https://aka.ms/teams-toolkit-cli) | ||
| * Node.js (the latest LTS version). Visit the [Node.js site](https://nodejs.org/) to download and install the right version for your operating system. To verify if you've already installed these tools, run the commands node -v and npm -v in your terminal. | ||
| * Microsoft Office connected to a Microsoft 365 subscription. You might qualify for a Microsoft 365 E5 developer subscription through the [Microsoft 365 Developer Program](https://developer.microsoft.com/microsoft-365/dev-program), see [FAQ](https://learn.microsoft.com/office/developer-program/microsoft-365-developer-program-faq#who-qualifies-for-a-microsoft-365-e5-developer-subscription-) for details. Alternatively, you can [sign up for a 1-month free trial](https://www.microsoft.com/microsoft-365/try?rtc=1) or [purchase a Microsoft 365 plan](https://www.microsoft.com/microsoft-365/buy/compare-all-microsoft-365-products). | ||
|
|
||
| ## Minimal path to awesome | ||
|
|
||
| ### Debug Office add-in | ||
|
|
||
| - Please note that the same M365 account should be used both in Teams Toolkit and Office Applications (Word, Excel, Powerpoint, Outlook). | ||
hermanwenhe marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| - From Visual Studio Code only: use the `Run and Debug Activity Panel` in Visual Studio Code, select `Debug in Excel Desktop (Edge Chromium)`, and click the `Run and Debug` green arrow button. Please run VSCode as administrator if localhost loopback for Microsoft Edge Webview hasn't been enabled. Once enbaled, administrator priviledge is no longer required. | ||
|
|
||
|  | ||
hermanwenhe marked this conversation as resolved.
Show resolved
Hide resolved
Contributor
There was a problem hiding this comment. None of these 3 pngs can display. Should change the path here |
||
|
|
||
| Once the Office app is open, you can select the ribbon command to show the add-in task pane. The snapshot shows Excel as an example, and the other Office applications share the same behavior. | ||
hermanwenhe marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
hermanwenhe marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|  | ||
|
|
||
|
|
||
| The taskpane opens and you can check the sideloaded add-in. | ||
hermanwenhe marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|  | ||
|
|
||
|
|
||
|
|
||
hermanwenhe marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| ### Edit the manifest | ||
|
|
||
| You can find the app manifest in `./appPackage` folder. The folder contains one manifest file: | ||
hermanwenhe marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
|
||
| - `manifest.json`: Manifest file for Office add-in running locally. | ||
hermanwenhe marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
|
||
| You may add any extra properties or permissions you require to this file. See the [schema reference](https://docs.microsoft.com/en-us/microsoftteams/platform/resources/schema/manifest-schema) for more information. | ||
|
|
||
|
|
||
hermanwenhe marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| ### Validate manifest file | ||
|
|
||
| To check that your manifest file is valid: | ||
|
|
||
| - From Visual Studio Code: open the command palette and select: `Teams: Validate Application` and select `Validate using manifest schema`. | ||
| - From Teams Toolkit CLI: run command `teamsapp validate` in your project directory. | ||
|
|
||
| ## Version History | ||
|
|
||
| |Date| Author| Comments| | ||
| |---|---|---| | ||
| |Dec 06, 2024 | hermanwen | Init sample | | ||
|
|
||
| ## Feedback | ||
|
|
||
| We really appreciate your feedback! If you encounter any issue or error, please report issues to us following the [Supporting Guide](https://github.com/OfficeDev/TeamsFx-Samples/blob/dev/SUPPORT.md). Meanwhile you can make [recording](https://aka.ms/teamsfx-record) of your journey with our product, they really make the product better. Thank you! | ||
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.
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.
Oops, something went wrong.
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.