Communication Hub for Teamwork – Microsoft Teams + SharePoint Online

Lately, we have been using collaboration tools depending on the type of communication. When it comes to Microsoft space, we use

1. Outlook and Exchange for persistent messaging.
2. Lync/Skype for Business for real-time communication.
3. SharePoint for effective document sharing and team collaboration.

A New-Gen Collaboration Tool

Above tools work in sync to cater our communication need whether it is message based, real-time or documents and other information sharing across boundaries. They work relative to each other but still they’re separate programs which we have to run and juggle between continuously. It demands a lot of context switching to access information organized in each tool i.e. to view email in Outlook or Exchange, Skype for chat and SharePoint workspace to access files or pages. Microsoft Teams aka Teams brings together all these facets of communication under a single roof.

Benefits of Microsoft Teams include:

• Real-time and quick access to messages, documents, notes, and meetings.
• Communication with teammates who are online.
• Reducing the need to send redundant emails while it provides a notification for uploaded documents across the channel.
• Conversation across or outside the organization through chats, meetings, file sharing, host audios, videos, and conference calls, thus relegating the need to send information using Skype or Outlook.
• Share and host files with Office 365 apps such as SharePoint, Word, Excel, Power BI and more.
• Increase teamwork and productivity by integrating Microsoft and various third-party services.
• Security and compliance capabilities.

Relation with SharePoint

Both Microsoft Teams and SharePoint team site are common in a way that both are streamlined by topic, project, collaboration or team of people. Teams and channels often follow a structure that is similar to the SharePoint team and project sites. To store the channel documents, it is adamant with the fact that every Microsoft Team has a modern team site working in SharePoint development. Also, there is an associated folder inside SharePoint document library for each channel in Microsoft Teams.

SharePoint Documents in MS Teams

There are a number of positive collaborating Teams’ documents in SharePoint. Files in Teams are easily discoverable in SharePoint search. SharePoint supports previewing documents for more than 300 file types which can be accessed directly from the Files tab in MS Teams. Users don’t have to juggle between tabs to access their files as there is an “Open in SharePoint” option that browses to the SharePoint modern team site.

SharePoint Pages in MS Teams

You can also add SharePoint page as a tab in MS Teams. Building a tab is a much simpler approach compared to the typical approach of building a whole website. SharePoint team site’ home page can appear in the same user interface thus providing the intuitive user experience.

It also provides an interface to add the whole document as a tab that is easily accessible by all the members in a team.

Conversations and News

SharePoint’ Discussion and Newsfeed lists satisfy conversations to some extent but due to their usability issues, they were never able to satisfy most customer needs. Now it is also possible to integrate Yammer with SharePoint within Office 365 but it does not provide an extensive approach.

You can directly have a conversation regarding a document and other shared information in MS Teams.

The conversation is also shown directly under the Conversations tab in the channel so that all the members of the team are aware of it.

Microsoft Teams also bubble up team news that helps transcend the conversation. To easily highlight an update and announce news items. SharePoint news can be configured as messages in the conversation thread and Modern SharePoint news as web parts in hub sites.

How to Determine if Your SharePoint Site is Connected to MS Teams?

First, you need to know whether you are on a modern or classic team site collection.

Click on the Settings gear on the root site to find Site information option is available or not. If you cannot see the option, you have a classic page on a classic site.

Classic Vs Modern Page

If Site information option is available, you are sure that you have a modern page. But wait, still, you may have a classic site. Click Site information link. A panel Edit site information will be opened on the right. If it contains Privacy settings then you have a modern team site connected to an Office 365 group. If not, you have a classic team site containing a modern page.

Site information panel – Classic site (modern page) vs modern site

Now, you can easily determine if you have a classic or a modern team site. To add a Team for a classic site, you need to groupify the site by adding an Office 365 group. For modern team site or classic team site after adding Office 365 group, you can easily add a Team.

Connect Office 365 Group with the Classic Team Site

You can control whether global or SharePoint admin can connect classic team site to Office 365 group.

• Log in to Office 365 using global or SharePoint admin account.
• Click app launcher icon at the top-left corner and select Admin to open Office 365 admin center.

• From the left pane, select SharePoint under Admin centers to open SharePoint admin center.
• Select Settings from the left pane.

• Click Allow site collection administrators to connect sites to new Office 365 groups option next to Connections from sites to Office 365 groups property. Click OK to save the changes.

Once the setting is applied, it enables site collection administrator to connect classic team site to Office 365 groups and an option to create a team with Microsoft Teams.

• Select Connect to new Office 365 Group from Settings menu.
• Click on the link from the group creation experience and select Let’s get started.
• If needed, update group name and email address and change privacy settings. Select the Connect group.
• Add additional owners and members, if needed inside Add and assign people panel. Click Finish to open new site home page.

Create a Team from an Existing Office 365 Group in Microsoft Teams

• Navigate to Microsoft Teams and click Join or create a team at the bottom. Then click Create a team button.
• To create a team based on the created group, click Create a team from an existing Office 365 group.
• Select the newly created group from the list of available Office 365 groups and click Choose team.
• Click + sign to add the home page as a tab to the channel.
• Choose “SharePoint” and select a page to display.
• As a result, the home page is displayed perfectly as a new tab.

SharePoint Web Parts as Tabs

You can use SharePoint Framework web parts as tabs in MS Teams. This will leverage SharePoint users to use Teams tab to easily reach their web-parts. This considerably eases Teams tab building process as the hosting of SharePoint Framework web parts is automatic without having to call external services. The tab also provides familiar web part edit panel to set tab properties.

Surfacing Your SharePoint Framework Solution as a Microsoft Teams Tab

You can build Microsoft Teams tabs using SharePoint Framework v1.8 and later.

Note: Use npm install -g @microsoft/generator-sharepoint command to install/update to latest SharePoint Framework version. The functionality is only applicable in targeted release tenants.

Create a New Web Part Project in Your Framework Environment

• Create a new web part by following Step 2 – To Create SPFx web part from this link.
• One can do modification in the Web Part as per his/her requirement.

Packaging and Deploying Your Web Part to SharePoint

Make sure that you are in the project directory inside the console.

• Bundle your solution by executing below command

gulp bundle –ship

• Package your solution by executing below command

gulp package-solution –ship

The above command creates a package teams-tab-webpart.sppkg in sharepoint/solution folder in your project directory.

Now, you will need to deploy the generated package inside your tenant app catalog.

• Navigate to the app catalog site for your tenant.
• Upload or simply drag and drop the client-side package to the app catalog i.e. Apps for SharePoint list.

SharePoint prompts a dialog to deploy client-side solution package because this is a full-trust solution.

You can observe that the domain in the dialog says SharePoint Online because the content is rendered from the Office 365 CDN or served up from tenant app-catalog, based on tenant settings.

• Click Deploy.

Please note that there are no error messages inside the App Package Error Message column inside the app catalog.

Once deployed, the web part is directly available across SharePoint Online sites.

Packaging and Deploying Your Web Part as a Microsoft Teams Tab

Your tenant needs to support Side Loading of external apps for Teams in order to deploy an app. You need to explicitly deploy Microsoft Teams app to a Team.

Below setting has to be enabled only once in a tenant to configure side-loading of apps in Teams.

Select Admin inside the app launcher to navigate to Microsoft 365 admin center.

Select Services & add-ins option under Services from the left menu.

Choose Microsoft Teams from the list of available services you can manage.

Under Tenant-wide Settings, expand Apps.

Note that the setting Allow sideloading of external apps is enabled under External Apps.

Click Save to save the changes.

Once we confirm that the side-loading is enabled, we can package Teams application to configure SharePoint Framework tab available in Microsoft Teams.

• Navigate to the Teams folder in the project directory for your solution.
• Create a zip file MyFirstSPFxTab.zip consisting manifest.json file and the images file in your preferred location.

Please note that manifest and images files should be at the root of the newly created zip file, else deployment will fail.

• Navigate to Microsoft Teams for your tenant by selecting Teams in the app launcher.
• Select a team you want to use to test the functionality and click Manage Team from the … menu.
• Navigate to the Apps tab.
• Click Upload a custom app from the bottom-right corner of Apps page.

Note: In the case where the setting is not available, verify whether sideloading is enabled in your tenant.

• Open MyFirstSPFxTab.zip from the Teams folder under your project directory.
• Make sure whether the app is visible in the list of available apps. You can observe a custom image along with the description of the solution.
• Go to a channel under the team where you uploaded the zip file.
• Click + in order to add a new tab to the channel.
• Select your newly created custom tab MyFirstTeamTab from the list of available apps.
• Observe “MyFirstTeamsTab” dialog containing exposed properties to parameterize the tab.

Note: You may be unable to change default properties of the tab or there may be issues adding a web part to the tab, as there is a known bug expected to be addressed by Microsoft in upcoming days.

You can see the code rendering in Microsoft Teams context after adding the custom tab on the channel. Web part theme will be as per respective SharePoint site.

Conclusion

MS Teams provides an effective way for users to collaborate in a team hub by bringing SharePoint functionality into it. By now, you know that SharePoint Online and Microsoft Teams are better together!