Blog Post

How to Build a Microsoft Teams PDF Viewer with PSPDFKit

Hulya Masharipov
Illustration: How to Build a Microsoft Teams PDF Viewer with PSPDFKit

In this post, you’ll learn how to build a Microsoft Teams PDF Viewer by integrating PSPDFKit for Web into Microsoft Teams as a tab app. By the end of this post, you’ll be able to use a web browser to directly open PDF documents in a Microsoft Teams tab, as well as display, edit, and save them back to Teams.

Microsoft Teams is a robust tool for real-time collaboration and communication. It offers online meetings, group conversations, private chats, meetings, calls, and file sharing.

Microsoft Teams Integration with PSPDFKit

PSPDFKit for Teams is a wrapper on top of PSPDFKit for Web Standalone, which is a client-side JavaScript library for viewing and editing PDF files directly in a web browser.

PSPDFKit for Teams shares the same APIs as PSPDFKit for Web Standalone, so please use the web documentation when customizing your Teams application.

Try Our No-Code App

integration diagram

Starting with SharePoint v1.8, Microsoft made it possible to build tab apps using a SharePoint Online web part.

So, to get started using a custom tab in Microsoft Teams, first you need to create a SharePoint Online web part.

Getting Started

To get started, you’ll need:

Setup

  1. Clone the pspdfkit-sp-online-webpart repository from GitHub.

Navigate to the directory where you want to place the SharePoint integration, and type the following command in your command line/terminal:

git clone https://github.com/PSPDFKit/pspdfkit-sp-online-webpart.git

Alternatively, you can download the project as a .zip file without cloning the project.

  1. Navigate to admin.microsoft.com and sign in to your tenant account.

To make the SharePoint catalog available, click Show All… in the side navigation, and find Admin centers > SharePoint. This will direct you to SharePoint Admin portal.

Follow along with this tutorial from Microsoft to configure your SharePoint tenant and create your new team site.

  1. To configure your URL, go to the config/serve.json file in your pspdfkit-sp-online-webpart project and change enter-your-SharePoint-site to the URL of your SharePoint site:

"initialPage": "https://enter-your-SharePoint-site/_layouts/workbench.aspx",
  1. Now, set up your development environment to build a client-side web part.

Don’t forget to execute gulp trust-dev-cert from the root of your project to trust the self-signed developer certificate.

  1. Change your directory into the pspdfkit-sp-online-webpart directory:

cd pspdfkit-sp-online-webpart
  1. Open the project in your preferred code editor and check which version of Node.js you’re using:

node --version
Information

Make sure you have Node.js version 16.19.0 installed. If you’re using a different version of Node, switch to Node.js version 16.19.0 via nvm (node version manager) or asdf.

💡 Tip: If you’re using asdf, you can switch the Node version locally for this project. First, install Node.js 16.19.0 using the following command:

asdf install nodejs 16.19.0

Now, run asdf local nodejs 16.19.0 to switch to the Node.js version you just installed. This will create a .tool-versions file in the root of your project with Node version 16.19.0. If you encounter any issues, check out the asdf documentation.

💡 Tip: If you’re using nvm, you can switch to Node.js 16.19.0 by typing the following command:

nvm use 16.19.0
  1. Install the dependencies:

npm install
  1. To serve the project, type:

npm run serve

The browser will open a new tab with your SharePoint account.

To configure your URL, go to the config/serve.json file in your pspdfkit-sp-online-webpart project and change the initialPage property to the URL of your SharePoint site.

Integrating PSPDFKit into SharePoint

PSPDFKit can be added to your project as a widget.

Refer to the following video for information on how to integrate the PSPDFKit widget into your project, or continue with the instructions.

  1. On your Home page, in the upper right-hand corner, find the Edit button.

  2. Click the Edit button. This will open the Editing interface.

  3. To add the PSPDFKit widget, hover over where you want to place it. This will display a plus icon. When you click the plus icon, it’ll open a dialog box with the possible web parts you can incorporate into your project.

  4. Search for the PSPDFKit widget and click on it.

adding pspdfkit widget

  1. Find the edit button with the pencil icon, and click Select Document from the open panel.

pspdfkit widget properties

  1. Choose your document and click Open. Now you’ll be able to see the PSPDFKit widget in your project like in the video above.

pspdfkit preview

Using for Production

For production, you need to follow these steps to deploy into your SharePoint environment.

  1. Run npm run bundle and then npm run package.

  2. Then, follow the steps outlined in this SharePoint guide for packaging and deploying your web part. If a previous installation already exists, it’s recommended to remove it before proceeding.

Information

Please make sure to select Make this solution available to all sites in the organization. This appears in the confirmation dialog you’ll see after dragging the package.

pspdfkit widget properties

  1. To make the web part available in Microsoft Teams, synchronize your solution with Teams.

  1. Navigate to the workbench of one of your SharePoint sites and add the PSPDFKit web part there.

  2. There’s an issue getting SharePoint to bundle the static assets of PSPDFKit for Web under the correct subdirectory when using the SharePoint file system itself as your CDN instead of a custom one (you can specify a custom URL for the static assets under write-manifests.json), so you might see a network error when requesting one of the chunks for the PSPDFKit library.

pspdfkit widget properties

If this happens, it’s because the pspdfkit-lib subdirectory hasn’t been created by SharePoint. To fix this, navigate to the erroring URL but trim its path before the pspdfkit-lib segment (i.e. https://<your-sharepoint-site>/sites/appcatalog/ClientSideAssets/<some-hash>) and create a pspdfkit-lib folder.

pspdfkit widget properties

Then, you can copy the contents from ./sharepoint/solution/debug/ClientSideAssets/pspdfkit-lib to the newly created folder.

Information

Make sure you have the latest version of PSPDFKit inside the pspdfkit-lib folder.

ℹ️ Note: As an alternative to this step, consider hosting the assets in a CDN and set it in the write-manifests.json file.

  1. Your PSPDFKit instance should now work. Try opening your workbench and check if the PSPDFKit web part appears as part of the list of available web parts to add.

Creating a Teams Tab with SPFx

After creating the web part, add TeamsTab to the supportedHosts property of the web part manifest to use it as a tab in a channel. You’ll find the manifest file under the ./src/webparts/**/**.manifest.json file:

// src/webparts/PSPDFKit/PSPDFKitWebPart.manifest.json
"supportedHosts": ["SharePointWebPart", "TeamsTab"],

Then, similar to how you add a PSPDFKit web part to a SharePoint Online page, the PSPDFKit web part appears as a tab app you can add to a Microsoft Teams channel.

add tabs

Once the PSPDFKit tab app has been added to a channel, click the PSPDFKit tab and select the Settings option. Then click Select Document to choose a PDF file to open.

Adding Even More Capabilities

Once you’ve deployed your viewer, you can start customizing it to meet your specific requirements or easily add more capabilities. To help you get started, here are some of our most popular Microsoft Teams guides:

Conclusion

You should now have our Microsoft Teams integration up and running. If you hit any snags, don’t hesitate to reach out to our support team for help.

You can also use our vanilla JavaScript PDF viewer to build a Microsoft OneDrive PDF viewer or a SharePoint PDF viewer.

To see a list of all web frameworks, start your free trial. Or, launch our demo to see our viewer in action.

References

Author
Hulya Masharipov Technical Writer

Hulya is a frontend web developer and technical writer at PSPDFKit who enjoys creating responsive, scalable, and maintainable web experiences. She’s passionate about open source, web accessibility, cybersecurity privacy, and blockchain.

Related products
Share post
Free trial Ready to get started?
Free trial