WebViewer - Microsoft Teams Sample

WebViewer is a powerful JavaScript-based PDF Library that's part of the PDFTron PDF SDK. It provides a slick out-of-the-box responsive UI that interacts with the core library to view, annotate and manipulate PDFs that can be embedded into any web project.

This repo is specifically designed for any users interested in integrating WebViewer into Microsoft Teams project.

Demo

You can explore all of the functionality in our showcase.

Initial setup

Before you begin, make sure your development environment includes

• VS Code
• VS Code Teams Toolkit Extension
• You need a Microsoft 365 account and if you do not have one, you can sign up for the free Microsoft 365 Developer Program
• Node.js

Install

1. Open webviewer-angular-sample in VS Code
2. Install dependencies

npm install

Run

npm start

Use ngrok to make local running instance externally accessible

• Microsoft docs - Locally hosted
• ngrok Download

Install ngrok via Chocolatey

choco install ngrok

Add auth token (You generate your own token and input it here)

ngrok authtoken <token>

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

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

Setup Microsoft Teams project and sideload

1. Use the Teams Toolkit extension in VS Code and open the teams-project folder
2. Go to the teams-project\templates\appPackage\manifest.local.template.json file
3. Replace the text replace url here in file with your public endpoint from ngrok
4. Press F5 to run

Alternatively

1. Open Microsoft Teams
2. Click on Apps
3. Click on Manage your apps
4. Click on Upload a customised app
5. Upload the .zip file from the built project (usually in the packages folder or build folder)

Sideloading issues

Note: If there is an issue with Sideloading not being enabled, you must sign into the admin center 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

Resources

• PDFTron Angular Getting Started
• Microsoft docs - Consideration for Teams integration
• Microsoft docs - Overview
• Microsoft docs - Get started overview
• Microsoft docs - Teams toolkit
• Sign up Microsoft 365 developer subscriptions
• Microsoft admin center
• Microsoft 365 profile
• Microsoft docs - Teams sample projects
• Microsoft docs - Locally hosting and debug (ngrok)
• Microsoft docs - Manifest customization

---