Some test text!

Search
Hamburger Icon

Web / Guides

How to integrate WebViewer into a Sharepoint PDF Viewer

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

Prerequisites

Apryse collects some data regarding your usage of the SDK for product improvement.

If you wish to continue without data collection, contact us and we will email you a no-tracking trial key for you to get started.

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

Trial license key required.
The trial of Apryse SDK requires a trial key. A commercial license key is required for use in a production environment. Please fill out our licensing form if you do not have a valid license key.
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).

Sharepoint Web Part

Initial Setup

  1. Ensure that you are running a Node.js version higher than v14.15.0 and lower than v15.0.0. You can check this by running node -v in a console.

NodeJS version

  1. By default, the custom scripts option is disabled. You'll need to enable the custom scripts by following the Microsoft Guide and configuration. This may take up to 24hrs for the configuration to be effective.

If you are on a Windows machine, you can acheive this using the SharePoint Online Management Shell and use the following command:

Set-SPOsite <SiteURL> -DenyAddAndCustomizePages 0

If you are on a MacOS machine, you can acheive this with the PnP Powershell and use the following command:

Set-PnPSite -Identity https://{your-tenant-id}.sharepoint.com/sites/${site-name} -NoScriptSite $false
  1. In the Document Library of your SharePoint site, create a "Webviewer" folder and create another child folder "js" inside the "Webviewer" folder.

Create the Webviewer folderCreate the js folder

  1. Upload the lib folder extracted from the WebViewer.zip to the js folder.

Upload the lib folderlib folder uploaded

The webviewer lib folder should now be available from the url: https://.sharepoint.com/sites//Shared Documents/Webviewer/js/lib.

Development

  1. Clone the sharepoint-integration-examples sample from github.

    git clone https://github.com/PDFTron/sharepoint-integration-examples.git
  2. Enter the sharepoint-web-part folder and use npm to install gulp, yeoman and Microsoft SharePoint Generator

    cd sharepoint-web-part
    npm i -g gulp-cli yo @microsoft/generator-sharepoint
  3. Install all the packages by npm install.

  4. Create a .env file in the sharepoint-web-part folder and include the following parameters in the .env file.

    TENANT_ID=<your-tenant-id>
    SITE_NAME=<your-sharepoint-site-name>
    WEBVIEWER_LIB_FOLDER_PATH=Webviewer/js/lib
    FOLDER_URL=<your-shared-documents-url> // This is where you save the opened local files in the webviewer
  5. Change the initialPage property in sharepoint-web-part/config/serve.json by replacing with your tenant id and SharePoint site name.

    {
    ...,
    // replace with your tenant id and SharePoint site name
    "initialPage": "https://<your-tenant-id>.sharepoint.com/sites/<site-name>/_layouts/workbench.aspx" 
    }
  6. Run gulp serve to start the web part in the workbench.

    gulp serve
  7. After your local SharePoint instance is running you should be able to see a blank SharePoint canvas like in the screenshot below. You can add an Apryse WebViewer web part by adding a new web part to the page and selecting the webviewer web part.

Local SharePoint

Local SharePoint with drop down

Local SharePoint with web part

You could now open a local file in the Webviewer. Open Local FilesLocal file opened

Deployment

  1. Run gulp bundle --ship and gulp package-solution --ship to generate the webviewer.sppkg file in the sharepoint-web-part/sharepoint folder.

    gulp bundle --ship
    gulp package-solution --ship
  2. Navigate to the SharePoint admin center and go to the page More features. It should be https://<your-tenant-id>-admin.sharepoint.com/_layouts/15/online/AdminHome.aspx#/classicFeatures. Click the Open button under the App section.

SharePoint admin panelSharePoint admin manage apps

  1. Upload the webviewer.sppkg file by clicking the Upload button and select the webviewer.sppkg file.

Sharepoint admin upload webviewer.sppkg

  1. After uploading, you'll need to enable the app by selecting Only enable this app.

Enable the webviewer.sppkg

  1. Click the Settings button on top right in the SharePoint site and click Add an app. Enable the webviewer-client-side-solution in My Apps.

Click the setting buttonAdd an app in the SharePoint setting

  1. Create a new site page in the SharePoint site by clicking + New button and select Site Page.

Create new site pageName the new site page

  1. Rename the page to "Webviewer" and add a one column section.

Add one column section

  1. Click the "+" button in the new section, select the "webviewer" web part and publish the page.

Click the add button in the one column sectionSelect the webviewer web partWebviewer web part added to the pagePublish the pagePublished page

SharePoint extension

In order to open files in SharePoint Documents Library, you will need to integrate with SharePoint extension. This extension allows us to add a button to any List View in SharePoint, such as your document libraries. You'll be adding a Open in Apryse Button as a menu option to open and process any documents in Webviewer.

Get started

  1. Create a .env file in within the sharepoint-extension folder in the sharepoint-integration-examples repository. Add the following parameters in the .env file.
SITE_PAGE=Webviewer.aspx
SHAREPOINT_SITE_URL=https://<your-tenant-id>.sharepoint.com/sites/<site-name>
  1. In the sharepoint-extension in the terminal, Run npm install.
npm install
  1. Change the pageUrl in the serve.json in the sharepoint-extension/config folder by replacing the tenant id and site name.
{
    ...,
    pageUrl: "https://<your-tenant-id>.sharepoint.com/sites/<site-name>/Shared%20Documents/Forms/AllItems.aspx"
}
  1. Run gulp serve. This should generate a new window in the Document Library and popup and warning for you to allow debug scripts. Select the Load debug scripts option in the popup.
gulp serve

Allow debug scripts

  1. You should be able to see the Open in Apryse button after right click on a document in the Document Library.

Open in Apryse button

  1. By default, click the Open in Apryse button will direct you to the page where you specify in the .env file. In this case, it should be https://<your-tenant-id>.sharepoint.com/sites/<site-name>/SitePages/<site-page>.aspx page that has webviewer web part.
SharePoint Framework currently have issues hosting workbench on other port than port 4321. That means it's hard to configure to have the Web Part and the extension running locally at the same time. We recommend deploying either the Web Part or the extension, and have another one hosted locally..

Deploy the extension

Similar to deploying the SharePoint Web Part, use the following command to genereate the sharepoint-extension.sppkg file in the sharepoint-extension/sharepoint/solution folder.

```shell
    gulp bundle --ship
    gulp package-solution --ship
```

Upload the sharepoint-extension.sppkg file to the Apps in SharePoint Admin center and enable it for the website. You should be able to see the Open in Apryse button after right-click on a document in the Document Library.

SharePoint File Handler

File handlers are an Microsoft 365 add-in that allows user to define customized actions on specified file types. With File Handlers, you can enable the following user experience:

  • Create new files in the browser
  • File preview
  • Custom actions that launch into your app

Create a helper app

You can started with creating a helper app that assist you to register the File Handler app in Azure Active Directory.

  1. Sign in to Azure Portal

Azure Portal sign inSelect Azure Active Directory

  1. Select App Registrasions on the left panel and click + New Registration. Fill in a name that you would find it easily. We put webviewer-helper and click Register.

App registration pageNew Registrationwebviewer-helper application created

  1. Select API Permissions on the left panel and click Add a permission.

Select API permissionsClick Add a permission

  1. Select Microsoft Graph and Delegated permissions.

Select Microsoft graphSelect Delegated permissions

  1. Search for Directory and select Directory.AccessAsUser.All. Then search openid and select openid. Click Add Permissions after the permissions are selected.

Select Directory.AccessAsUser.AllSelect openid

  1. Grant admin consent if needed.

Grant admin consent

  1. Select Authentication on the left panel, click Add a platform and select Mobile and desktop applications.

Select Authentication, add a plotform to add a moboke and desktop applications

  1. Select the MSAL only for the Redirect URIs.

Select MSAL only

  1. Select Yes in Allow public client flows and click Save.

Allow public client flows

Project Setup

  1. Git clone from the repository: https://github.com/PDFTron/webviewer-filehandler
    git clone https://github.com/PDFTron/webviewer-filehandler.git
  2. Run npm run setup:dev to start setting up app registration for the Webviewer File handler demo. In the terminal, Enter the client id and tenant id of the helper app when prompted. You could access the client id and tenant id in the webviewer-app in Azure Active Directory.
    npm run setup:dev

Enter client id and tenant id in the terminal when prompted

  1. The terminal should provide a link for you to enter verification code from Microsoft. Open the link in the browser and enter the given code.

  2. A .env file should be created in the project root folder when the app registration is done. It should contain the following parameter:

TENANT_ID=
CLIENT_ID=
CLIENT_SECRET=
FILE_HANDLER_SITE_HOST_URL=
  1. Run npm run start:dev to start the local server.

Resetting cache in SharePoint

It usually takes about 24 - 48 hours for the new file handler to be effective in Sharepoint. However, microsoft provides a API to refresh the cache. (Resetting the file handler cache)

In order to get the access token for resetting Sharepoint cache, we can start from getting the code. Before using the API, we need to enable it in the API permissions under the application we registered (In this case, it's "Webviewer Demo").

  1. Go to Azure Active Directory and select the application we registered.
  2. Select API permissions on the left sidebar and click + Add a permission. In Request API permissions, select Sharepoint -> Application permissions -> Sites.ReadWrite.All, and add the permission.

Select API permissionsSelect Application permissionsSelect Sites.ReadWrite.All

  1. If necessary, grand admin consent for the permissions.
  2. Direct to http://localhost:3000/app-reset-cache. You'll be requested to login twice with your microsoft account during the process. Once it's reset successfully, you will see Successfully reset the cache on the page.

Deployment in production

After the development, you may want to deploy your server and redirect the filehandler to the hosted server.

You can achieve this by change the Manifest in your application.

Change the logoutUrl with your new domain but with the same path. Change the url in the object of the array replyUrlsWithType.

Next step

Usage Guides Samples API docs

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

Get the answers you need: Chat with us