Deployment Guide - OfficeDev/microsoft-teams-apps-coworker-appreciation GitHub Wiki

Shoutout for Teams Prototype – Setup Guide

Step 1 – Creating the SharePoint Site

  1. Open https://portal.office.com and logon with a user who has permissions to create SharePoint Online sites.
  2. Click on the App Launcher and select SharePoint.
  3. Click Create Site. Select Team Site.
  4. Provide a name for the Site, in Privacy Settings select Private and make sure to select English as the language for the site. Click Next.
  5. Optionally provide additional users to be administrators for the site and click Finish.
  6. Save the URL for the site you created, you will need that in the future.
  7. Configure permissions appropriately. You need to give permissions to the users that will use the app.

Step 2 – Create the SharePoint Lists importing and using the ShoutOut_DeploySPLists flow

  1. Open https://powerautomate.microsoft.com and logon with a user who has permissions to create/import flows.
  2. On the left bar, click My Flows.
  3. On the upper bar, click Import.
  4. Click Upload and select the file ShoutOut_DeploySPLists_20201202212443.zip and click Open.
  5. Click Import.
  6. In Related Resources, click Select during import. If you used Power Automate with SharePoint before, you may have a SharePoint connection already created. If that is the case, select one of the available connections and click Save. If you do not have any SharePoint connections available, click Create New, Click New Connection and create a new SharePoint connection to be used in Power Automate.
  7. Click Import.
  8. When the Import process finish, click My Flows. You will see a new flow named ShoutOut_DeploySPLists.
  9. Select it and click Edit.
  10. Expand “Variable - Target Site for Lists” and replace the value with the one for the website created on Step 1.
  11. Click Save.
  12. Click My Flows, select the ShoutOut_DeploySPLists flow and click Run.
  13. Click Run Flow.
  14. Click Done.

Step 3 – Import the Power Apps and change SharePoint connections

  1. Open https://powerapps.microsoft.com and logon with a user who has permissions to create/import powerapps.
  2. Click Apps.
  3. Click Import canvas app.
  4. Click Upload.
  5. Select the Shoutouts_20201204001138.zip file and click Open.
  6. Click Import.
  7. In Related Resources, click Select during import. If you used Power Apps with SharePoint before, you may have a SharePoint connection already created. If that is the case, select one of the available connections and click Save. If you do not have any SharePoint connections available, click Create New, Click New Connection and create a new SharePoint connection to be used in Power Apps.
  8. Click Import.
  9. Click Apps.
  10. Select SHOUTOUT and click Edit.
  11. If required, click Allow.
  12. On the left bar, select Data.
  13. Remove the SharePoint connections with names Shoutout, and ShoutoutSummary.
  14. In the search box on top of the left bar, search for Sharepoint, and click Sharepoint.
  15. Select one of the available connections for Sharepoint, if required create one.
  16. On the right-hand bar, type the url of the SharePoint site created on the first step and click connect.
  17. Select Shoutout, and ShoutoutSummary and click Connect
  18. Save the App. Publish and share it with all users.

Step 4 – Configure the Teams App

  1. Open https://powerapps.microsoft.com and logon with a user who has permissions to create/import PowerApps.
  2. Click Apps.
  3. Select SHOUTOUT and click ... on the right side.
  4. Select Details.
  5. Copy the values available on App ID, and Web Link. You will need those on the subsequent steps.
  6. Extract the Shoutouts Teams App.zip file and edit the manifest.json file.
  7. Replace the tag [APPID] by value you have for App ID.
  8. Replace the tag [WEBLINK] by the value you have for Web Link.
  9. Save the manifest.json file.
  10. Zip the manifest.json, color.png and outline.png into a zip file. Make sure all the files are in the root of the zip file (no sub folders).
  11. Use the zip file to create an app policy to deploy the app or load it for test using the Apps button on your Teams client.

Step 5 – Import and configure the ShoutOut_Summary flow

  1. Open https://powerautomate.microsoft.com and logon with a user who has permissions to create/import flows.
  2. On the left bar, click My Flows.
  3. On the upper bar, click Import.
  4. Click Upload and select the file ShoutOut_Summary_20201202213334.zip and click Open.
  5. Click Import.
  6. In Related Resources, click Select during import. If you used Power Automate with SharePoint, Teams and Office 365 before, you may have connections already created. If that is the case, select one of the available connections and click Save. If you do not have any connections available, click Create New, Click New Connection and create a new connection to be used in Power Automate.
  7. Click Import.
  8. When the Import process finish, click My Flows. You will see a new flow named ShoutOut_Summary.
  9. Select it and click Edit.
  10. Expand “Initialize variable” and replace the value with the one for the website created on Step 1.
  11. Expand “When an item is created” and replace the value for Site Address by the value for the website created on Step 1.
  12. In List name, remove the current value and type Shoutout (if required).
  13. Click Save.

Step 6 – Power Automate Configuration

This step will update the button of the message sent to users with the address of the app installed in Teams. This configuration will allow users to click the button and be redirected to the app inside Teams.

  1. Open the zip file created on Step 4 and locate the manifest.json file. Open it in notepad and locate the name attribute, copy the value for short. Locate the staticTabs attribute and copy the values for entityid and websiteurl.
  2. Open https://powerautomate.microsoft.com and logon with a user who has permissions to create/import flows.
  3. On the left bar, click My Flows.
  4. Select ShoutOut_Summary and click Edit.
  5. Expand “Post your own adaptive card as the flow bot to a user”.
  6. In Message, search for https://www.teste.com and replace that value by the expression formed by the values you saved before in the following way:

https://teams.microsoft.com/l/entity/<entityid>/<short>?webUrl=<websiteurl>

Replace the values for <entityid>, <short> and <websiteurl> by the ones saved before.

  1. Click Save.
⚠️ **GitHub.com Fallback** ⚠️