> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/get-started/integrations/sharepoint/get-started.md).
# Integrate Apryse WebViewer into Sharepoint
Integrate Apryse WebViewer with Sharepoint for pdf viewing, annotating, editing, and creating PDFs.
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.
Get the SharePoint sample source code here
## Prerequisites
You'll need to do the following before you start:
* Install [**Node** ](https://nodejs.org/en/blog/release/v22.21.0)[v22.21.0](https://nodejs.org/en/blog/release/v22.21.0)[ **and NPM**](https://nodejs.org/en/blog/release/v22.21.0).
* Install SPFx: [v1.21.1](https://learn.microsoft.com/en-us/sharepoint/dev/spfx/release-1.21).
* [Install WebViewer](/web/get-started/readme.md).
{% @apryse-download-button/apryse-download-button id="WebViewer\_web\_web" title="Download WebViewer" showVersion="true" %}
* Install [**Node Version Manager**](http://npm.github.io/installation-setup-docs/installing/using-a-node-version-manager.html) (optional, but recommended).
* Get your Apryse trial key.
{% @apryse-license-key/apryse-license-key platform="WEB\_VIEWER" variant="full" %}
* 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](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-framework-overview/)
* [Set up your Microsoft 365 Tenant](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant/)
* [Set up your SharePoint Framework Development Environment](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment/)
{% hint style="info" %}
**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](https://apryse.com/form/contact-sales) to purchase a commercial key or if you need any other license key assistance.
{% endhint %}
{% hint style="warning" %}
**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).
{% endhint %}
## Sharepoint web part setup, development, and deployment
### 1. Initial Setup
1. Ensure you're running Node.js version `v22.21.0`. You can check by running the following in the console:
{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}
```shell
node -v
```
{% endcode %}
{% endtab %}
{% endtabs %}
2. Enable the custom scripts by following the [Microsoft Guide and configuration](https://docs.microsoft.com/en-us/sharepoint/allow-or-prevent-custom-script#to-allow-custom-script-on-other-sharepoint-sites) guide. It may take up to 24hrs for the configuration to to complete.
{% hint style="info" %}
By default, the custom scripts option is disabled.
{% endhint %}
{% tabs %}
{% tab title="Windows" %}
If you are on a Windows machine, you can achieve this using the [SharePoint Online Management Shell](https://docs.microsoft.com/en-us/powershell/sharepoint/sharepoint-online/connect-sharepoint-online?view=sharepoint-ps) and the following commands:
{% code lineNumbers="true" %}
```sh
Connect-SPOService -Url -Credential
Set-SPOsite -DenyAddAndCustomizePages 0
```
{% endcode %}
{% hint style="info" %}
The following are placeholder variables for the SharePoint Environment:
* The `` is the admin SharePoint URL, typically in the form of `[your-tenant-name]-admin.sharepoint.com`.
* The `` is the target SharePoint Site you are modifying, usually in the form of `[your-tenant-name].sharepoint.com/sites/[sitename]`.
* The `` is your tenant ID. For example, `contoso.sharepoint.com`.
* The `` is the SharePoint Site Name where WebViewer was added. For example, "All Company" is a default Site Name added to a fresh SharePoint environment.
* The `` points to the SharePoint Site where WebViewer was uploaded. For example, `.sharepoint.com/sites//Shared Documents`.
{% endhint %}
{% endtab %}
{% tab title="macOS" %}
If you are on a MacOS machine, you can achieve this with the [PnP Powershell](https://docs.microsoft.com/en-us/powershell/sharepoint/sharepoint-pnp/sharepoint-pnp-cmdlets/) by using the following commands:
{% code lineNumbers="true" %}
```sh
Set-PnPSite -Identity https://{your-tenant-id}.sharepoint.com/sites/${site-name} -NoScriptSite $false
```
{% endcode %}
{% endtab %}
{% endtabs %}
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`.
### Development
1. Clone the [`sharepoint-integration-examples`](https://github.com/ApryseSDK/sharepoint-integration-examples/) sample from github:
{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}
```sh
git clone https://github.com/ApryseSDK/sharepoint-integration-examples.git
```
{% endcode %}
{% endtab %}
{% endtabs %}
2. Enter the **sharepoint-web-part** folder and use `npm` to install `gulp`, `yeoman` and `Microsoft SharePoint Generator`:
{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}
```sh
cd sharepoint-web-part
npm i -g gulp-cli yo @microsoft/generator-sharepoint
```
{% endcode %}
{% endtab %}
{% endtabs %}
3. Install all the packages through the following command:
{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}
```shell
npm install
```
{% endcode %}
{% endtab %}
{% endtabs %}
4. Create a `.env` file in the **sharepoint-web-part** folder and include the following parameters in the `.env` file:
{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}
```sh
TENANT_ID=
SITE_NAME=
WEBVIEWER_LIB_FOLDER_PATH=Webviewer/js/lib
FOLDER_URL= // This is where you save the opened local files in the webviewer
```
{% endcode %}
{% endtab %}
{% endtabs %}
5. Change the `initialPage` property in `sharepoint-web-part/config/serve.json` by replacing it with your tenant id and SharePoint site name.
{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}
```sh
{
...,
// replace with your tenant id and SharePoint site name
"initialPage": "https://.sharepoint.com/sites//_layouts/workbench.aspx"
}
```
{% endcode %}
{% endtab %}
{% endtabs %}
6. Run the following to start the web part in the workbench:
{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}
```sh
gulp serve
```
{% endcode %}
{% endtab %}
{% endtabs %}
7. If this is your first time setting up the SharePoint Framework, you must call the following:
{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}
```sh
gulp trust-dev-cert
```
{% endcode %}
{% endtab %}
{% endtabs %}
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.
### Deployment
1. Run the folllowing to generate the `webviewer.sppkg` file in the **sharepoint-web-part/sharepoint** folder:
{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}
```sh
gulp bundle --ship
gulp package-solution --ship
```
{% endcode %}
{% endtab %}
{% endtabs %}
2. Navigate to the SharePoint admin center, then go to the **More features** page. It should be `https://-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.
{% hint style="info" %}
The `.sppkg` file is located under the sharepoint/solution folder.
{% endhint %}
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.
## Integrate with SharePoint extension
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.
### Get started
1. Create a `.env` file within the **sharepoint-extension** folder in the **sharepoint-integration-examples** repository. Add the following parameters in the `.env` file:
{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}
```sh
SITE_PAGE=Webviewer.aspx
SHAREPOINT_SITE_URL=https://.sharepoint.com/sites/
```
{% endcode %}
{% endtab %}
{% endtabs %}
2. In the **sharepoint-extension** in the terminal, Run the following:
{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}
```sh
npm install
```
{% endcode %}
{% endtab %}
{% endtabs %}
3. Change the `pageUrl` in the `serve.json` in the **sharepoint-extension/config** folder by replacing the tenant id and site name:
{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}
```sh
{
...,
pageUrl: "https://.sharepoint.com/sites//Shared%20Documents/Forms/AllItems.aspx"
}
```
{% endcode %}
{% endtab %}
{% endtabs %}
4. Run the following command:
{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}
```sh
gulp serve
```
{% endcode %}
{% endtab %}
{% endtabs %}
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://.sharepoint.com/sites//SitePages/.aspx` page that has the webviewer web part.
{% hint style="info" %}
SharePoint Framework currently has issues hosting workbench on any portother than 4321. This 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 host the other one locally.
{% endhint %}
### Deploy the extension
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:
{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}
```sh
gulp bundle --ship
gulp package-solution --ship
```
{% endcode %}
{% endtab %}
{% endtabs %}
2. Upload the `sharepoint-extension.sppkg` file to the **Apps** in **SharePoint Admin center** and enable it for the website.
{% hint style="info" %}
You should see the **Open in Apryse** button after you right-click on a document in the Document Library.
{% endhint %}
## Next step
UsageGuidesSamplesAPI docs
{% hint style="info" %}
For more information on how to call WebViewer API, check out this blog.
{% endhint %}
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://docs.apryse.com/web/get-started/integrations/sharepoint/get-started.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `build a script that syncs our docs to a CMS` lets GitBook tailor the answer to that use case.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.