Build Business Application for Microsoft Teams

Build Business Application for Microsoft Teams. 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:

  • Office 365 Training Portal
  • Covid-19 Communication Site

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.

Build Business Application for Microsoft Teams
Build Business Application Image 1
Build Business Application Image 2

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:

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.

Build Business Application for Microsoft Teams
Build Business Application Image 3

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.APPS REQUIRE CONFIGURATION

  Downloaded apps will not work immediately. You will need to reconfigure them to make them work on your environment. Follow the next steps of instruction.

Download Teams Apps templates:

 O365 Trainings app template

 Covid-19 app template

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.

Build Business Application for Microsoft Teams

2. In the next step choose Teams admin center.

Build Business Application for Microsoft Teams

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 .This is global change

 This change will be global. Only Teams Administrator will be able to upload the App.
Build Business Application for Microsoft Teams
Build Business Application Image 4

 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.

Build Business Application for Microsoft Teams

2. Get into the created folder and edit maniferst.json by choosing Edit with Notepad++ (1).

Build Business Application for Microsoft Teams

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 ?

For more news check out our resource centre

About the Author:

Szymon Bochniak working as Office 365 Delivery Manager managing digital transformation projects based on Microsoft 365 platform. Blogger, YouTuber, Podcaster and beekeeper in free time. You will learn more about him at office365atwork.com

Reference:

Bochniak, S. (2020). Build Business Application for Microsoft Teams. Available at: https://office365atwork.com/teams/build-application-based-on-sharepoint/ [Accessed: 26th November 2020].

Check out more great Microsoft Teams Content here or join our mailing list to stay up to date.

Share this on...

Rate this Post:

Share: