File Handler App with Graph APIs

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.

• Node v22.21.0 and NPM
• SPFx: v1.21.1
• 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

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

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.

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

1git clone https://github.com/ApryseSDK/webviewer-filehandler.git

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.

1npm run setup:dev

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:

1TENANT_ID=
2CLIENT_ID=
3CLIENT_SECRET=
4FILE_HANDLER_SITE_HOST_URL=

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

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.

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.