Some test text!

May 10 2022

How to View, Edit, and Annotate PDFs in Microsoft Teams

by Derek Chong

Hero banner for Microsoft Teams blog

Microsoft Teams is a popular collaboration app for businesses; more than 145 million monthly active users and 500,000 organizations rely on Teams. Previously, however, enabling interaction on PDFs in Teams was not easy or required a separate software service integration.

Well, in this guide, we show an easy way to boost productivity and keep users engaged, by enabling a full-fledged document experience right in their Microsoft Teams, no additional SaaS licenses required. We’ll show you how to integrate PDFTron’s WebViewer sample directly with MS Teams as a Teams App in a few steps.

WebViewer allows you to open PDFs, annotate, fill, sign, edit, and so much more in Teams. Check out the full

. WebViewer also opens Office formats – Word, Excel, and PowerPoint. And it will load up images, HTML, CAD, video, and other
file formats
as well.

Note: Since we’re an SDK, you can later
completely customize
the UI to your desired feature set, look and feel.

The

can be found on GitHub.

How Do Apps Work in Teams?

A JSON manifest file is generated when apps are made for Microsoft Teams. The manifest file contains the information the user needs to use the Teams app, such as the web pages to navigate to for the Teams Tabs. Tabs in Teams are an <iframe>, so adding both new and existing web apps is possible.

Prerequisites

The following needs to be installed for this guide:

  • VS Code -
    Download
  • VS Code Teams Toolkit Extension -
    MSFT Setup Guide
  • Microsoft 365 Account with a valid subscription or join Microsoft 365 Developer Program.
    Join here
    .
  • Download
    Node.js

PDFTron Sample

First, we need to set up WebViewer. For this example, we can explore PDFTron's

samples for a preferred web framework and follow the guides to build WebViewer.

JavaScript PDF Viewer Library Integrations

Use ngrok to Make Local Running Instances Externally Accessible

The WebViewer sample needs to be publicly available using HTTPS endpoints for Microsoft Teams. This can be done quickly with the tool

for testing and developing your app.

Microsoft provides in more detail why ngrok should be used for the setup:

→ Microsoft instructions to

To install ngrok, follow the steps below found on

.com.

  1. Install ngrok via Chocolatey
  2. Add auth token (You generate your token and input it here)

ngrok authtoken <token>

  1. Start a tunnel (Note: Change port “4200” as needed)

ngrok http 4200 --host-header=localhost:4200

Start a New Project for Microsoft Teams and Integrate

Next, we start a new project for Microsoft Teams and connect our tunnel.

  1. In VS Code, select the extension Teams Toolkit
  2. Create a new Teams app
  3. Select Edit manifest file underneath Development header or go to the manifest.local.template.json
  4. Edit all the URLs to match the new externally accessible URL from ngrok
  5. F5 to build and run
  6. Add the app
Steps to start new MS Teams project in VS Code.

You should have something like this at the end!

MS Teams viewer project final resut.

Sideloading Issues

Note: If there is an issue with Sideloading not being enabled, you must sign in to the

as the admin and enable it.

  1. At the admin center, select Teams
  2. Expand Teams apps
  3. Underneath go to Setup policies
  4. Enable Upload custom apps
Navigating the MS Teams Admin Center.

How to navigate the Admin Center (steps 1-4 as above)

Wrap Up

And that's it! We hope this guide makes integrating a complete PDF and document experience with Microsoft Teams even easier.

If you’re interested in trying other features with PDFTron WebViewer, check out our

.

As always, if you have any questions, or run into any issues, don’t hesitate to reach out

. We’re always happy to hear from you!

Related articles

thumbnail

How to View, Edit, and Annotate PDFs in Microsoft Teams

This blog shows you how easy it is to add full-fledged PDF document viewer, annotator, and editor to Microsoft Teams as a Teams App using PDFTron's WebViewer sample.

thumbnail

Our Comparison Tests for PDF Table Detection and Extraction Are Done – and the Results Are Compelling!

This blog explores how PDFTron's new, AI-based table detection and extraction system compared to three other leading commercial systems in accurately detecting tables and table content in PDFs. We cover our tests, methodology, and results.

thumbnail

WebViewer Collaboration 2.0 - A New and Improved Way of Integrating Document Collaboration Into Your Application

In this blog we introduce all the new features in WebViewer Collaboration 2.0, including versioning and automatic SQL configuration

DEREK CHONG

Windows UI Developer

Experience with .NET (C#, TypeScript, UWP, Angular)

Related Products

Share this post

Upcoming Webinar: How Developers Add Office Viewing Without Downloading | June 9th at 11 am PT

PDFTron SDK

The Platform

NEW

© 2022 PDFTron Systems Inc. All rights reserved.

Privacy

Terms of Use