Integrating Salesforce with WebViewer JavaScript PDF library

Welcome to Apryse. This guide will help you integrate a free trial of WebViewer into Salesforce Lightning Components. It will help you clone the Salesforce sample repository and show you how to integrate WebViewer as a lightning web component. Your free trial includes unlimited trial usage and support from solution engineers.

Get the Salesforce sample source code here

Prerequisites

• Salesforce CLI
• Node and NPM
• (Optional) Visual Studio Code with Salesforce Extensions
• WebViewer:

For step-by-step help on setting up a Salesforce development environment, see one of the following:

• [Salesforce DX Setup Guide](https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_intro.htm?search_text=trial hub org)
• Trailhead Module: App Development with Salesforce DX

License Key Required

The trial of Apryse SDK requires a trial license key, which is provided in the box titled "License Key". A commercial license key is required for use in a production environment. Please contact sales to purchase a commercial key or if you need any other license key assistance.

Keep your license keys confidential.

License keys are uniquely generated. Please make sure that it is not publicly available (e.g. in your public GitHub).

Initial Setup

1. Extract WebViewer.zip.
2. Navigate into the extracted folder and run:

Shell

npm run optimize

1. You will encounter the following prompts, which you should answer y/n as indicated:

Shell

Optimize: Do you want to exclude the use of optimized worker files? If you exclude them make sure that you pass 'enableOptimizedWorkers: false' to the WebViewer constructor. [y/n]:  n
Optimize: Will you be using WebViewer Server? See https://docs.apryse.com/web/guides/wv-server/ for more info. [y/n]:  n
Optimize: Will you be converting all your documents to XOD? See https://docs.apryse.com/web/guides/optimize-lib-folder for more info. [y/n]:  n
Optimize: Do you need client side office support (docx, pptx, xlsx)? [y/n]:  y
Optimize: Do you need client side office support for legacy office files (doc, ppt, xls)? [y/n]:  y
Optimize: Do you need the full PDF API? See https://docs.apryse.com/web/guides/optimize-lib-folder for more info (most users dont need this option). [y/n]:  y
Optimize: Do you want to use the production version of PDFNet.js? The production version does not have type checking and console messages, but is much smaller than the development version. [y/n]:  n
Optimize: Do you need to use the content editing feature? (This is for editing content on the page in the viewer) [y/n]:  n
Optimize: Do you need to use the office editing feature? (This is for editing docx files in the viewer) [y/n]:  n
Optimize: Do you need to deploy to Salesforce? See https://docs.apryse.com/web/guides/optimize-lib-folder for more info (most users dont need this option). [y/n]:  y
Optimize: Do you need the source map for WebViewer's UI? The source map allows you to debug WebViewer's UI on your site using unminified code. [y/n]:  n
Optimize: Would you like to use the web component version of WebViewer (instead of the iframe)? [y/n]:  n

Do I need to exclude optimized workers?

Because of Salesforce governor limits there is a limited file size able to be loaded and so the optimized workers need to be used. Make sure to answer "n" to whether you would like to exclude the optimized workers. More details on Salesforce governor limits.

After answering these prompts, answer y to the final confirmation prompt and the script will optimize and zip the source code you’ll need later to a new webviewer-salesforce directory.

Note that this optimization produces .zip files of no more than 5 mb in size in addition to the .resource-meta.xml -- this meets the requirements to safely upload to the Salesforce platform.

Do I need full PDF API?

Note that in certain circumstances, you may need the full PDF API. For more details on when you may need to enable it, please see our guide here .

If You Chose "No" for the Full API

Please ensure you set this boolean to false like so:

JavaScript

fullAPI = false;

To ensure WebViewer is initialized and instructed to look for the pdf_lean files, and not the pdf_full files.

1. Next clone the webviewer-salesforce sample:

Shell

git clone https://github.com/ApryseSDK/webviewer-salesforce.git

1. Copy the .zip files that were output by the optimizing script in the webviewer-salesforce folder to the force-app/main/default/staticresources folder of the cloned project.

Note how every .zip file, and the myfiles/ directory, has a corresponding .resource-meta.xml file, wherein the contents of each .xml file are the same.

1. Make sure you are in the cloned project directory and authenticate with your hub org and provide it with an alias (DevHub in the command below) from your command line using an authorization method:

Shell

sf org login (authorization method) --alias devHub

1. Enter your Dev Hub org credentials in the browser that opens to the lightning experience setup page. Enable devhub by typing dev hub in the quick find search and toggle to enable as shown in the picture below.

1. Create a scratch org using the config/project-scratch-def.json file, set the username as your default, and assign it an alias:

Shell

sf org create scratch --alias myScratchOrg

1. Push the app to your scratch org:

Shell

sf project deploy start --target-org myScratchOrg

Run the sample

1. Make sure you are still in the cloned project. Open the scratch org:

Shell

sf org open --target-org myScratchOrg

1. A browser will open where you should click the app launcher icon in the top left, and select Apryse.

You should see the application start up:

Extending the sample

See our Salesforce overview page for information on how to follow our general WebViewer guides when WebViewer is integrated into Salesforce.

Next step

UsageGuidesSamplesAPI docs

For more information on how to call WebViewer API, check out this blog.