Integrate Apryse WebViewer into Sharepoint

In this guide, you'll integrate Apryse WebViewer into SharePoint Online as a web part. You'll do this by cloning the SharePoint sample repository, then integrating WebViewer with the clone.

You'll need to do the following before you start:

• Install Node v22.21.0 and NPM.
• Install SPFx: v1.21.1.
• Install WebViewer.

• Install Node Version Manager (optional, but recommended).
• Get your Apryse trial key.

• Set up your Sharepoint dev environment. You'll also need to be familiar with using the Sharepoint dev environment. If you're not familiar with using the environment, create some sample projects using the environment first.
  • For step-by-step help on setting up a SharePoint development environment, see the following:
    • SharePoint DX Setup Guide
    • Set up your Microsoft 365 Tenant
    • Set up your SharePoint Framework Development Environment

1. Ensure you're running Node.js version v22.21.0. You can check by running the following in the console:

1node -v

2. Enable the custom scripts by following the Microsoft Guide and configuration guide. It may take up to 24hrs for the configuration to to complete.

1Connect-SPOService -Url <AdminSiteURL> -Credential <AdminUser>
2Set-SPOsite <SiteURL> -DenyAddAndCustomizePages 0

1Set-PnPSite -Identity https://{your-tenant-id}.sharepoint.com/sites/${site-name} -NoScriptSite $false

3. In the Document Library of your SharePoint site, create a Webviewer folder.

4. Create a child folder, js, inside the Webviewer folder.

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

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

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

1git clone https://github.com/ApryseSDK/sharepoint-integration-examples.git

2. Enter the sharepoint-web-part folder and use npm to install gulp, yeoman and Microsoft SharePoint Generator:

1cd sharepoint-web-part
2npm i -g gulp-cli yo @microsoft/generator-sharepoint

3. Install all the packages through the following command:

1npm install

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

1TENANT_ID=<your-tenant-id>
2SITE_NAME=<your-sharepoint-site-name>
3WEBVIEWER_LIB_FOLDER_PATH=Webviewer/js/lib
4FOLDER_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 it with your tenant id and SharePoint site name.

1{
2...,
3// replace with your tenant id and SharePoint site name
4"initialPage": "https://<your-tenant-id>.sharepoint.com/sites/<site-name>/_layouts/workbench.aspx" 
5}

6. Run the following to start the web part in the workbench:

1gulp serve

7. If this is your first time setting up the SharePoint Framework, you must call the following:

1gulp trust-dev-cert

After your local SharePoint instance is running, you should 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.

You can now open a local file in the Webviewer.

1. Run the folllowing to generate the webviewer.sppkg file in the sharepoint-web-part/sharepoint folder:

1gulp bundle --ship
2gulp package-solution --ship

2. Navigate to the SharePoint admin center, then go to the More features page. It should be https://<your-tenant-id>-admin.sharepoint.com/_layouts/15/online/AdminHome.aspx#/classicFeatures.

3. Click the Open button under the App section.

4. Click the Upload button to upload the webviewer.sppkg file, then select the webviewer.sppkg file.

5. After uploading, enable the app by selecting Only enable this app.

6. Click the Settings button on the top right in the SharePoint site, then click Add an app.

7. Enable the webviewer-client-side-solution in My Apps.

8. Click + New button, then select Site Page to create a new site page in the SharePoint site.

9. Rename the page to Webviewer, then add a one column section.

10. Click the + button in the new section, select the webviewer web part, then publish the page.

To open files in SharePoint Documents Library, you must integrate with SharePoint extension. This extension allows you 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.

1. Create a .env file within the sharepoint-extension folder in the sharepoint-integration-examples repository. Add the following parameters in the .env file:

1SITE_PAGE=Webviewer.aspx
2SHAREPOINT_SITE_URL=https://<your-tenant-id>.sharepoint.com/sites/<site-name>

2. In the sharepoint-extension in the terminal, Run the following:

1npm install

3. Change the pageUrl in the serve.json in the sharepoint-extension/config folder by replacing the tenant id and site name:

1{
2    ...,
3    pageUrl: "https://<your-tenant-id>.sharepoint.com/sites/<site-name>/Shared%20Documents/Forms/AllItems.aspx"
4}

4. Run the following command:

1gulp serve

This will generate a new window in the Document Library, and, a popup and warning for you to allow debug scripts.

5. Select the Load debug scripts option in the popup.

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

7. Click the Open in Apryse button and it will direct you to the page, by default, that you specified in the .env file. In this case, it should be the https://<your-tenant-id>.sharepoint.com/sites/<site-name>/SitePages/<site-page>.aspx page that has the webviewer web part.

1. Use the following commands, similar to deploying the SharePoint Web Part, to generate the sharepoint-extension.sppkg file in the sharepoint-extension/sharepoint/solution folder:

1gulp bundle --ship
2gulp package-solution --ship

2. Upload the sharepoint-extension.sppkg file to the Apps in SharePoint Admin center and enable it for the website.