Microsoft Teams is one of the most commonly used app in Office 365
You use this platform to deliver additions applications for business users. Existing SharePoint apps can be easily delivered to your colleagues as a Teams App.
Microsoft Teams is the application that is today used by everyone. It gives you really great possibility to reach most of your organization using Teams App. You do that by extending it using the custom Teams App. If you will connect it with existing SharePoint portals you can easily build really great and functional solution.
To make it easier I did prepare two applications that you will be able to quickly deploy for the organization in Teams:
You will be able to deploy them based on a few steps. The configuration will require some technical setup, so the assistance of your IT Team could be needed.
Source of this idea
The idea of using SharePoint as a Team App and base for shared applications in this article comes from a great series of articles from Bob German:
- Building Microsoft Teams apps with SharePoint Pages – Part 1, Get Started
- Building Microsoft Teams apps with SharePoint Pages – Part 2, Build your Own
- Update to Building Microsoft Teams apps with SharePoint Pages
Applications are based on Bobs application shared on GitHub.
Preparation of the environment
You will need to prepare yourself before you will be able to execute your first Teams App.
1. Install necessary applications on your computer
To configure Teams App to your Office 365 you will need to install to applications on your local computer. Both tools are free and you use them for commercial purpose:
- Notepad ++ – simple code editor. You can also use traditional Notepad or another code editor if you will.
- 7-Zip – Packing the file into ZIP format. Of course, you can use an alternative solution.
Download the tools and install them on your computer.
2. Deploy SharePoint Applications on your Office 365
In shared applications, I predefine configuration to support two great SharePoint Site templates but you can use them to create your own apps. You can use them to build Teams App for your Intranet Portal or site with digitalized business processes. Setup of your own app will require building a new app and more complex work with the code.
Deploy SharePoint Sites
In our case we will build new SharePoint sites or use existing ones created using:
? Office 365 Training Portal site template
? Covid-19 crisis Communication site template
Follow instructions in the articles and deploy the sites on your Office 365 environment.
☝ Note addresses of both sites.
3. Generate unique IDs for your Apps
To deploy applications on Teams you will need to generate for the unique IDs. To do that visit site https://www.guidgenerator.com/ and choose Generate some Guids! button. You will need to have unique GUIDs. Every new application will require a unique number.
☝ Keep them saved.
4. Download the Teams Apps templates
I did prepare for you Teams App templates which you can use to add both SharePoint Sites to your Microsoft Teams environment.
Download Teams Apps templates:
Both archives will be needed in the next steps.
4. Setup of your Office 365 tenant configuration
You will have to change the global Office 365 configuration to allow the deployment of custom Teams Apps by Teams Administrator.
1. At first open Admin App at the office.com site.
2. In the next step choose Teams admin center.
3. In the Teams administration center choose Teams apps (1) , Setup policies (2), and Global org-wide policies (3). There Turn on (4) option Upload custom apps .
☝ Remember this location. You will need to get back here later.
Configuration of the apps
Before you will deploy the apps you need to configure them for your environment.
1. After downloading the apps you will need to Extract (2) them using 7-zip software.
2. Get into the created folder and edit maniferst.json by choosing Edit with Notepad++ (1).
3. Now you will have to change the code of the manifest.json file. You will need to do a few changes.
☝ Be very accurate about your changes and prepare generated GUIDs and your SharePoint sites addresses.
You have to replace the information in the files:
- At first, change the ID of the app for one of GUIDs you generate earlier.
- Update your Office 365 main address
- Update your SharePoint site address
The simplest and safest way to update the code is to use Replace (2) option. you can also execute it by using Ctrl + H keyboard shortcut.
To update the file you have to set existing data (1) and new values (2) and than choose Replace All (3).
Below I prepared a list of the element you need to replace:
Covid-19 App
- Replace ID:
- 531e7f6c-198a-4c40-8d8b-5d6a8281efd0
- your generated GUID
- Office 365 tenant address
- https://o365awdev.
- https://YourTenantName.
- SharePoint site address
- /sites/crisismanagement
- /sites/YourSiteName
Office 365 Trainings App
- Replace ID
- c59c137c-18fc-45ed-a6b3-40d1d435c640
- your generated GUID
- Office 365 tenant address
- https://o365awdev.
- https://YourTenantName.
- SharePoint site address
- /sites/O365CL
- /sites/YourSiteName
? Save the changes on manifest.json files for both Apps.
4. In the final step you have to pack all files to Zip archive. You will need to repeat that operation for both apps.
☝ Remember to do the operation on the files itself, not on the folder level.
You need o select all files (1), and select Add to “O365Trainings.zip” (3).
You will receive the Zip package which is ready to be deployed to your Microsoft Teams.
☝ Do not confuse new packages created by You with old ones downloaded from the blog ?
Deployment of the app
When personalized apps are ready for your Office 365 environment you can deploy them to Microsoft Teams.
1. Deployment of the apps
To deploy the application you need to upload it first to Apps (1) by selecting Upload a custom app (2) and Upload for yourtenantname (3).
After a few seconds your application will be added. Click on it and choose Add.
Your App will be added to Microsoft Team. Repeat that operation with the second app.
2. Pinning the apps in the navigation
As you can see on the above screen app will be added by hidden from the main navigation. To display them to the end-users you will need to pin them in the navigation.
Navigate to the Teams Admin Center and go through: Teams apps (1) -> Setup policies (2) -> Global (3) -> Add apps (4). In the final step search for the app by the name (5) and Add (6) it.
You navigate the position of the selected app. When you will set the final positions just Save the changes.
Finally, you can get access to great communication solutions provided on Microsoft Teams. Uffff ?
