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.

Get the SharePoint sample source code here

• Node v14.17.0 and NPM
• WebViewer:

Download WebViewer

• (Optional but recommended) Node Version Manager
• Get your Apryse trial key.

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

• SharePoint DX Setup Guide
• Set up your Microsoft 365 Tenant
• Set up your SharePoint Framework Development Environment

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.

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

3. In the Document Library of your SharePoint site, create a "Webviewer" folder and create another child folder "js" inside the "Webviewer" folder.

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

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

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

   git 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

   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.

You could now open a local file in the Webviewer.

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.

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

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

5. 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.

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

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

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

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.

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>

2. In the sharepoint-extension in the terminal, Run npm install.

npm install

3. 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"
}

4. 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

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

6. 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.

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.

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

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

2. 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.

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

4. Select Microsoft Graph and Delegated permissions.

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

6. Grant admin consent if needed.

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

8. Select the MSAL only for the Redirect URIs.

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

1. Git clone from the repository: https://github.com/ApryseSDK/webviewer-filehandler

   git clone https://github.com/ApryseSDK/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

3. 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.

4. 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=

5. Run npm run start:dev to start the local server.

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.

3. If necessary, grand admin consent for the permissions.
4. 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.

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.