| Service | Microsoft Docs article | Related commit history on GitHub | Change details |
|---|---|---|---|
| platform | Feedback | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/feedback.md | Post your questions and help other community members by sharing and responding t | **Community channel**| **Contact** | |:|:|-|**Community help** | <ul> <li>:::image type="icon" source="assets/icons/stack-overflow-icon.png"::: [Stack Overflow](https://stackoverflow.com/questions/tagged/microsoft-teams): Use the `microsoft-teams` tag to post questions. Follow the Stack Overflow guidelines, such as providing a descriptive title, a concise problem statement, and details to reproduce the issue. Feature requests or broad questions are off-topic. If you are a new user, see [Stack Overflow Help Center](https://stackoverflow.com/help).</li> <li>:::image type="icon" source="assets/icons/microsoft-icon.png"::: [Microsoft Q&A](/answers/topics/office-teams-app-dev.html): We love Stack Overflow and provide extensive support to questions posted on Stack Overflow. Use the `office-teams-app-dev` tag to post questions. Stack Overflow has criteria about appropriate questions and [Microsoft Q&A](/answers/topics/office-teams-app-dev.html) has an open policy regarding this. </li><ul> | +|**Community help** | <ul> <li>:::image type="icon" source="assets/icons/microsoft-icon.png"::: [Microsoft Q&A](/answers/topics/office-teams-app-dev.html): We love Stack Overflow and provide extensive support to questions posted on Stack Overflow. Use the `office-teams-app-dev` tag to post questions. Stack Overflow has criteria about appropriate questions and [Microsoft Q&A](/answers/topics/office-teams-app-dev.html) has an open policy regarding this. </li> <li>:::image type="icon" source="assets/icons/stack-overflow-icon.png"::: [Stack Overflow](https://stackoverflow.com/questions/tagged/microsoft-teams): Use the `microsoft-teams` tag to post questions. Follow the Stack Overflow guidelines, such as providing a descriptive title, a concise problem statement, and details to reproduce the issue. Feature requests or broad questions are off-topic. If you are a new user, see [Stack Overflow Help Center](https://stackoverflow.com/help).</li> <ul> | | **Community chat group** | Use the informal community chat room for :::image type="icon" source="assets/icons/Teams-icon.png":::[Microsoft Teams app developers](https://gitter.im/OfficeDev/MicrosoftTeamsAppDev). Select **SIGN IN TO START TALKING**, if signing in for the first time. Select **JOIN ROOM**, if already logged in. | ### Report issues |
| platform | Azure Provisioning Instructions | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/includes/get-started/azure-provisioning-instructions.md | ## Deploy your app to Azure -Deployment consists of two steps. First, necessary cloud resources are created (also known as provisioning). Then, your app's code is copied into the created cloud resources. For this tutorial, you'll deploy the message extension app. +Deployment consists of two steps. First, necessary cloud resources are created (also known as provisioning). Then, your app's code is copied into the created cloud resources. You deploy the message extension app in this tutorial. <br> <br> <details>-<summary>What's the difference between Provision and Deploy?</summary> +<summary>What's the difference between <b>Provision</b> and <b>Deploy</b>?</summary> <br>-The <b>Provision</b> step creates resources in Azure and Microsoft 365 for your app, but no code (HTML, CSS, JavaScript, etc.) is copied to the resources. The <b>Deploy</b> step copies the code for your app to the resources you created during the provision step. It's common to deploy multiple times without provisioning new resources. Since the provision step can take some time to complete, it's separate from the deployment step. +The <b>Provision</b> step creates resources in Azure and Microsoft 365 for your app, but no code (such as HTML, CSS, or JavaScript) is copied to the resources. The <b>Deploy</b> step copies the code for your app to the resources you created during the provision step. It's common to deploy multiple times without provisioning new resources. Since the provision step takes some time to complete, it's separate from the deployment step. </details> <br> -# [Visual Studio Code](#tab/vscode) +# [Visual Studio Code](#tab/vsc4) -Select the Teams Toolkit :::image type="icon" source="~/assets/images/teams-toolkit-v2/teams-toolkit-sidebar-icon.png"::: icon in the Visual Studio Code sidebar. +Select the Teams Toolkit :::image type="icon" source="~/assets/images/teams-toolkit-v2/teams-toolkit-sidebar-icon.png"::: icon in the Visual Studio Code activity bar. 1. Select **Provision**. :::image type="content" source="~/assets/images/teams-toolkit-v2/provisioning-commands.png" alt-text="Screenshot shows the selection of provision in the cloud under Teams toolkit."::: -1. Select a subscription to use for the Azure resources. +1. Select a subscription. - :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/select-resource.png" alt-text="Screenshot shows the subscription to use for the Azure resources."::: + :::image type="content" source="../../assets/images/teams-toolkit-v2/select-azure-subscription-group.png" alt-text="Screenshot shows the Azure subscription group options to choose from."::: - Your app is hosted using Azure resources. +1. Select a resource group. - A dialog warns you that costs might be incurred when running resources in Azure. + :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/select-resource.png" alt-text="Screenshot shows the subscription to use for the Azure resources."::: -1. Select **Provision**. + If you don't have a resource group to select, you can create a new resource group with the following steps: ++ 1. Select **+ New resource group**. ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/first-msgext/select-resource-new-resource.png" alt-text="Screenshot shows the option to create a new Azure resource group."::: ++ 1. Select the default name or enter a suitable name for your resource group. ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/first-msgext/new-resource-group-name.png" alt-text="Screenshot shows the default name of the new Azure resource group."::: ++ 1. Select the location for your resource group. ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/first-msgext/new-resource-group-location.png" alt-text="Screenshot shows the options for the location of the new Azure resource group."::: ++1. A dialog box warns you that costs might be incurred when running resources in Azure. Select **Provision**. - :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/provision-warning.png" alt-text="Screenshot shows that you might incur charges for using Azure resources."::: + :::image type="content" source="../../assets/images/teams-toolkit-v2/deploy-azure/provision-warning.png" alt-text="Screenshot shows a dialog box that warns the user that a cost might be incurred while provisioning Azure resources."::: - The provisioning process creates resources in the Azure cloud. It might take some time. You can monitor the progress by watching the dialogs in the bottom-right corner. After a few minutes, you see the following notice: + The provisioning process creates resources in the Azure cloud. It might take some time. After a few minutes, you see the following message: - :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/deploy-provision-successmsgext.png" alt-text="Screenshot shows a notice which displays hellomsg successfully provisioned in the cloud."::: + :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/deploy-provision-successmsgext.png" alt-text="Screenshot shows a notice that displays the message extension app successfully provisioned in the cloud."::: - If you want, you can view the provisioned resources. For this tutorial, you don't need to view resources. + If you want, you can view the provisioned resources. For this tutorial, you don't need to view resources. - The provisioned resource appears in the **ENVIRONMENT** section. + The provisioned resource appears under **ENVIRONMENT**. - :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/provisioned-resources-env.png" alt-text="Screenshot shows the resource being provisioned in the environment section."::: + :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/provisioned-resources-env.png" alt-text="Screenshot shows the resource being provisioned in the environment section."::: -1. Select **Deploy** from the **LIFECYCLE** panel after provisioning is complete. +1. Under **LIFECYCLE**, select **Deploy**. :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/deploy-cloud.png" alt-text="Screenshot shows the app deploys to the cloud."::: - As with provisioning, deployment takes some time. You can monitor the process by watching the dialogs in the bottom-right corner. After a few minutes, you see a completion notice. +1. A dialog box appears that asks you if you want to deploy resources in the dev environment. Select **Deploy**. -Now, you can use the same process to deploy your Bot and Message Extension apps to Azure. + :::image type="content" source="../../assets/images/teams-toolkit-v2/deploy-azure/deploy-azure-confirm.png" alt-text="Screenshot shows the confirmation dialog box to deploy app in Azure."::: -# [Command Line](#tab/cli) + As with provisioning, deployment takes some time. After a few minutes, you see a completion message. -In your terminal window: +# [Command Line](#tab/cli4) ++1. Go to the folder where you created your message extension app and open Command Prompt. 1. Run `teamsfx provision`. In your terminal window: teamsfx provision ``` - When prompted, select an Azure subscription to use Azure resources. -- Your app is hosted using Azure resources. + When prompted, select an Azure subscription and resource group to use Azure resources. Your app is hosted using Azure resources. 1. Run `teamsfx deploy`. In your terminal window: teamsfx deploy ``` + Your message extension app is deployed. + ## Run the deployed app -Once the provisioning and deployment steps are complete: --1. Open the debug panel (**Ctrl+Shift+D** / **⌘⇧-D** or **View > Run**) from Visual Studio Code. -1. Select **Launch Remote (Edge)** from the launch configuration drop-down. -1. Select the **Start debugging (F5)** to launch your app from Azure. -- :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/launch-remote.png" alt-text="Screenshot shows the launch app remotely."::: --1. Select **Add**. -- :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/msgext-debug.png" alt-text="Screenshot shows the app being installed."::: -- The toolkit displays a message to indicate that the app is added to Teams. +After the provisioning and deployment steps are complete, go to **Run and Debug** (**Ctrl+Shift+D** or **View > Run**) in Teams Toolkit. - :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/mex-added-msg.png" alt-text="Screenshot shows a message to try the app now or later."::: +1. Select the **RUN AND DEBUG** dropdown menu. +1. Select **Launch Remote in Teams (Edge)**. +1. Select the **▷** button. - - If you select **Got it**, you can try the app later from the list of uploaded custom apps. - - If you select **Try it**, Teams loads your app. + :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/launch-remote.png" alt-text="Screenshot shows the launch app remotely in Teams option."::: - Your app is loaded on the Azure site. +1. A dialog box opens to install your deployed app to Teams. Select **Add**. -1. Select **Try it**. + :::image type="content" source="../../assets/images/teams-toolkit-v2/deploy-azure/mex-added-dev.png" alt-text="Screenshot shows message to add the deployed app."::: - The message extension app is loaded in a chat bot app. + Teams opens the message extension app in the most recent chat. - :::image type="content" source="~/assets/images/teams-toolkit-v2/deploy-azure/msgext-app.png" alt-text="Screenshot shows a custom app uploaded in Teams."::: + :::image type="content" source="../../assets/images/teams-toolkit-v2/first-msgext/mex-loaded-chat-app.png" alt-text="Screenshot shows the message extension open in a chat."::: |
| platform | Prepare Teams Toolkit | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/includes/get-started/prepare-teams-toolkit.md | ## Prepare development environment -After you install the required tools, you set up the development environment. +After you install the required tools, set up the development environment. ### Install Teams Toolkit Microsoft Teams Toolkit helps simplify the development process with tools to provision and deploy cloud resources for your app and publish to the Teams Store. -You can use Teams Toolkit with Visual Studio Code or CLI (command-line interface) (TeamsFx). +You can use Teams Toolkit with Visual Studio Code or a command-line interface called TeamsFx CLI. # [Visual Studio Code](#tab/vscode) -1. Open Visual Studio Code and select **Extensions** (**Ctrl+Shift+X** / **⌘⇧-X** or **View** > **Extensions**). -1. In the search box, enter **Teams Toolkit**. -1. Select **Install**. +1. Open Visual Studio Code and select **Extensions** (**Ctrl+Shift+X** or **View** > **Extensions**). +2. In the search box, enter **Teams Toolkit**. +3. Select **Install**. :::image type="content" source="../../assets/images/include-files/install-toolkit-vs.png" alt-text="Screenshot shows the Teams Toolkit extension installation."::: You can use Teams Toolkit with Visual Studio Code or CLI (command-line interface You can also install Teams Toolkit from the [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension). -# [Command line](#tab/cli) +# [Command Line](#tab/cli) To install the TeamsFx CLI, use the `npm` package manager and enter the following command in Command prompt: A tenant is a space or a container for your organization in Teams, where you cha ### Check for upload an app option -After creating the app, you must load your app in Teams without distributing it. This process is known as app uploading. Sign in to your Microsoft 365 account to view this option. +After creating your custom app, you must upload your app to Teams with the **Upload a custom app** option. Sign in to your Microsoft 365 account to check if this option is enabled. -> [!NOTE] -> Ensure that you enable app uploading to preview and test apps in Teams local environment. --Custom app upload is enabled through a tenant and admin must give an access to upload a custom app. -Do you already have a tenant and an admin access? Let's check if you really do! --Verify if you can upload apps in Teams: +The following steps help you verify if you can upload apps in Teams: 1. In the Teams client, select the **Apps** icon.-1. Select **Manage your apps**. -1. Select **Upload an app**. -1. Look for the option to **Upload a customised app**. If the option is visible, you enabled custom app upload. +2. Select **Manage your apps**. +3. Select **Upload an app**. +4. Look for the option to **Upload a custom app**. If the option is visible, you can upload custom apps. - :::image type="content" source="../../assets/images/include-files/custom-upload.png" alt-text="Screenshot shows the selection of Upload a customised app."::: + :::image type="content" source="../../assets/images/include-files/custom-upload.png" alt-text="Screenshot shows the selection of upload a custom app option."::: > [!NOTE]- > Contact your Teams administrator, if you don't find the option to upload a customised app. + > If you don't find the option to upload a custom app, contact your Teams administrator. ### Create a free Teams developer tenant (optional) -If you don't have a Teams developer account, you can get it for free. Join the Microsoft 365 developer program! +If you don't have a Teams developer account, join the Microsoft 365 developer program. 1. Go to the [Microsoft 365 developer program](https://developer.microsoft.com/microsoft-365/dev-program). 1. Select **Join Now** and follow the onscreen instructions. 1. In the welcome screen, select **Set up E5 subscription**.-1. Set up your administrator account. After you finish, the following screen appears. +1. Set up your administrator account. After you finish, the following screen appears: :::image type="content" source="../../assets/images/include-files/microsoft-365.png" alt-text="Screenshot shows the Microsoft 365 Developer Program."::: -1. Sign in to Teams using the administrator account you just set up. Verify that you've the **Upload a customised app** option in Teams. +1. Sign in to Teams using the administrator account you just set up. Verify that you have the **Upload a custom app** option in Teams. |
| platform | Actions In M365 Quick Start Guide | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/m365-apps/actions-in-m365-quick-start-guide.md | + + Title: Actions in Microsoft 365 Quick start guide +description: In this article, learn how to create Actions in Microsoft 365, function of Actions and its use cases. Last updated : 12/8/2023++++++# Actions in Microsoft 365 Quick start guide ++> [!NOTE] +> +> * Actions are available in [public developer preview](../resources/dev-preview/developer-preview-intro.md). +> * Actions are supported for Microsoft 365 (Office) app for web and desktop. ++Get started with Actions in Microsoft 365, which helps integrate an app into the user's workflow by enabling easy discoverability and seamless interaction with their content. ++## Prerequisites ++Before you get started, ensure that you install the following tools: ++| | Install | For using... | +| | | | +| | [Node.js](https://nodejs.org/en/download/) | A JavaScript runtime environment. For more information, see [Node.js version compatibility table for project type](~/toolkit/build-environments.md#nodejs-version-compatibility-table-for-project-type).| +| | [Microsoft Edge](https://www.microsoft.com/edge) (recommended) or [Google Chrome](https://www.google.com/chrome/) | A browser with developer tools. | +| | [Visual Studio Code](https://code.visualstudio.com/download) | Visual Studio Code is a lightweight but powerful source code editor, which comes with built-in support for JavaScript, TypeScript, Node.js, and SharePoint Framework (SPFx) build environments. Use the latest version. | +| | [Teams Toolkit](../toolkit/install-Teams-Toolkit.md) | A Microsoft Visual Studio Code extension that creates a project scaffolding for your app. Use the latest version. | ++### Build and run the sample app ++Let's learn how to build and run a sample app in your local environment. You'll use Teams Toolkit for Visual Studio Code to setup and sideload the application to your tenant. LetΓÇÖs get started! ++1. Go to the [sample](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/m365-actions-preview/nodejs). ++1. Select **Code**. ++1. From the dropdown menu, select **Open with GitHub Desktop**. ++ :::image type="content" source="~/assets/images/include-files/clone-repository.png" alt-text="Screenshot show the option to clone repository in local."::: ++1. Select **Clone**. ++1. Go to Visual Studio Code. ++1. Select **File** > **Open Folder...**. ++1. Select the folder where your app is created. ++1. Select **Select Folder**. ++1. From the left pane, select **Run and Debug (Ctrl+Shift+D)**. ++1. Select the **F5** key to start debugging. ++ :::image type="content" source="images/actions-debug.png" alt-text="The screenshot shows actions in debug."::: ++A browser window opens with Microsoft 365 home page and your app is available under **Apps**. ++You can try your Actions in the Microsoft 365 home page, right-click a Word, Excel, or PPT file. You can see **Related tasks** in the context menu. Hover over **Add to** to view the **Add todo task** action. +++If you want to run Actions in the Microsoft 365 on Azure, see [sample.](https://github.com/OfficeDev/Microsoft-Teams-Samples/blob/main/samples/m365-actions-preview/nodejs/README.md#optional-deploy-the-app-to-azure) ++## See also ++* [Actions in Microsoft 365](actions-in-m365.md) +* [Build Actions in Microsoft 365](build-actions-in-m365.md) |
| platform | Actions In M365 | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/m365-apps/actions-in-m365.md | + + Title: Actions in Microsoft 365 +description: In this article, learn more about the function of Actions and its use cases. Last updated : 11/16/2023++++++# Actions in Microsoft 365 ++> [!NOTE] +> +> * Actions are available in [public developer preview](../resources/dev-preview/developer-preview-intro.md). +> * Actions are supported for Microsoft 365 (Office) app for web and desktop. ++Actions aim to integrate your app into your user's workflow by enabling easy discoverability and seamless interaction with their content. Actions enable efficient task completion by directing users to your app with their intent and contextual content. The integration enhances the visibility and engagement of your app with minimal development effort. ++The following graphic is an example of an Action that directs user to view list of suppliers related to the file: +++| Steps | Description | +| | | +| 1 | In Microsoft 365, the user right-clicks on the Excel file. A context menu appears.| +| 2 | The user selects **Related suppliers** to view the list of suppliers for the Northwind company.| +| 3 | The Northwind page opens with the list of suppliers mentioned in the Excel file. The user saves time by checking the result with a single click on the Excel file without manually opening the file each time.| ++## Understand how Actions work ++Actions are built using an intent, object, and handler. When a user aims to complete a task it's called an Action, and the Action is represented by the intent and object. The intent serves as the verb, outlining the user's intended action, while the object is the noun on which the action is performed. For example, opening a file is an intent and the file is an object. You must consider the user's intent and object as the input and create the appropriate handler to enable task completion for the user. ++To build an action, you must define the intent, object, and handler in the app manifest and use Teams JavaScript library (Teams JS) to get the Action details to make it easy for the users to do specific tasks. ++The following table lists the required elements and support information for Actions: ++| | Name | Description | What is supported in this preview  +| | | | | +| | Intent | Intent is the objective a user wants to perform or achieve. Intent is typically represented by a verb, such as `Open`, `Add to`, or any other actions that a user intends to perform. Microsoft 365 uses intent to display Actions in locations that align with the user’s needs and intentions. Intent determines the placement of Actions. | You can create an intent for `Open`, `Add to`, and `custom` Actions. You can use `custom` Action to create a tailored action. | +| | Object  | Object is the file on which the user wants to perform an action. Object represents the noun or context that defines what the user wants to perform an action on.  | Actions can be triggered on content objects (files) that have an extension, such as Word, PowerPoint, Excel, PDF, and images. The files must be available in OneDrive or SharePoint and must be accessible through Microsoft Graph. | +| | Handlers | A handler refers to the method to fulfill the user's intent and perform the desired action on the specified object. Handler is responsible for implementing the logic and functionality of the Action, ensuring a seamless and meaningful user experience. | Actions support the `openPage` handler. The `openPage` handler allows you to directly guide users to your app's personal tab. The `openPage` handler helps you to drive users to your app's dedicated pages, providing them with a rich and expansive interface to accomplish their goals. | ++## Design guidelines ++Create app icons and display names in a context menu for Actions. A single action shows the essence of your app, and by designing the visual connection between the app icon and its display name, you can enhance both the look and the function. +++* Start with the intent name, typically represented by a verb, such as `Open` or `Add to` and followed by a term that describes your app or what your action does. ++* Ensure that the first letter is capitalized. When using a brand name, only the first letter of the brand name should be capitalized. ++The following image is an anatomy of an icon slot: +++### Display name ++The following table provides guidance on the do’s and don’ts for the display name: ++| ✔️ **Do's** | ❌ **Don't** | +| | | +|Add to Todo: Add to represents the intent and Todo is the app name.|Avoid using Contoso as the only app name, as it doesn't adequately convey the app's functionality.| +|Open in Contoso: Open represents the intent and Contoso is the app name.|Open PDF, Word, PPT, or TXT files in Contoso is too long.| +|Add to dashboard: Add to represents the intent and Contoso is the app name. However, dashboard provides a more accurate description of the use case.|Custom sign document: Custom intent, no need to include custom in the display name. Start with the intent description with a verb.| +|Request signatures: Start with the custom intent, followed by a comprehensive description of the action. The brand name or object name, Contoso sign, isn't necessarily required.| | +|Convert to PDF: Start with the custom intent, which is identified as the verb, to clearly express the action in the Contoso app.| ++The following image is an example of correct and incorrect ways to format a sample name: +++### Context menu ++An Action in the context menu contains an app icon and display name. ++The following images are an example of flat list and grouped intents in a context menu: ++#### [Flat list](#tab/flatlist) +++#### [Grouped](#tab/groupedlist) +++++> [!NOTE] +> +> The Microsoft 365 platform determines the placement of Actions. ++## Next step ++> [!div class="nextstepaction"] +> [Build Actions in Microsoft 365](build-actions-in-m365.md) |
| platform | Build Actions In M365 | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/m365-apps/build-actions-in-m365.md | + + Title: Build Actions in Microsoft 365 +description: In this article, learn more how to build Actions and its use cases. Last updated : 12/8/2023+++++++# Build Actions in Microsoft 365 ++> [!NOTE] +> +> Actions are available in [public developer preview](../resources/dev-preview/developer-preview-intro.md). ++When you create an app ensure that you define user intent, determine the object to perform the action, and construct the corresponding handler that facilitates task completion for the user. ++To build Actions for your app, follow these steps: ++1. [Prerequisites](#prerequisites). +1. [Configure app manifest](#configure-app-manifest). +1. [Retrieve Action information through context object](#retrieve-action-information-through-context-object). +1. [Access content through Graph API](#access-content-through-graph-api). ++## Prerequisites ++Before you get started, ensure that you install the following: ++| | Install | Description | +| | | | +| | [Node.js](https://nodejs.org/en/download/) | A JavaScript runtime environment. For more information, see [Node.js version compatibility table for project type](~/toolkit/build-environments.md#nodejs-version-compatibility-table-for-project-type).| +| | [Microsoft Edge](https://www.microsoft.com/edge) (recommended) or [Google Chrome](https://www.google.com/chrome/) | A browser with developer tools. | +| | [Visual Studio Code](https://code.visualstudio.com/download) | Visual Studio Code is a lightweight but powerful source code editor, which comes with built-in support for JavaScript, TypeScript, Node.js, and SharePoint Framework (SPFx) build environments. Use the latest version. | +| | [Teams Toolkit](../toolkit/install-Teams-Toolkit.md) | A Microsoft Visual Studio Code extension that creates a project scaffolding for your app. Use the latest version. | ++## Configure app manifest ++Add the `actions` property and define the intent, object, and handler for your actions in the app manifest (previously called Teams app manifest). ++The following is an app manifest example for Actions that can be triggered on files such as Excel, Word, PDF, or PowerPoint: ++```json +{ + "$schema": "https://developer.microsoft.com/json-schemas/teams/vDevPreview/MicrosoftTeams.schema.json", + "manifestVersion": "devPreview", ++ "actions": [ + { + "id": "relatedTasks", + "displayName": "Related tasks", + "intent": "custom", + "description": "Shows tasks in the To do app that are related to this file.", + "handlers": [ + { + "type": "openPage", + "supportedObjects": { + "file": { + "extensions": ["xlsx", "doc", "docx", "pdf", "pptx", "ppt"] + } + }, + "pageInfo": { + "pageId": "index", + } + } + ] + } + ] +} +``` ++For more information, see [public developer preview app manifest schema](../resources/schem#actions). ++When a user selects an action to open a personal tab and view related tasks in an app based on the selected file. The app uses the `"intent": "custom"` property to identify the file type, such as .xlsx or doc and the `"type": "openPage"` handler opens the app and navigates to the `pageId`. ++## Retrieve Action information through context object ++Build the handler to receive the Action information through the [context object](/javascript/api/%40microsoft/teams-js/app.context?view=msteams-client-js-latest&preserve-view=true) to create a seamless user experience for performing users specific tasks using the [Teams JavaScript library (TeamsJS)](/javascript/api/@microsoft/teams-js). ++When a user selects Add option from the app's context menu, a personal tab opens with the help of the `openPage` property in the app manifest. Your app can access contextual information about the invoked Action from the `actionInfo` property of the `app.getContext()` context object. ++The [ActionInfo](/javascript/api/@microsoft/teams-js/actioninfo) interface helps to enable your app to determine when a user opens a page from an Action and the content that initiated the Action. ++```javascript +app.getContext().then((context: app.Context) => { + const actionInfo = context.actionInfo; + if (actionInfo) { + // App was launched using an action    + } + if (actionInfo && actionInfo.actionId == 'myActionId1') { + // Handle specific action    + } + if (actionInfo) { + if (actionInfo.actionObject.type == app.ActionObjectType.M365Content) { + const itemId = actionInfo.actionObjects[0].itemId; + // Get the requested content from Mirosoft Graph by item id: + } + } +}) +``` ++| | Name | Description | +| | | | +| | `actionObjects` | Array of corresponding action objects. | +| | `itemId` | The app receives the ID as the content and uses it to query the Microsoft Graph. | +| | `actionInfo` | The context object contains an object that holds all the information related to the current action. | ++## Access content through Graph API ++After obtaining the `itemId` of the triggering content, you can use the [Graph API](/graph/api/driveitem-get?view=graph-rest-1.0&tabs=http&preserve-view=true) to read or modify the content, facilitating task completion for your users. ++**HTTP request** ++```http +GET /users/{user-id}/drive/items/{item-id} +``` ++## Sideload your app using Teams Toolkit ++After you update the app package with the required information, you're ready to test your Actions in the Teams Toolkit. To initiate debugging, select the **F5** key. ++ :::image type="content" source="images/actions-debug.png" alt-text="The screenshot shows actions in debug."::: ++A browser window opens with Microsoft 365 home page and your app is available under **Apps**. ++You can now preview your Actions in the Microsoft 365 home page, right-click a file that is supported by your Actions. Actions appear in the context menu, for example **Add todo task**. +++## Preinstall Actions for users in Microsoft365 Admin Center ++> [!NOTE] +> Actions are available in public developer preview, ensure that you enable [targeted release](/microsoft-365/admin/manage/release-options-in-office-365?view=o365-worldwide&preserve-view=true) to the users to experience Actions in Microsoft 365 app. ++To use an app with Actions in your tenant, an admin must upload the app package with devPreview manifest to the Microsoft Admin Center as follows: ++1. Go to [Microsoft Admin Center](https://admin.microsoft.com/AdminPortal#/homepage). ++1. Select **Settings** > **Integrated Apps** > **Upload custom apps**. ++Follow instructions to preinstall your app for entire organization or user groups within your tenant. ++## Code sample ++| **Sample name** | **Description** |**Node.js** | +|--|--|-| +| Actions in Microsoft 365 apps | This sample code describes the actions implemented in Microsoft 365 apps, specifically focusing on two actions within a To Do app. | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/m365-actions-preview/nodejs)| ++## Next step ++> [!div class="nextstepaction"] +> [Actions in Microsoft 365 quick start guide](actions-in-m365-quick-start-guide.md) ++## See also ++[Actions in Microsoft 365](actions-in-m365.md) |
| platform | Overview | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/m365-apps/overview.md | You can now define and deploy Office Add-ins in the [developer preview version]( For more information, see [app manifest for Office Add-ins (preview)](/office/dev/add-ins/develop/json-manifest-overview). +## Actions in Microsoft 365 ++Actions aim to integrate your app into your user's workflow by enabling easy discoverability and seamless interaction with their content. By directing users to your app with their intent and contextual content, Actions enable efficient task completion. This integration enhances the visibility and engagement of your app with minimal development effort. ++For more information, see [Actions in Microsoft 365](actions-in-m365.md) + ## Microsoft commercial marketplace submission Join the growing number of production Teams apps in the [Microsoft commercial marketplace](https://appsource.microsoft.com/) (Microsoft AppSource) store with expanded support for Outlook and Microsoft 365 audiences. The app [submission process for Teams apps enabled for Outlook and Microsoft 365](../concepts/deploy-and-publish/appsource/publish.md) is the same as for traditional Teams apps. The only difference is to use app manifest [version 1.13](../tabs/how-to/using-teams-client-sdk.md) in your app package, which introduces support for Teams apps that run across Microsoft 365. |
| platform | Link Unfurling | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/messaging-extensions/how-to/link-unfurling.md | The following code is an example of the `invoke` request: } ``` -Following is an example of the response: +Example of the response: ```json { contentType: "application/vnd.microsoft.card.thumbnail", +## Micro-capabilities for website links ++The most common way to share content in Microsoft Teams is through links. For any link, Teams unfurls a preview of the link into an Adaptive Card with the information such as image, title, and a description. ++You can show rich unfurl previews of your links without installing your app in Microsoft Teams. Add the [schema.org metadata](https://schema.org/docs/gs.html) to your website in the [JASON-LD format](https://json-ld.org/) and use the micro-capability templates <! link to GitHub templates to be added after the PM shares the public link --> that match your product. Teams uses these templates to unfurl rich previews for your links in Microsoft Teams. ++### Enable Rich unfurl previews of links ++If you've already added [schema.org](<https://schema.org/>) to your website, you can view the rich unfurl preview of your link by pasting it in the Teams message compose area. +++If you've not added [schema.org](<https://schema.org/>) to your website, you can manually check the rich unfurl preview experience by following these steps: ++1. Add the [schema.org](https://schema.org/) metadata with the [JASON-LD format](https://json-ld.org/) to your website. +1. In your website, check for the supported `@type` attribute and copy the metadata under the script tag `application/ld+json`. +1. Open [Adaptive Card designer](https://www.adaptivecards.io/designer/) and create a new file. +1. In the **SAMPLE DATA EDITOR**, paste the json metadata from your website. ++ :::image type="content" source="../../assets/images/messaging-extension/link-unfurling-app-less-adaptive-card-sample-data-editor.png" alt-text="Screenshot shows an example of website metadata in the sample data editor section of the Adaptive Card Designer."::: ++1. Check the micro-capability template and add the template code in the **CARD PAYLOAD EDITOR**. ++ :::image type="content" source="../../assets/images/messaging-extension/link-unfurling-app-less-adaptive-card-payload-editor.png" alt-text="Screenshots shows an example of micro-capability template added in the card payload editor in Adaptive Card Designer."::: ++ If required, add new attributes from the template to your website metadata in the **SAMPLE DATA EDITOR**. ++1. To preview the Adaptive Card unfurl experience, select **Preview mode**. ++For more information, see [Micro-capabilities for website links](micro-capabilities-for-website-links.md). + ## Zero install for link unfurling Zero install link unfurling helps you unfurl previews for your shared links even before a user discovers or installs your app in Teams. You can anonymously unfurl cards with a new `invoke` request or create a preauthenticated Adaptive Card preview for users before they install or authenticate your app. To get your app ready for zero install link unfurling, follow these steps: 1. **Advantages and limitations**: -# [Advantages](#tab/advantages) --Zero install link unfurling helps you provide enhanced experience to the users, such as: --* Unfurl previews for your links that users share in Teams even before the user installs your app. -* Create a welcome card for your app to show a preview with the placeholder fields. --# [Limitations](#tab/limitations) + # [Advantages](#tab/advantages) + + Zero install link unfurling helps you provide enhanced experience to the users, such as: + + * Unfurl previews for your links that users share in Teams even before they've installed your app. + * Create a welcome card for your app to show a preview with the placeholder fields. -The following are the limitations: + # [Limitations](#tab/limitations) -* The bot can only send back a response as `result` or `auth` as the value for the `type` property in response to the `composeExtensions/anonymousQueryLink` invoke request. The user can log an error for all other response types, such as, *silentAuth* and *config*. + The following are the limitations: -* The bot can't send back an [Adaptive Cards with Universal Actions](../../task-modules-and-cards/cards/Universal-actions-for-adaptive-cards/Overview.md) in response to the `composeExtensions/anonymousQueryLink` invoke request, either as a result or as a pre-auth card in auth. + * The bot can only send back a response as `result` or `auth` as the value for the `type` property in response to the `composeExtensions/anonymousQueryLink` invoke request. The user can log an error for all other response types, such as, *silentAuth* and *config*. -* If the bot selects to send back the `"type": "auth"` property with a pre-auth card, Teams strips away any action buttons from the card, and adds a sign in action button to get users to authenticate into your app. + * The bot can't send back an [Adaptive Cards with Universal Actions](../../task-modules-and-cards/cards/Universal-actions-for-adaptive-cards/Overview.md) in response to the `composeExtensions/anonymousQueryLink` invoke request, either as a result or as a pre-auth card in auth. + * If the bot selects to send back the `"type": "auth"` property with a pre-auth card, Teams strips away any action buttons from the card, and adds a sign in action button to get users to authenticate into your app. ## How to test zero install link unfurling |
| platform | Micro Capabilities For Website Links | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/messaging-extensions/how-to/micro-capabilities-for-website-links.md | + + Title: Micro-capabilities for website links ++description: In this article, lean how to use micro-capability templates and schema.org metadata to unfurl rich previews for your links in Microsoft Teams. +ms.localizationpriority: high ++++# Micro-capabilities for website links ++The most common way to share content in Microsoft Teams is through links. For any link, Teams unfurls a preview of the link into an Adaptive Card with the information such as image, title, and description. You can use the **schema.org** metadata and the **micro-capability** templates to show rich unfurl previews of your links without installing your app in Microsoft Teams. ++## Add schema.org to your website ++[Schema.org](https://schema.org/docs/gs.html) is an open-source standard for schemas of structured data on the internet. Add schema.org to your website and use the properties in the micro-capability templates <! link to GitHub templates to be added after the PM shares the public link --> to unfurl rich previews of your links in Microsoft Teams. ++### Enable rich unfurl previews of links ++> [!NOTE] +> If you've already added [schema.org](<https://schema.org/>) to your website, you can view the rich unfurl preview of your link by pasting it in the Teams message compose area. ++Specify the [schema.org](https://schema.org/) and the supported `@type` attribute to your website. For each `@type` attribute, include the properties available in the micro-capability template that apply to your website. ++To enable rich unfurl previews of your links, follow these steps: ++1. In the https://docsupdatetracker.net/index.html file, create a `<script>` element with the type as `application/ld+json`. ++ ```html + <head> + <script type="application/ld+json"> + </script> + </head> + ``` ++1. Add the `@context` attribute with the value as `http://schema.org` in the script tag. ++ ```html + <script type="application/ld+json"> + { + "@context": "http://schema.org/", + } + </script> ++ ``` ++1. Add the `@type` and `name` attributes to the script tag. ++ ```html + <script type="application/ld+json"> + { + "@context": "http://schema.org/", + "@type": "Article", + "name": "Contoso news" + } + </script> ++ ``` ++1. Add the properties listed in the micro-capability template. ++ ```html + <script type="application/ld+json"> + { + "@context": "http://schema.org/", + "@type": "Article", + "name": "Contoso news" + } + </script> ++ ``` ++ You can also add the properties for each type available in the schema.org to your website. Teams recognizes all the properties for the supported micro-capability templates available at schema.org. ++1. After you've added all the properties to the script tag, add the script tag to your website HTML page. ++### Micro-capability templates ++The following are the supported micro-capability templates for Teams client: ++> [!NOTE] +> If the website link doesn't have the supported micro-capability templates, Teams defaults the link to the current URL preview unfurling. ++# [Article](#tab/article) ++The following is a JSON code sample for the Article template: ++```json +{ + "type": "AdaptiveCard", + "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", + "version": "1.4", + "body": + [ + { + "type": "Container", + "$when": "${image != null}", + "backgroundImage": + { + "url": "${image}", + "horizontalAlignment": "Center", + "verticalAlignment": "Center" + }, + "minHeight": "180px", + "bleed": true, + "items": + [] + }, + { + "type": "TextBlock", + "$when": "${name != null}", + "text": "${name}", + "size": "Medium", + "weight": "Bolder", + "wrap": true, + "spacing": "Small", + "maxLines": 2 + }, + { + "type": "TextBlock", + "$when": "${name == null && headline != null}", + "text": "${headline}", + "size": "Medium", + "weight": "Bolder", + "wrap": true, + "spacing": "Small", + "maxLines": 2 + }, + { + "type": "TextBlock", + "$when": "${creator != null}", + "text": "${creator}", + "isSubtle": true, + "spacing": "Small", + "size": "Small" + }, + { + "type": "TextBlock", + "$when": "${description != null}", + "text": "${description}", + "isSubtle": true, + "spacing": "Small", + "wrap": true, + "maxLines": 2, + "size": "Small" + } + ], + "selectAction": + { + "type": "Action.OpenUrl", + "url": "${url}" + } +} +``` ++|Property |Description | +||| +|`@type` | Article | +|image | URL of the image of for the article. | +|name | Name of the author. | +|headline | Headline for the article. | +|creator | Author of the article. | +|url | URL of the article's official website. | ++Example of the unfurling experience for article type: ++# [Product](#tab/product) ++The following is a JSON code sample for the Product template: ++```json +{ + "type": "AdaptiveCard", + "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", + "version": "1.4", + "body": + [ + { + "type": "Container", + "$when": "${image != null}", + "backgroundImage": + { + "url": "${image}", + "horizontalAlignment": "Center", + "verticalAlignment": "Center" + }, + "minHeight": "180px", + "bleed": true, + "items": + [] + }, + { + "type": "TextBlock", + "$when": "${name != null}", + "text": "${name}", + "size": "Medium", + "weight": "Bolder", + "wrap": true, + "spacing": "Small", + "maxLines": 2 + }, + { + "type": "TextBlock", + "$when": "${offers.price != null}", + "text": "${offers.price} ${offers.priceCurrency}", + "isSubtle": true, + "spacing": "Small", + "size": "Small" + } + ], + "selectAction": + { + "type": "Action.OpenUrl", + "url": "${url}" + } +} ++``` ++|Property |Description | +||| +|`@type` | Product | +|image | URL of the image of for the product. | +|name | Name of the product. | +|offers.price | Price of the product. | +|offers.priceCurrency | Currency of the Product. | +|url | URL of the product's website. | ++Example of the unfurling experience for the product type: +++# [Event](#tab/event) ++The following is a JSON code sample for the Event template: ++```json +{ + "type": "AdaptiveCard", + "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", + "version": "1.4", + "body": + [ + { + "type": "Container", + "items": + [ + { + "type": "Container", + "$when": "${image != null}", + "backgroundImage": + { + "url": "${image}", + "horizontalAlignment": "Center", + "verticalAlignment": "Center" + }, + "items": + [], + "minHeight": "180px", + "bleed": true + }, + { + "type": "TextBlock", + "$when": "${name != null}", + "text": "${name}", + "size": "Medium", + "weight": "Bolder", + "wrap": true, + "spacing": "Small", + "maxLines": 2 + }, + { + "type": "TextBlock", + "$when": "${startDate != null}", + "text": "${formatDateTime(startDate, 'ddd, MMM d, yyyy')} at ${formatDateTime(startDate, 'h:mm tt')}", + "isSubtle": true, + "spacing": "Small", + "size": "Small" + }, + { + "type": "TextBlock", + "$when": "${address != null}", + "text": "${address}", + "isSubtle": true, + "spacing": "Small", + "size": "Small" + } + ], + "spacing": "None", + "selectAction": + { + "type": "Action.OpenUrl", + "url": "${url}" + } + }, + { + "type": "ActionSet", + "actions": + [ + { + "type": "Action.OpenUrl", + "title": "Tickets", + "url": "${url}" + }, + { + "type": "Action.OpenUrl", + "title": "Directions", + "url": "https://www.bing.com/maps/directions?rtp=adr.~pos.${geo.latitude}_${geo.longitude}" + } + ], + "$when": "${url != null && geo != null}" + }, + { + "type": "ActionSet", + "actions": + [ + { + "type": "Action.OpenUrl", + "title": "Tickets", + "url": "${url}" + } + ], + "$when": "${url != null && geo == null}" + }, + { + "type": "ActionSet", + "actions": + [ + { + "type": "Action.OpenUrl", + "title": "Directions", + "url": "https://www.bing.com/maps/directions?rtp=adr.~pos.${geo.latitude}_${geo.longitude}" + } + ], + "$when": "${geo != null && url == null}" + } + ] +} +``` ++|Property |Description | +||| +|`@type` | Event | +|image | URL of the image of for the event. | +|name | Name of the event. | +|startDate | Start date and time of the event in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format. | +|address | Address of the event. | +|geo.latitude | Latitude of the event location. | +|url | URL of the event's official website. | +|geo.longitude | Longitude of the event location. | ++Example of the unfurling experience for the event type: +++# [Local business](#tab/local-buisness) ++The following is a JSON code sample for the Local business template: ++```json ++{ + "type": "AdaptiveCard", + "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", + "version": "1.4", + "body": + [ + { + "type": "Container", + "items": + [ + { + "type": "Container", + "$when": "${image != null}", + "backgroundImage": + { + "url": "${image}", + "horizontalAlignment": "Center", + "verticalAlignment": "Center" + }, + "minHeight": "180px", + "bleed": true, + "items": + [] + }, + { + "type": "TextBlock", + "$when": "${name != null}", + "text": "${name}", + "size": "Medium", + "weight": "Bolder", + "wrap": true, + "spacing": "Small", + "maxLines": 2 + }, + { + "type": "ColumnSet", + "columns": + [ + { + "type": "Column", + "width": "auto", + "items": + [ + { + "type": "TextBlock", + "text": "${if(priceRange != null, priceRange + ' ┬╖', '')} ${aggregateRating.ratingValue} ΓÿàΓÿåΓÿåΓÿåΓÿå ${if(aggregateRating.reviewCount != null, '(' + aggregateRating.reviewCount + ')', '')}${if(aggregateRating.reviewCount == null && aggregateRating.ratingCount != null, '(' + aggregateRating.ratingCount + ')', '')}", + "isSubtle": true, + "spacing": "None", + "$when": "${float(aggregateRating.ratingValue) >= 1 && float(aggregateRating.ratingValue) < 2}", + "size": "Small", + "wrap": true + }, + { + "type": "TextBlock", + "text": "${if(priceRange != null, priceRange + ' ┬╖', '')} ${aggregateRating.ratingValue} ΓÿàΓÿàΓÿåΓÿåΓÿå ${if(aggregateRating.reviewCount != null, '(' + aggregateRating.reviewCount + ')', '')}${if(aggregateRating.reviewCount == null && aggregateRating.ratingCount != null, '(' + aggregateRating.ratingCount + ')', '')}", + "isSubtle": true, + "spacing": "None", + "$when": "${float(aggregateRating.ratingValue) >= 2 && float(aggregateRating.ratingValue) < 3}", + "size": "Small", + "wrap": true + }, + { + "type": "TextBlock", + "text": "${if(priceRange != null, priceRange + ' ┬╖', '')} ${aggregateRating.ratingValue} ΓÿàΓÿàΓÿàΓÿåΓÿå ${if(aggregateRating.reviewCount != null, '(' + aggregateRating.reviewCount + ')', '')}${if(aggregateRating.reviewCount == null && aggregateRating.ratingCount != null, '(' + aggregateRating.ratingCount + ')', '')}", + "isSubtle": true, + "spacing": "None", + "$when": "${float(aggregateRating.ratingValue) >= 3 && float(aggregateRating.ratingValue) < 4}", + "size": "Small", + "wrap": true + }, + { + "type": "TextBlock", + "text": "${if(priceRange != null, priceRange + ' ┬╖', '')} ${aggregateRating.ratingValue} ΓÿàΓÿàΓÿàΓÿàΓÿå ${if(aggregateRating.reviewCount != null, '(' + aggregateRating.reviewCount + ')', '')}${if(aggregateRating.reviewCount == null && aggregateRating.ratingCount != null, '(' + aggregateRating.ratingCount + ')', '')}", + "isSubtle": true, + "spacing": "None", + "$when": "${float(aggregateRating.ratingValue) >= 4 && float(aggregateRating.ratingValue) < 5}", + "size": "Small", + "wrap": true + }, + { + "type": "TextBlock", + "text": "${if(priceRange != null, priceRange + ' ┬╖', '')} ${aggregateRating.ratingValue} ΓÿàΓÿàΓÿàΓÿàΓÿà ${if(aggregateRating.reviewCount != null, '(' + aggregateRating.reviewCount + ')', '')}${if(aggregateRating.reviewCount == null && aggregateRating.ratingCount != null, '(' + aggregateRating.ratingCount + ')', '')}", + "isSubtle": true, + "spacing": "None", + "$when": "${float(aggregateRating.ratingValue) >= 5}", + "size": "Small", + "wrap": true + }, + { + "type": "TextBlock", + "text": "${priceRange}", + "isSubtle": true, + "spacing": "None", + "$when": "${aggregateRating == null && priceRange != null}", + "size": "Small", + "wrap": true + } + ], + "spacing": "Small" + } + ], + "spacing": "Small" + }, + { + "type": "TextBlock", + "text": "${address}", + "$when": "${address != null}", + "isSubtle": true, + "spacing": "Small", + "size": "Small" + } + ], + "spacing": "None", + "selectAction": + { + "type": "Action.OpenUrl", + "url": "${url}" + } + }, + { + "type": "ActionSet", + "actions": + [ + { + "type": "Action.OpenUrl", + "title": "Directions", + "url": "https://www.bing.com/maps/directions?rtp=adr.~pos.${geo.latitude}_${geo.longitude}" + } + ], + "$when": "${geo != null}" + }, + { + "type": "TextBlock", + "text": "[See more on web](${bingSearchUrl})", + "wrap": true, + "spacing": "Small", + "$when": "${bingSearchUrl != null}" + } + ] +} ++``` ++|Property |Description | +||| +|`@type` | Local business | +|image | URL of the image of for the business. | +|name | Name of the business. | +|aggregateRating.ratingValue | Average Rating of the business. | +|address | Physical address of the business. | +|geo.latitude | Latitude of the business location. | +|geo.longitude | Longitude of the business location. | +|aggregateRating.reviewCount | Average number of reviews for the business. | +|aggregateRating.ratingCount | Average number of ratings for the business. | +|menu|Either the actual menu as a structured representation, as text, or a URL of the menu.| +|priceRange|The price range of the business. For example, $$$.| ++Example of the unfurling experience for the local business type: +++# [Education](#tab/education) ++The following is a JSON code sample for the Education template: ++```json +{ + "type": "AdaptiveCard", + "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", + "version": "1.4", + "body": + [ + { + "type": "Container", + "$when": "${image != null}", + "backgroundImage": + { + "url": "${image}", + "horizontalAlignment": "Center", + "verticalAlignment": "Center" + }, + "minHeight": "180px", + "bleed": true, + "items": + [] + }, + { + "type": "TextBlock", + "$when": "${name != null}", + "text": "${name}", + "size": "Medium", + "weight": "Bolder", + "wrap": true, + "spacing": "Small", + "maxLines": 2 + }, + { + "type": "ColumnSet", + "columns": + [ + { + "type": "Column", + "width": "auto", + "items": + [ + { + "type": "TextBlock", + "text": "${if(priceRange != null, priceRange + ' ┬╖', '')} ${aggregateRating.ratingValue} ΓÿàΓÿåΓÿåΓÿåΓÿå ${if(aggregateRating.reviewCount != null, '(' + aggregateRating.reviewCount + ')', '')}${if(aggregateRating.reviewCount == null && aggregateRating.ratingCount != null, '(' + aggregateRating.ratingCount + ')', '')}", + "isSubtle": true, + "spacing": "None", + "$when": "${float(aggregateRating.ratingValue) >= 1 && float(aggregateRating.ratingValue) < 2}", + "size": "Small", + "wrap": true + }, + { + "type": "TextBlock", + "text": "${if(priceRange != null, priceRange + ' ┬╖', '')} ${aggregateRating.ratingValue} ΓÿàΓÿàΓÿåΓÿåΓÿå ${if(aggregateRating.reviewCount != null, '(' + aggregateRating.reviewCount + ')', '')}${if(aggregateRating.reviewCount == null && aggregateRating.ratingCount != null, '(' + aggregateRating.ratingCount + ')', '')}", + "isSubtle": true, + "spacing": "None", + "$when": "${float(aggregateRating.ratingValue) >= 2 && float(aggregateRating.ratingValue) < 3}", + "size": "Small", + "wrap": true + }, + { + "type": "TextBlock", + "text": "${if(priceRange != null, priceRange + ' ┬╖', '')} ${aggregateRating.ratingValue} ΓÿàΓÿàΓÿàΓÿåΓÿå ${if(aggregateRating.reviewCount != null, '(' + aggregateRating.reviewCount + ')', '')}${if(aggregateRating.reviewCount == null && aggregateRating.ratingCount != null, '(' + aggregateRating.ratingCount + ')', '')}", + "isSubtle": true, + "spacing": "None", + "$when": "${float(aggregateRating.ratingValue) >= 3 && float(aggregateRating.ratingValue) < 4}", + "size": "Small", + "wrap": true + }, + { + "type": "TextBlock", + "text": "${if(priceRange != null, priceRange + ' ┬╖', '')} ${aggregateRating.ratingValue} ΓÿàΓÿàΓÿàΓÿàΓÿå ${if(aggregateRating.reviewCount != null, '(' + aggregateRating.reviewCount + ')', '')}${if(aggregateRating.reviewCount == null && aggregateRating.ratingCount != null, '(' + aggregateRating.ratingCount + ')', '')}", + "isSubtle": true, + "spacing": "None", + "$when": "${float(aggregateRating.ratingValue) >= 4 && float(aggregateRating.ratingValue) < 5}", + "size": "Small", + "wrap": true + }, + { + "type": "TextBlock", + "text": "${if(priceRange != null, priceRange + ' ┬╖', '')} ${aggregateRating.ratingValue} ΓÿàΓÿàΓÿàΓÿàΓÿà ${if(aggregateRating.reviewCount != null, '(' + aggregateRating.reviewCount + ')', '')}${if(aggregateRating.reviewCount == null && aggregateRating.ratingCount != null, '(' + aggregateRating.ratingCount + ')', '')}", + "isSubtle": true, + "spacing": "None", + "$when": "${float(aggregateRating.ratingValue) >= 5}", + "size": "Small", + "wrap": true + }, + { + "type": "TextBlock", + "text": "${priceRange}", + "isSubtle": true, + "spacing": "None", + "$when": "${aggregateRating == null && priceRange != null}", + "size": "Small", + "wrap": true + } + ], + "spacing": "Small" + } + ], + "spacing": "Small" + } + ], + "selectAction": + { + "type": "Action.OpenUrl", + "url": "${url}" + } +} ++``` ++|Property |Description | +||| +|`@type` | Course | +|image | URL of the image of for the course. | +|name | Name of the course. | +|priceRange | Price of the course. | +|aggregateRating.ratingValue | Average rating of the course. | +|description | Summary about the course. | +|url | URL of the course website. | +|aggregateRating.reviewCount | Average number of reviews for the course. | +|aggregateRating.ratingCount | Average number of ratings for the course. | ++Example of the unfurling experience for the course type: +++# [Restaurant](#tab/restaurant) ++The following is a JSON code sample for the Restaurant template: ++```json ++{ + "type": "AdaptiveCard", + "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", + "version": "1.4", + "body": + [ + { + "type": "Container", + "items": + [ + { + "type": "Container", + "$when": "${image != null}", + "backgroundImage": + { + "url": "${image}", + "horizontalAlignment": "Center", + "verticalAlignment": "Center" + }, + "minHeight": "180px", + "bleed": true, + "items": + [] + }, + { + "type": "TextBlock", + "$when": "${name != null}", + "text": "${name}", + "size": "Medium", + "weight": "Bolder", + "wrap": true, + "spacing": "Small", + "maxLines": 2 + }, + { + "type": "ColumnSet", + "columns": + [ + { + "type": "Column", + "width": "auto", + "items": + [ + { + "type": "TextBlock", + "text": "${if(priceRange != null, priceRange + ' ┬╖', '')} ${aggregateRating.ratingValue} ΓÿàΓÿåΓÿåΓÿåΓÿå ${if(aggregateRating.reviewCount != null, '(' + aggregateRating.reviewCount + ')', '')}${if(aggregateRating.reviewCount == null && aggregateRating.ratingCount != null, '(' + aggregateRating.ratingCount + ')', '')}", + "isSubtle": true, + "spacing": "None", + "$when": "${float(aggregateRating.ratingValue) >= 1 && float(aggregateRating.ratingValue) < 2}", + "size": "Small", + "wrap": true + }, + { + "type": "TextBlock", + "text": "${if(priceRange != null, priceRange + ' ┬╖', '')} ${aggregateRating.ratingValue} ΓÿàΓÿàΓÿåΓÿåΓÿå ${if(aggregateRating.reviewCount != null, '(' + aggregateRating.reviewCount + ')', '')}${if(aggregateRating.reviewCount == null && aggregateRating.ratingCount != null, '(' + aggregateRating.ratingCount + ')', '')}", + "isSubtle": true, + "spacing": "None", + "$when": "${float(aggregateRating.ratingValue) >= 2 && float(aggregateRating.ratingValue) < 3}", + "size": "Small", + "wrap": true + }, + { + "type": "TextBlock", + "text": "${if(priceRange != null, priceRange + ' ┬╖', '')} ${aggregateRating.ratingValue} ΓÿàΓÿàΓÿàΓÿåΓÿå ${if(aggregateRating.reviewCount != null, '(' + aggregateRating.reviewCount + ')', '')}${if(aggregateRating.reviewCount == null && aggregateRating.ratingCount != null, '(' + aggregateRating.ratingCount + ')', '')}", + "isSubtle": true, + "spacing": "None", + "$when": "${float(aggregateRating.ratingValue) >= 3 && float(aggregateRating.ratingValue) < 4}", + "size": "Small", + "wrap": true + }, + { + "type": "TextBlock", + "text": "${if(priceRange != null, priceRange + ' ┬╖', '')} ${aggregateRating.ratingValue} ΓÿàΓÿàΓÿàΓÿàΓÿå ${if(aggregateRating.reviewCount != null, '(' + aggregateRating.reviewCount + ')', '')}${if(aggregateRating.reviewCount == null && aggregateRating.ratingCount != null, '(' + aggregateRating.ratingCount + ')', '')}", + "isSubtle": true, + "spacing": "None", + "$when": "${float(aggregateRating.ratingValue) >= 4 && float(aggregateRating.ratingValue) < 5}", + "size": "Small", + "wrap": true + }, + { + "type": "TextBlock", + "text": "${if(priceRange != null, priceRange + ' ┬╖', '')} ${aggregateRating.ratingValue} ΓÿàΓÿàΓÿàΓÿàΓÿà ${if(aggregateRating.reviewCount != null, '(' + aggregateRating.reviewCount + ')', '')}${if(aggregateRating.reviewCount == null && aggregateRating.ratingCount != null, '(' + aggregateRating.ratingCount + ')', '')}", + "isSubtle": true, + "spacing": "None", + "$when": "${float(aggregateRating.ratingValue) >= 5}", + "size": "Small", + "wrap": true + }, + { + "type": "TextBlock", + "text": "${priceRange}", + "isSubtle": true, + "spacing": "None", + "$when": "${aggregateRating == null && priceRange != null}", + "size": "Small", + "wrap": true + } + ], + "spacing": "Small" + } + ], + "spacing": "Small" + }, + { + "type": "TextBlock", + "text": "${address}", + "$when": "${address != null}", + "isSubtle": true, + "spacing": "Small", + "size": "Small", + "wrap": true + } + ], + "spacing": "None", + "selectAction": + { + "type": "Action.OpenUrl", + "url": "${url}" + } + }, + { + "type": "ActionSet", + "actions": + [ + { + "type": "Action.OpenUrl", + "title": "Menu", + "url": "${menu}" + }, + { + "type": "Action.OpenUrl", + "title": "Reservations", + "url": "${url}" + } + ], + "$when": "${menu != null && url != null}" + }, + { + "type": "ActionSet", + "actions": + [ + { + "type": "Action.OpenUrl", + "title": "Menu", + "url": "${menu}" + }, + { + "type": "Action.OpenUrl", + "title": "Directions", + "url": "https://www.bing.com/maps/directions?rtp=adr.~pos.${geo.latitude}_${geo.longitude}" + } + ], + "$when": "${menu != null && geo != null && url == null}" + }, + { + "type": "ActionSet", + "actions": + [ + { + "type": "Action.OpenUrl", + "title": "Reservations", + "url": "${url}" + }, + { + "type": "Action.OpenUrl", + "title": "Directions", + "url": "https://www.bing.com/maps/directions?rtp=adr.~pos.${geo.latitude}_${geo.longitude}" + } + ], + "$when": "${geo != null && url != null && menu == null}" + }, + { + "type": "ActionSet", + "actions": + [ + { + "type": "Action.OpenUrl", + "title": "Menu", + "url": "${menu}" + } + ], + "$when": "${menu != null && url == null && geo == null}" + }, + { + "type": "ActionSet", + "actions": + [ + { + "type": "Action.OpenUrl", + "title": "Reservations", + "url": "${url}" + } + ], + "$when": "${url != null && menu == null && geo == null}" + }, + { + "type": "ActionSet", + "actions": + [ + { + "type": "Action.OpenUrl", + "title": "Directions", + "url": "https://www.bing.com/maps/directions?rtp=adr.~pos.${geo.latitude}_${geo.longitude}" + } + ], + "$when": "${geo != null && menu == null && url == null}" + }, + { + "type": "TextBlock", + "text": "[See more on web](${bingSearchUrl})", + "wrap": true, + "spacing": "Small", + "$when": "${bingSearchUrl != null}" + } + ] +} ++``` ++|Property |Description | +||| +|`@type` | Restaurant | +|image | URL of the image of for the restaurant. | +|name | Name of the author. | +|priceRange | Price range of the restaurant. | +|aggregateRating.ratingValue | Average Rating of the restaurant. | +|address | Physical address of the restaurant. | +|url | Link to the restaurant's website. | +|aggregateRating.reviewCount | Average number of reviews for the restaurant. | +|aggregateRating.ratingCount | Average number of ratings for the restaurant. | +|streetAddress| The street address of the restaurant| ++Example of the unfurling experience for the restaurant type: ++++The following is an example of schema metadata mapped to the rich unfurling preview of an Adaptive Card: +++### Validate your website link ++Go to [schema.org validator](https://validator.schema.org/) to validate if your website link metadata is as per schema.org standards. After the validation is successful, paste the website link in Teams compose message area to view rich unfurl preview of your link. +++## See also ++[Add link unfurling](link-unfurling.md) |
| platform | Manifest Schema Dev Preview | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/resources/schema/manifest-schema-dev-preview.md | The `extensions.alternates` property is used to hide or prioritize specific in-m |`hide.customOfficeAddin`| | | | Configures how to hide an in-market add-in that isn't distributed through AppSource.| |`hide.customOfficeAddin.officeAddinId`|String | 64 characters | ✔️ | Specifies the ID of the in-market add-in to hide. The GUID is taken from the app manifest `id` property if the in-market add-in uses the JSON app manifest. The GUID is taken from the `<Id>` element if the in-market add-in uses the XML app manifest. | +## actions ++> [!NOTE] +> +> * Actions for Microsoft 365 is available in [public developer preview](../dev-preview/developer-preview-intro.md). +> +> * Actions is supported for Microsoft 365 (Office) app for web and desktop. ++The object is an array of action objects. This block is required only for solutions that provides Actions. ++|Name| Type| Maximum size | Required | Description| +|||||| +|`id`| String | 64 characters | ✔️ | An identifier string in the default locale that is used to catalog actions. Must be unique across all actions for this app. For example, `openDocInContoso`. | +|`displayName`| String | 64 characters | ✔️ | A display name for the action. Capitalize first letter and brand name. For example, Add to suppliers, Open in Contoso, and Request signatures.| +|`description`| String | | ✔️ | Specifies the description of the actions. | +|`intent`| String enum | | ✔️ | Specifies the type of intent. The supported enum values are `open`, `addTo`, and `custom`. | +|`handlers`| Array of objects | | ✔️ | An array of handler objects defines how Actions are managed. In the current public preview, add a single handler for each action. | ++### actions.handlers ++Defines the handlers of the Action. The handlers is an array of handler objects. Each Action must have at least one handler. ++|Name| Type| Maximum size | Required | Description| +|||||| +|`supportedObjects`| Object | | | Objects defining what objects can trigger this Action. | +|`type`| String enum | | ✔️ | Specifies the handler type of Actions. The supported enum value is `openPage`. | +|`pageInfo`| Object | | | Required if the handler type is `openPage`. Object containing metadata of the page to open. | ++### actions.handlers.supportedObjects ++The supported object types that can trigger this Action. ++|Name| Type| Maximum size | Required | Description| +|||||| +|`file`| Object | | | Supported file types. | +|`file.extensions`| Array of strings | | | Array of strings. File extensions of the file types the Action can trigger. For example, pdf and docx.| ++### actions.handlers.pageInfo ++Required if the handler type is `openPage`. Object containing metadata of the page to open. ++|Name| Type| Maximum size | Required | Description| +|||||| +|`PageId`| String | | | Maps to the `EntityId` of the static tab. | +|`SubPageId`| String | | | Maps to the `SubEntityId` of the static tab. | + ## See also * [Understand the Microsoft Teams app structure](~/concepts/design/app-structure.md) |
| platform | Auth Oauth Provider | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/authentication/auth-oauth-provider.md | Last updated 09/01/2022 [!INCLUDE [sdk-include](~/includes/sdk-include.md)] -You can support external or third-party (3P) OAuth providers, such as Google, GitHub, LinkedIn, and Facebook using the updated `authenticate()` API: +You can support external or third-party OAuth providers, such as Google, GitHub, LinkedIn, and Facebook using the updated `authenticate()` API: ```JavaScript function authenticate(authenticateParameters: AuthenticatePopUpParameters): Promise<string> ``` -The following are added to the `authenticate()` API to support external OAuth providers: +Add the following values to the `authenticate()` API to support external OAuth providers: * `isExternal` parameter * Three placeholder values in the existing `url` parameter The following table provides the list of `authenticate()` API parameters (`Authe | | | |`isExternal` | The type of parameter is Boolean, which indicates that the auth window opens in an external browser.| |`height` |The preferred height for the pop-up. The value can be ignored if outside the acceptable bounds.|-|`url` <br>|The URL of third-party app server for the authentication pop-up, with the following three parameter placeholders:</br> <br> - `oauthRedirectMethod`: Pass placeholder in `{}`. The Teams platform replaces this placeholder with a deeplink or web page, which updates the app server if the call comes from a mobile platform.</br> <br> - `authId`: UUID (Universal unique identifer) replaces this placeholder. The app server uses it to maintain session. <br> - `hostRedirectUrl`: pass placeholder in `{}`. The current platform and client replace this placeholder with a redirect URL, which redirects the user to the correct client after completing authentication. </br>| +|`url` <br>|The URL of third-party app server for the authentication pop-up, with the following three parameter placeholders:</br> <br> - `oauthRedirectMethod`: Pass placeholder in `{}`. The Teams platform replaces this placeholder with a deep link or webpage, which updates the app server if the call comes from a mobile platform.</br> <br> - `authId`: UUID (Universal unique identifer) replaces this placeholder. The app server uses it to maintain the session.</br> <br> - `hostRedirectUrl`: pass placeholder in `{}`. The current platform and client replace this placeholder with a redirect URL, which redirects the user to the correct client after completing authentication. </br>| |`width`|The preferred width for the pop-up. The value can be ignored if outside the acceptable bounds.| +>[!NOTE] +> The `authID` parameter is valid for the duration of the auth session, which has a default timeout of 120 seconds. + For more information on parameters, see [authenticate (AuthenticatePopUpParameters)](/javascript/api/@microsoft/teams-js/authentication#@microsoft-teams-js-authentication-authenticate) function. ## Add authentication to external browsers The following image provides the flow to add authentication to external browsers | Parameter | Description| | | |- | `oauthRedirectMethod` |Indicates how the third-party app must send the response of authentication request back to Teams, with one of the two values: deeplink or page.| - |`authId` | The request-id Teams created for this specific authentication request that needs to be sent back to Teams through deeplink.| + | `oauthRedirectMethod` |Indicates how the third-party app must send the response of authentication request back to Teams, with one of the two values: deep link or page.| + |`authId` | The request-id Teams creates for this specific authentication request that needs to be sent back to Teams through a deep link.| > [!TIP] > The app can marshal `authId`, `oauthRedirectMethod` in the OAuth `state` query parameter while generating the login URL for the OAuthProvider. The `state` contains the passed `authId` and `oauthRedirectMethod`, when OAuthProvider redirects back to the server and the app uses the values for sending authentication response back to Teams as described in step 6. The following image provides the flow to add authentication to external browsers 1. Sign in to external browser. The OAuth providers redirect back to the `redirect_uri` with the auth code and the state object. -1. The third-party app server handles the response and checks `oauthRedirectMethod`, which is returned from external OAuth provider in the state object to determine whether the response needs to be returned through the auth-callback deeplink or through web page that calls `notifySuccess()`. +1. The third-party app server handles the response and checks `oauthRedirectMethod`, which is returned from external OAuth provider in the state object to determine whether the response needs to be returned through the auth-callback deep link or through web page that calls `notifySuccess()`. ```JavaScript const state = JSON.parse(req.query.state) The following image provides the flow to add authentication to external browsers … ``` -1. The third-party app generates a deeplink for Teams mobile in the following format, and sends the auth code with the session ID back to Teams. +1. The third-party app generates a deep link for Teams mobile in the following format, and sends the auth code with the session ID back to Teams. ```JavaScript return res.redirect(`msteams://teams.microsoft.com/l/auth-callback?authId=${state.authId}&result=${req.query.code}`) |
| platform | Whats New | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/whats-new.md | Teams platform features that are available to all app developers. **2024 January** +* ***January 25, 2024***: [Use Micro-capability templates to show rich unfurl previews of your links without installing your app in Microsoft Teams](messaging-extensions/how-to/micro-capabilities-for-website-links.md). * ***January 24, 2024***: [Introduced advanced step-by-step guide to learn how to debug your AI chat bot using Teams App Test Tool.](sbs-teams-app-test-tool.yml) * ***January 19, 2024***: [Use / to invoke message extensions from command box in the new Teams client.](messaging-extensions/build-bot-based-message-extension.md) * ***January 04, 2024***: [Apps for Teams meetings are available in Department of Defense (DOD) environment.](apps-in-teams-meetings/teams-apps-in-meetings.md) Developer preview is a public program that provides early access to unreleased T **2024 January** -***January 12, 2024***: [Introduced Teams Toolkit command line interface v3.](toolkit/Teams-Toolkit-CLI.md) +* ***January 25, 2024***: [Actions help to integrate your app into your user's workflow by enabling easy discoverability and seamless interaction with the content](m365-apps/actions-in-m365.md). ++* ***January 12, 2024***: [Introduced Teams Toolkit command line interface v3.](toolkit/Teams-Toolkit-CLI.md) :::column-end::: :::row-end::: |