Some test text!
Sharepoint / Guides / Get Started
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.
Apryse collects some data regarding your usage of the SDK for product improvement.
If you wish to continue without data collection, contact us and we will email you a no-tracking trial key for you to get started.
For step-by-step help on setting up a SharePoint development environment, see one of the following:
v14.15.0
and lower than v15.0.0
. You can check this by running node -v
in a console.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
The webviewer lib folder should now be available from the url: https://
Clone the sharepoint-integration-examples
sample from github.
git clone https://github.com/ApryseSDK/sharepoint-integration-examples.git
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
Install all the packages by npm install
.
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
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"
}
Run gulp serve
to start the web part in the workbench.
gulp serve
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.
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
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.
webviewer.sppkg
file by clicking the Upload button and select the webviewer.sppkg
file.Only enable this app
.webviewer-client-side-solution
in My Apps.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.
.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>
npm install
.npm install
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"
}
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
Open in Apryse
button after right click on a document in the Document Library.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:
You can started with creating a helper app that assist you to register the File Handler app in Azure Active Directory.
git clone https://github.com/ApryseSDK/webviewer-filehandler.git
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
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.
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=
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").
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
.
Trial setup questions? Ask experts on Discord
Need other help? Contact Support
Pricing or product questions? Contact Sales