Guideline | Integrate Sidebar and Microsoft Teams Revision Log... (Last updated: 23-Jan-2023) VersionPublishedSummary of Changes1.025-Jan-2023Initial version Note: The guideline below is intended for readers in the SE, SRE staff. Overview This article describes the steps required to create a Microsoft Teams developer account, Azure app and a Microsoft Teams app. Create the Microsoft Teams developer account and Azure app Create the Microsoft Teams account and Azure app as part of the Sidebar with Microsoft Teams integration. Role required: admin Procedure 1. Register your Microsoft developer account. For more information, see https://developer.microsoft.com/en-us/microsoft-365/dev-program. 2. Register your application in Azure portal. For instructions on registering an application, see Tutorial: Register an app with Azure Active Directory in the Microsoft Docs. 3. In the Microsoft Azure portal, copy and record the Directory ID for later use. For more information, see Get tenant and app ID values for signing in in Microsoft Azure documentation. 4. Copy and record the Application ID for later use. 5. For redirect URLs, go to Authentication module and add the instance's URL to the list of Redirect URLs. If you don't see the single-page application accordion, click Add a platform to add it. 6. Add all the following API permissions to the app.7. Add meters to monitor costs billed for the metered Microsoft Teams APIs. For instructions: see https://learn.microsoft.com/en-us/graph/teams-licenses#payment-and-billing Create the Microsoft Teams App Create your Microsoft Teams app as part of integrating Sidebar with Microsoft Teams. Role required: admin Procedure 1. Log in to the Microsoft Teams client at https://teams.microsoft.com/. 2. Select the More added apps icon(3 dot button) from the left-side panel. 3. Select or search for Developer Portal. 4. On the Developer Portal screen, select the Apps tab, then New app. 5. Enter the basic information. 6. Copy the Application (client) ID from the Azure portal to the Application (client) ID field. (You may need scroll down the page to find the Application (client) ID field) 7. Select Save. 8. Navigate to App features and select Group and channel app. Select Group Chat in Scope section and provide your Configuration URL (this URL does not affect any functionality). 9. Complete the form and select Save. 10. Navigate to the App package screen and select "Download app package" at the top of the page. 11. Select Apps from the left-side menu and select Manage your apps at the bottom of second layer. 12. Select Upload an app and submit an app to your organization. 13. Select the downloaded zip file from the step 8. 14. Sign in to the Microsoft Teams admin page at https://admin.teams.microsoft.com/. 15. Select Teams Apps then Manage apps from the left panel. 16. Search for the uploaded app by name. 17. Open the app from Teams admin and select Publish. 18. Open the app details page from Teams admin and copy the App ID. <!-- .SOKMKBArticle div.margin { padding: 10px 40px 40px 30px; color: #283d40; font-family: Century Gothic, Verdana, Helvetica, Arial, sans-serif; font-size: 10pt; } .SOKMKBArticle div.fed{ background-color: #f5f8fa; border: 1px solid; border-color: #bfbfbf; padding: 10px; } .SOKMKBArticle .FedRestricted{ background-color: #c00000; color: #ffffff; padding: 10px; margin-top: 10px; text-align: center; font-size: 14pt; font-weight: bold; } .SOKMKBArticle .CustRestricted{ background-color: #ff0000; color: #ffffff; padding: 10px; margin-top: 10px; text-align: center; font-size: 14pt; font-weight: bold; } .SOKMKBArticle .SNRestricted{ background-color: #ea700d; color: #ffffff; padding: 10px; margin-top: 10px; text-align: center; font-size: 14pt; font-weight: bold; } .SOKMKBArticle .SNConfidential{ background-color: #ffc000; color: #ffffff; padding: 10px; margin-top: 10px; text-align: center; font-size: 14pt; font-weight: bold; } .SOKMKBArticle .Public{ background-color: #00b050; color: #ffffff; padding: 10px; margin-top: 10px; text-align: center; font-size: 14pt; font-weight: bold; } .SOKMKBArticle table.tocTable { border: 1px solid; border-color: #f2f2f2; background-color: #f2f2f2; padding-top: .6em; padding-bottom: .6em; padding-left: .9em; padding-right: .6em; } .SOKMKBArticle table.noteTable { align: left; border: none; border-color: #81b5a1; background-color: #f2f2f2; width: 100%; border-spacing: 2; font-size: 11px; } .SOKMKBArticle table.internalTable { border-top: 1px solid; border-left: 1px solid; border-color: #81b5a1; width: 100%; border-spacing: 1px; } .SOKMKBArticle .sp td { border-bottom: 1px solid; border-right: 1px solid; border-color: #81b5a1; background-color: #ffffff; height: 20px; padding-top: .5em; padding-bottom: .5em; padding-left: .5em; padding-right: .5em; } .SOKMKBArticle .sphr td { border-right: 1px solid; border-bottom: 1px solid; border-color: #81b5a1; background-color: rgb(245, 245, 245); padding-top: .5em; padding-bottom: .5em; padding-left: .5em; padding-right: .5em; height: 20px; } .SOKMKBArticle .sh td { border-bottom: 1px solid; border-right: 1px solid; border-color: #81b5a1; background-color: #81b5a1; color: #ffffff; height: 20px; padding-top: .5em; padding-bottom: .5em; padding-left: .5em; padding-right: .5em; } .SOKMKBArticle th { padding-top: .5em; padding-bottom: .5em; padding-left: .5em; padding-right: .5em; border-bottom: 1px solid; border-right: 1px solid; border-color: #81b5a1; background-color: #283d40; font-family: Century Gothic, Verdana, Helvetica, Arial, sans-serif; font-size: 10pt; color: #ffffff; height: 20px; } .SOKMKBArticle td { border-color: #81b5a1; margin: 5px 5px 5px 5px; font-family: Century Gothic, Verdana, Helvetica, Arial, sans-serif; font-size: 10pt; color: #283d40; } .SOKMKBArticle p { color: #283d40; font-family: Century Gothic, Verdana, Helvetica, Arial, sans-serif; } .SOKMKBArticle li { color: #283d40; font-family: Century Gothic, Verdana, Helvetica, Arial, sans-serif; font-size: 10pt; line-height: 1.5; } .SOKMKBArticle pre { font-family: Courier New; } .SOKMKBArticle div { font-family: Century Gothic, Verdana, Helvetica, Arial, sans-serif; } .SOKMKBArticle hr { border-top-width: 1px; border-top-style: solid; border-top-color: #81b5a1; } .SOKMKBArticle a { color: #81b5a1; } .SOKMKBArticle a.two:link { padding: 15px 45px 15px 45px; margin-top: 20px; color: #ffffff; text-align: center; background-color: #1F8476; border: 1px solid; border-color: #1F8476; } .SOKMKBArticle a.two:visited { padding: 15px 45px 15px 45px; margin-top: 20px; color: #ffffff; text-align: center; background-color: #1F8476; border: 1px solid; border-color: #1F8476; } .SOKMKBArticle a.two:hover { color: #ffffff; background-color: #259b8a; } .SOKMKBArticle .button { padding: 15px 45px 15px 45px; margin-top: 20px; color: #ffffff; text-align: center; background-color: #1F8476; border: 1px solid; border-color: #1F8476; } .SOKMKBArticle .title { font-family: Century Gothic, Verdana, Helvetica, Arial, sans-serif; color: #81b5a1; font-size: 30pt; } .SOKMKBArticle .hd1 { font-family: Century Gothic, Verdana, Helvetica, Arial, sans-serif; color: #283d40; font-size: 20pt; border-bottom: 1px solid; border-bottom-color: #81b5a1; text-decoration: none; } .SOKMKBArticle h1 { font-family: Century Gothic, Verdana, Helvetica, Arial, sans-serif; color: #283d40; font-size: 20pt; font-weight: normal; border-bottom: 1px solid; border-bottom-color: #81b5a1; text-decoration: none; } .SOKMKBArticle .hd2 { font-family: Century Gothic, Verdana, Helvetica, Arial, sans-serif; color: #68a1af; font-weight: bold; font-size: 16pt; text-decoration: none; } .SOKMKBArticle h2 { font-family: Century Gothic, Verdana, Helvetica, Arial, sans-serif; color: #68a1af; font-weight: bold; font-size: 16pt; font-weight: normal; text-decoration: none; } .SOKMKBArticle .hd3 { font-family: Century Gothic, Verdana, Helvetica, Arial, sans-serif; color: #283d40; font-weight: normal; font-size: 14pt; text-decoration: none; } .SOKMKBArticle h3 { font-family: Century Gothic, Verdana, Helvetica, Arial, sans-serif; color: #283d40; font-weight: normal; font-size: 14pt; text-decoration: none; } .SOKMKBArticle .hd4 { font-family: Century Gothic, Verdana, Helvetica, Arial, sans-serif; color: #283d40; font-weight: normal; font-size: 12pt; text-decoration: none; } .SOKMKBArticle h4 { font-family: Century Gothic, Verdana, Helvetica, Arial, sans-serif; color: #283d40; font-weight: normal; font-size: 12pt; text-decoration: none; } .SOKMKBArticle .hd5 { font-family: Century Gothic, Verdana, Helvetica, Arial, sans-serif; color: #283d40; font-weight: bold; font-size: 10pt; text-decoration: bold; } .SOKMKBArticle h5 { font-family: Century Gothic, Verdana, Helvetica, Arial, sans-serif; color: #283d40; font-weight: bold; font-size: 10pt; text-decoration: bold; } .SOKMKBArticle .hd6 { font-family: Century Gothic, Verdana, Helvetica, Arial, sans-serif; color: #283d40; font-weight: normal; font-size: 10pt; text-decoration: underline; } .SOKMKBArticle h6 { font-family: Century Gothic, Verdana, Helvetica, Arial, sans-serif; color: #283d40; font-weight: normal; font-size: 10pt; text-decoration: underline; } .SOKMKBArticle details { font-size: 10pt; } .SOKMKBArticle details[open] summary ~ * { animation: sweep .5s; margin-top: 0; padding-top: 10px; } @keyframes sweep { 0% {opacity: 0; margin-top: -10px} 100% {opacity: 1; margin-top: 0px} } .SOKMKBArticle summary { cursor: pointer; outline: none; margin-bottom: 3px; } .SOKMKBArticle .summary { background-color: #81b5a1; font-size: 10px; color: white; cursor: pointer; padding: 5px; width: 100%; border: none; text-align: left; outline: none; vertical-align: top; } -->