Building Microsoft Teams apps with SharePoint Pages – Part 2, Build your Own

This is Part 2 of a 2-part series which will show you how to make Teams applications using modern SharePoint pages. It’s not about the SharePoint Framework, which is a great option, but one that requires coding. This is the easy approach: if you can edit a SharePoint page, format a list, or make a Power App, you can make a Teams app.

Of course there are built-in tabs to allow adding a SharePoint page or PowerApp to Teams, but there are a number of advantages to building a proper Teams app:

  • You can distribute and manage it centrally in the Tenant App Catalog
  • Users can install it by name – no need to configure a website or Power Apps tab
  • You can use app policies to set permission and target the app to the users who need it, and optionally pin it to the Teams sidebar
  • You can be a hero for building a cool app (nobody has to know how easy it was!)

PART 1 – Introduces the Get Started app and explains Teams Tab principles

PART 2 (this article) – Shows how to use Teams App Studio and a new Tab Configuration web part to build your own static and configurable tabs

App Studio

Github was a good way to share the Get Started app, so anyone can get a copy and adapt it to their needs. But if you’re starting a new app, especially a simple one based on SharePoint pages, you might like to skip the JSON and go to a tool called App Studio.

App studio is itself a Teams app (how meta!) – and it includes a great manifest editor. You can install apps right from App Studio for testing, and then export the app package for installing into the tenant App Catalog.

Here are the installation instructions.

Begin by selecting the Manifest Editor tab and create a new manifest. The editor will open, where you can enter the app details.

SPTabAppStudio001

Scroll through all the details and fill them in; details about each entry are in the manifest schema. Continue reading

Building Microsoft Teams apps with SharePoint Pages – Part 1, Get Started

This is Part 1 of a 2-part series which will show you how to make Teams applications using modern SharePoint pages. It’s not about the SharePoint Framework, which is a great option, but one that requires coding. This is the easy approach: if you can edit a SharePoint page, format a list, or make a Power App, you can make a Teams app.

Of course there are built-in tabs to allow adding a SharePoint page or PowerApp to Teams, but there are a number of advantages to building a proper Teams app:

  • You can distribute and manage it centrally in the Tenant App Catalog
  • Users can install it by name – no need to configure a website or Power Apps tab
  • You can use app policies to set permission and target the app to the users who need it, and optionally pin it to the Teams sidebar
  • You can be a hero for building a cool app (nobody has to know how easy it was!)

PART 1 (this article) – Introduces the Get Started app and explains Teams Tab principles

PART 2 – Shows how to use Teams App Studio and a new Tab Configuration web part to build your own static and configurable tabs

Any SharePoint page can be a Teams Application

At events around the world lately, Karuana Gatimu has demonstrated a Get Started application that displays the Microsoft 365 Learning Pathways portal right in Microsoft Teams. Users who are new to M365 and need a little instruction can click on the app and gain access to a rich training portal.

LearningPathwaysInTeamsThe Learning Pathways training portal is right at the top of the Teams sidebar

Continue reading

Deep Linking to a SharePoint Framework Tab in Microsoft Teams

Image by Foundry Co from Pixabay

This is part 3 of a 3-part article series about building a “360 degree view” mashup for Microsoft Teams using the SharePoint Framework and React. The articles are:

  1. Part 1: 360 Degree Collaboration in Microsoft Teams
    This article introduces the 360 Degree pattern for collaborative applications, and explains a the workings of a sample solution based on SharePoint Framework and React
  2. Part 2: Working with Teams Content from an SPFx Tab
    This article explains how to access Team and channel content, such as the shared calendar and conversation, from a SharePoint Framework tab in Teams
  3. Part 3: Deep linking to a SharePoint Framework tab (this article)
    This article explains how to create a deep link that opens a Team, Channel, and tab, and passes information to your SharePoint Framework tab so you can display specific information

The series is based on a sample Teams tab written in SharePoint Framework which displays a mashup of information about customer visits.

What is a deep link?

In the world of web applications, a deep link is a link that not only selects a web page but also passes data to an application running on that page. For example, a link could open an Excel spreadsheet in a particular Team, rather than opening Teams and Excel in separate pages.

Continue reading

Working with Teams Content from an SPFx Tab

This is part 2 of a 3-part article series about building a “360 degree view” mashup for Microsoft Teams using the SharePoint Framework and React. The articles are:

  1. Part 1: 360 Degree Collaboration in Microsoft Teams
    This article introduces the 360 Degree pattern for collaborative applications, and explains a the workings of a sample solution based on SharePoint Framework and React
  2. Part 2: Working with Teams Content from an SPFx Tab (this article)
    This article explains how to access Team and channel content, such as the shared calendar and conversation, from a SharePoint Framework tab in Teams
  3. Part 3: Deep linking to a SharePoint Framework tab
    This article explains how to create a deep link that opens a Team, Channel, and tab, and passes information to your SharePoint Framework tab so you can display specific information

The series is based on a sample Teams tab written in SharePoint Framework which displays a mashup of information about customer visits.

Getting from the Tab to the Team, and beyond

As you may have heard, the great new way to write custom tabs for Microsoft Teams is to use the SharePoint Framework. One big SharePoint Framework web part makes a tab, and SharePoint takes care of hosting, single sign-on, configuration, and more.

To get started, follow this tutorial. It’s a great start, but it might leave you wondering how to interact with the Team your tab is running in, like read the meeting calendar or post a message. This article will explain how you can do that and also unlock the entire Office 365 Group from your code.

Continue reading

360 Degree Collaboration in Microsoft Teams

This is part 1 of a 3-part article series about building a “360 degree view” mashup for Microsoft Teams using the SharePoint Framework and React. The articles are:

  1. Part 1: 360 Degree Collaboration in Microsoft Teams (This article)
    This article introduces the 360 Degree pattern for collaborative applications, and explains a the workings of a sample solution based on SharePoint Framework and React
  2. Part 2: Working with Teams Content from an SPFx Tab
    This article explains how to access Team and channel content, such as the shared calendar and conversation, from a SharePoint Framework tab in Teams
  3. Part 3: Deep linking to a SharePoint Framework tab
    This article explains how to create a deep link that opens a Team, Channel, and tab, and passes information to your SharePoint Framework tab so you can display specific information

The series is based on a sample Teams tab written in SharePoint Framework which displays a mashup of information about customer visits. The Teams tab allows users to see one another’s schedules, and then brings together all the information needed for each visit. The same approach could be used for any kind of mash-up. Users can see at a glance what customer visits are approaching for each team member; when a visit is selected, the solution displays:

  • customer information (from the Northwind database OData service)
  • documents (from SharePoint)
  • recent transactions (mock)
  • a map (Bing maps)
  • current weather (Open Weather Map)
  • photos (from SharePoint)
  • a text box for sending messages to the Teams channel with deep links back to the selected visit

Continue reading

Calling Microsoft Graph from a single-page application: Part 2

This post was part of the “30 Days Microsoft Graph” blog series, now cross-posted to my personal blog. I was thrilled to have the opportunity to contribute to this excellent blog series. Many thanks to Brian Jackett, who organized this excellent blog series, and to Srinivas Varukala, who kindly edited my articles. In addition, thanks to others from the Graph and Azure AD teams who helped to test and QA the articles.

In Part 1 you learned how to register apps for both Azure AD v1 and v2 that can be used from the browser to enable Graph API calls. Today, we’ll use those registrations in some simple applications.

Continue reading

Calling Microsoft Graph from a single-page application: Part 1

This post was part of the “30 Days Microsoft Graph” blog series, now cross-posted to my personal blog. I was thrilled to have the opportunity to contribute to this excellent blog series. Many thanks to Brian Jackett, who organized 30 Days Microsoft Graph, and to Srinivas Varukala, who kindly edited my articles. In addition, thanks to others from the Graph and Azure AD teams who helped to test and QA the articles.

In this article and the next, you’ll learn how to call Microsoft Graph APIs directly from a web browser in a Single Page Application much the same way that the Day 15 article showed how to call Graph from a .Net Core Console Application. This article will walk you through updating your app registrations (for v1 and v2) so they’ll work from the browser; in Part 2 we’ll dig into the code.


Continue reading

Building SharePoint Site Designs with Themes and Azure Functions

This article is the sequel to Swooping into SharePoint Site Designs, in which I related my experience working behind the scenes on the world’s first SharePoint reality show! This time I’ll explain the code so you can build similar solutions if you so desire.

The sample shows how to build a site design and script for a simple department site, as created in the SharePoint Swoop video. A team of experts worked to redesign an Intranet site in just three days. This site design was developed behind the scenes to provide a template for all the company’s department sites.

Continue reading

Swooping into Site Designs

A few months ago a group of SharePoint MVPs gathered to film a new kind of reality TV show and remake a company’s Intranet. You may have seen it – SharePoint Swoop!

This is a story from behind the scenes,in which I got to make their work reusable with SharePoint Site Designs and Scripts. It was quite a thrill to be involved, even though I wasn’t there in person! I’ll start with the story, then dig into the details of Site Designs and Scripts.

Continue reading

Localized strings in solutions that span classic and modern SharePoint sites

This article builds on an earlier one, Building Headers and Footers that work on Classic and Modern sites. That article, with associated sample code, was about how to create a top menu and footer that work on both modern and classic SharePoint pages. On modern pages, the solution is a SharePoint Framework extension; on classic pages, it’s a stand-alone solution that just happens to use SharePoint Framework tooling like TypeScript, WebPack, and React. That allows a very high degree of common code between the classic and modern implementations.

2018-04-07_22-31-55
Figure 1

The good news is that my POC was successful, and the partner and their customer liked it!

The sample code has moved! It’s now in the SharePoint Framework Extensions repo.

I skipped over one key capability in my project, which was localization. The customer in this case is a large multi-national company, so it’s not too surprising they would want to show some information in the user’s preferred language.

Continue reading