> 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/file-handler-app-with-graph-apis.md).
# File Handler App with Graph APIs
Integrate sharepoint pdf viewer for viewing, annotating, editing, and creating PDFs in Mendix. Process documents natively in Mendix without third-party applications.
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
## Prerequisites
* [**Node** v22.21.0 **and NPM**](https://nodejs.org/en/blog/release/v22.21.0)
* SPFx: [v1.21.1](https://learn.microsoft.com/en-us/sharepoint/dev/spfx/release-1.21)
* WebViewer:
{% @apryse-download-button/apryse-download-button id="WebViewer\_web\_web" title="Download WebViewer" showVersion="true" %}
* (Optional but recommended) [**Node Version Manager**](http://npm.github.io/installation-setup-docs/installing/using-a-node-version-manager.html)
* Get your Apryse trial key.
{% @apryse-license-key/apryse-license-key platform="WEB\_VIEWER" variant="full" %}
For step-by-step help on setting up a SharePoint development environment, see one of 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 File Handler
[File handlers](https://docs.microsoft.com/en-us/onedrive/developer/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
1. Select **App Registrations** 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**.
1. Select **API Permissions** on the left panel and click **Add a permission**.
1. Select **Microsoft Graph** and **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.
1. Grant admin consent if needed.
1. Select **Authentication** on the left panel, click **Add a platform** and select **Mobile and desktop applications**.
1. Select the **MSAL only** for the Redirect URIs.
1. Select **Yes** in **Allow public client flows** and click **Save**.
### Project Setup
1. Git clone from the repository: [https://github.com/ApryseSDK/webviewer-filehandler](https://github.com/ApryseSDK/webviewer-filehandler/)
{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}
```sh
git clone https://github.com/ApryseSDK/webviewer-filehandler.git
```
{% endcode %}
{% endtab %}
{% endtabs %}
1. 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.
{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}
```sh
npm run setup:dev
```
{% endcode %}
{% endtab %}
{% endtabs %}
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:
{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}
```sh
TENANT_ID=
CLIENT_ID=
CLIENT_SECRET=
FILE_HANDLER_SITE_HOST_URL=
```
{% endcode %}
{% endtab %}
{% endtabs %}
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](https://docs.microsoft.com/en-us/onedrive/developer/file-handlers/reset-cache?view=odsp-graph-online))
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.
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`.
---
# 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 current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.apryse.com/web/get-started/integrations/sharepoint/file-handler-app-with-graph-apis.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
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.