How to Build a Salesforce PDF Viewer with PSPDFKit

In this post, you’ll learn how to build a Salesforce PDF viewer by integrating PSPDFKit for Web into your Salesforce organization. By the end of this post, you’ll be able to open PDF, JPG, PNG, and TIFF files in a custom PSPDFKit tab inside Salesforce.

PSPDFKit for Salesforce Integration

The PSPDFKit for Salesforce integration uses PSPDFKit for Web Standalone as a static resource. When the integration is deployed to a Salesforce organization, the static resources are automatically created. The static resources are then used to load the PSPDFKit for Web Standalone library in the Salesforce organization.

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

Getting Started

To get started, you’ll need to:

• Set up a Salesforce Developer Edition account.

• Install the Salesforce CLI.

• Install the latest stable version of Node.js.

• Install a package manager compatible with npm. This post contains usage examples for the npm client. The npm client is installed with Node.js by default.

Deploying the Package

To deploy the PSPDFKit package to your Salesforce organization, follow these steps.

1. Download the PSPDFKit for Salesforce project from GitHub and then unpack the ZIP file.

Alternatively, run the following terminal command to clone the PSPDFKit Salesforce repository from GitHub:

git clone https://github.com/PSPDFKit/salesforce.git

2. Navigate to the salesforce directory and run the following commands to install the dependencies and log in to your Salesforce organization:

npm install

sfdx force:auth:web:login --setalias vscodeOrg --instanceurl https://login.salesforce.com --setdefaultusername

3. In the browser window that opens, log in to your Salesforce organization and authorize the Salesforce CLI.

4. In the terminal, run the following command from the root folder:

sfdx force:source:deploy -x manifest/package.xml

Enabling Users to Use PSPDFKit

To enable users of your Salesforce organization to use PSPDFKit, follow these steps:

1. In Salesforce, go to Users > Permission Sets.

2. Find PSPDFKit Admin Access in the list and click it.

3. Click Manage Assignments.

4. Click Add Assignment.

5. Select the users you want to authorize to use PSPDFKit.

6. Click Next, and then click Assign.

Changing the Security Settings

PSPDFKit for Salesforce requires Lightning Locker to protect Lightning web components, but Salesforce uses Lightning Web Security by default. To change the default security settings, follow these steps:

1. In Salesforce, go to Security > Session Settings.

2. Deselect Use Lightning Web Security for Lightning web components.

3. Scroll down and click Save.

Using the PSPDFKit for Salesforce Integration

To use PSPDFKit in your Salesforce organization, follow these steps:

1. Ensure you’re logged in as a user authorized to use PSPDFKit.

2. In the top-right corner, open the App Launcher.

3. Search for and click PSPDFKit.

4. Click browse to upload local PDF files, or open a file from Salesforce.

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 Salesforce guides:

• Editing documents
• Filling PDF forms
• Adding signatures to documents
• Redaction
• UI customization

Conclusion

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

You can also deploy our vanilla JavaScript PDF viewer or use one of our many web framework deployment options like Vue.js, React.js, and Angular. To see a list of all web frameworks, start your free trial. Or, launch our demo to see our viewer in action.

If you’re interested in PSPDFKit for Salesforce, you can contact our Sales team.