Skip to content
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

[Outlook] (quickstart) update unified manifest quickstart #4341

Merged
merged 10 commits into from
May 3, 2024
4 changes: 4 additions & 0 deletions .openpublishing.redirection.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
{
"redirections": [
{
"source_path": "docs/quickstarts/outlook-quickstart-json-manifest.md",
"redirect_url": "/office/dev/add-ins/quickstarts/outlook-quickstart"
},
{
"source_path": "docs/design/using-office-ui-fabric-react.md",
"redirect_url": "/office/dev/add-ins/quickstarts/fluent-react-quickstart"
Expand Down
2 changes: 1 addition & 1 deletion docs/develop/json-manifest-overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -105,4 +105,4 @@ For a full sample unified manifest, see [Sample preview unified manifest](unifie

## Next steps

- [Build an Outlook add-in with the unified manifest for Microsoft 365 (preview)](../quickstarts/outlook-quickstart-json-manifest.md).
- [Build your first Outlook add-in](../quickstarts/outlook-quickstart.md).
Original file line number Diff line number Diff line change
@@ -1,21 +1,19 @@
---
title: Build an Outlook add-in with the unified manifest for Microsoft 365 (preview)
title: Build an Outlook add-in with the unified manifest for Microsoft 365
description: Learn how to build a simple Outlook task pane add-in with the unified manifest for Microsoft 365.
ms.date: 12/11/2023
ms.date: 01/26/2024
ms.service: outlook
ms.localizationpriority: high
---

# Build an Outlook add-in with the unified manifest for Microsoft 365 (preview)
# Build an Outlook add-in with the unified manifest for Microsoft 365

There are two tools that you can use to create an Outlook Add-in project that uses the unified manifest for Microsoft 365. This article describes how to do it with the Yeoman generator for Office (also called "Yo Office"). Alternatively, you can create an Outlook add-in project with the Teams Toolkit as described at [Create Office Add-in projects with Teams Toolkit (preview)](../develop/teams-toolkit-overview.md).
There are two tools that you can use to create an Outlook Add-in project that uses the unified manifest for Microsoft 365. This article describes how to do it with the Yeoman generator for Office (also called "Yo Office"). Alternatively, you can create an Outlook add-in project with the Teams Toolkit as described at [Create Office Add-in projects with Teams Toolkit](../develop/teams-toolkit-overview.md).

In this article, you'll walk through the process of building an Outlook task pane add-in that displays a property of a selected message, triggers a notification on the reading pane, and inserts text into a message on the compose pane. This add-in will use a preview version of the unified, JSON-formatted manifest that Teams extensions, like custom tabs and messaging extensions, use. For more information about this manifest, see [Unified manifest for Microsoft 365 (preview)](../develop/unified-manifest-overview.md).
In this article, you'll walk through the process of building an Outlook task pane add-in that displays a property of a selected message, triggers a notification on the reading pane, and inserts text into a message on the compose pane. This add-in will use the unified manifest for Microsoft 365. For more information about this manifest, see [Unified manifest for Microsoft 365](../develop/unified-manifest-overview.md).

> [!NOTE]
> The new manifest is available for preview and is supported only on Outlook for Windows. It is subject to change based on feedback. We encourage experienced add-in developers to experiment with it. The preview manifest should not be used in production add-ins.

The preview is only supported in Office downloaded from a Microsoft 365 subscription and installed on Windows.
> The unified manifest is supported only on Outlook for Windows. We are working to support it in other platforms and other Office applications.

> [!TIP]
> If you want to build an Outlook add-in using the XML manifest, see [Build your first Outlook add-in](outlook-quickstart.md).
Expand All @@ -26,7 +24,7 @@ You can create an Office Add-in with the unified manifest by using the [Yeoman g

### Prerequisites

- [.NET runtime](https://dotnet.microsoft.com/download/dotnet/6.0/runtime) for Windows. One of the tools used in the preview runs on .NET.
- [.NET runtime](https://dotnet.microsoft.com/download/dotnet/6.0/runtime) for Windows. One of the tools used for the unified manifest runs on .NET.

[!INCLUDE [Yeoman generator prerequisites](../includes/quickstart-yo-prerequisites.md)]

Expand All @@ -38,14 +36,13 @@ You can create an Office Add-in with the unified manifest by using the [Yeoman g

1. [!include[Yeoman generator create project guidance](../includes/yo-office-command-guidance.md)]

- **Choose a project type** - `Outlook Add-in with unified Microsoft 365 Manifest (preview)`
- **Choose a project type** - `Outlook Add-in with unified Microsoft 365 Manifest`

- **What do you want to name your add-in?** - `Add-in with Unified Manifest`
- **Choose a script type** - `TypeScript`

![Screenshot showing the prompts and answers for the Yeoman generator in a command line interface with unified manifest option chosen.](../images/yo-office-outlook-json-manifest.png)
- **What do you want to name your add-in?** - `Add-in with Unified Manifest`

> [!NOTE]
> For this preview, the add-in name cannot be more than 30 characters.
![The prompts and answers for the Yeoman generator with unified manifest and TypeScript options chosen.](../images/yo-office-outlook-json-manifest-typescript.png)

After you complete the wizard, the generator will create the project and install supporting Node components.

Expand Down Expand Up @@ -259,5 +256,5 @@ Add a custom button to the ribbon that inserts text into a message body.

## See also

- [Unified manifest for Microsoft 365 (preview)](../develop/unified-manifest-overview.md)
- [Unified manifest for Microsoft 365](../develop/unified-manifest-overview.md)
- [Using Visual Studio Code to publish](../publish/publish-add-in-vs-code.md#using-visual-studio-code-to-publish)
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions docs/includes/unified-manifest-value-prop-feedback.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
> [!NOTE]
> The unified manifest for Microsoft 365 enables you to combine an Outlook Add-in with a Teams app as a single unit of development and deployment. We're working to extend support for the unified manifest to Excel, PowerPoint, Word, custom Copilot development, and other extensions of Microsoft 365. For more about it, see [Office Add-ins with the unified manifest](../develop/unified-manifest-overview.md). For a sample of a combined Teams app and Outlook Add-in, see [Discount Offers](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-add-in-combined/nodejs).
>
> We love to get your feedback about the unified manifest. If you have any suggestions, please create an issue in the repo for the [Office JavaScript Library](https://github.com/OfficeDev/office-js/issues).
2 changes: 0 additions & 2 deletions docs/outlook/index.yml
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,6 @@ landingContent:
links:
- text: Build your first Outlook add-in
url: ../quickstarts/outlook-quickstart.md
- text: Build your first Outlook add-in with a unified manifest for Microsoft 365 (preview)
url: ../quickstarts/outlook-quickstart-json-manifest.md
- text: Explore Office JavaScript API using Script Lab
url: ../overview/explore-with-script-lab.md
- linkListType: how-to-guide
Expand Down
12 changes: 10 additions & 2 deletions docs/quickstarts/outlook-quickstart.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Build your first Outlook add-in
description: Learn how to build a simple Outlook task pane add-in by using the Office JS API.
ms.date: 12/11/2023
ms.date: 02/9/2024
ms.service: outlook
ms.localizationpriority: high
---
Expand Down Expand Up @@ -34,7 +34,15 @@ You can create an Office Add-in by using the Yeoman generator for Office Add-ins

- **Which Office client application would you like to support?** - `Outlook`

![The prompts and answers for the Yeoman generator in a command line interface.](../images/yo-office-outlook-1.png)
- **Which manifest would you like to use?** - Choose either `unified manifest for Microsoft 365` or `XML manifest`

[!INCLUDE [Unified manifest value proposition and feedback request](../includes/unified-manifest-value-prop-feedback.md)]

Depending on your choice of manifest, the prompts and answers should look like one of the following.

![The prompts and answers for the Yeoman generator when task pane, JavaScript, Outlook, and XML manifest are chosen.](../images/yo-office-outlook-xml-manifest-javascript.png)

![The prompts and answers for the Yeoman generator when task pane, JavaScript, Outlook, and unified manifest are chosen.](../images/yo-office-outlook-json-manifest-javascript.png)

After you complete the wizard, the generator will create the project and install supporting Node components.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can't leave a comment directly on the affected section, so adding this here.

Lines 61 - 66 ("Explore the project"): Include the file structure of an add-in project that uses the unified manifest (see Explore the project).

Line 68 ("Update the code"): We may need to add a note specifying that this section only applies to projects that use the XML manifest. I have a to-do to incorporate this JS code into the Outlook Yo Office template, but I might not be able to complete the work in time.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I updated the Explore the project section.

The Update the code section applies regardless of the type of manifest that they chose.

Darren and I have already updated the task pane project for JavaScript so that the user can choose either language with either type of manifest. I'm not clear on what your ToDo is, but I don't think it's needed.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, Ricky.

Ah, I forgot that the change you and Darren worked on included language selection. Thanks for clearing that up. My task involves adding the JS code in the "Update the code" section of the Outlook quick start to the Outlook Yo Office template, so that the user can run the add-in right after creating it. This would align the Outlook quick start with the other quick starts, such as Excel.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, Ricky.

Ah, I forgot that the change you and Darren worked on included language selection. Thanks for clearing that up. My task involves adding the JS code in the "Update the code" section of the Outlook quick start to the Outlook Yo Office template, so that the user can run the add-in right after creating it. This would align the Outlook quick start with the other quick starts, such as Excel.

OK. I think I get it now. Step 3 of the "Update the code" section would be deleted because that code would be in the project when it is created.

Expand Down
3 changes: 0 additions & 3 deletions docs/toc.yml
Original file line number Diff line number Diff line change
Expand Up @@ -655,9 +655,6 @@ items:
- name: Build your first Outlook add-in
href: quickstarts/outlook-quickstart.md
displayName: Outlook
- name: Build an Outlook add-in with the unified manifest for Microsoft 365
href: quickstarts/outlook-quickstart-json-manifest.md
displayName: Outlook, preview
- name: Outlook add-in tutorial
href: tutorials/outlook-tutorial.md
displayName: Outlook
Expand Down