Integrating WebViewer, SharePoint Online, and PowerApps to create a Digital Signature Workflow

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

• This guide expects you to have completed the SharePoint webpart integration guide found 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

Get the SharePoint sample source code here

Inside the webpart, inside the environment config, you will need to update this information related to your environment.

1. Update TENANT_ID (https://xxxx.sharepoint.com/ where the xxxx is the TENANT_ID)
2. Update the SiteName to the Site of your Webpart location
3. Update Webviewer Sharepoint library folder location in your SharePoint env.
4. Update CRM_URL to the base URL of your CRM setup (https://xxxx.crm.dynamics.com)

We will be using Dataverse to store information regarding the Signature Signing process.

1. Navigate to PowerApps here
2. Select Tables (If not found, dropdown for Additional options on the left Navigation bar)

3. Create a new table and name it Signature Requests
4. Create the table with the following new Columns:

Column: File to Sign

• Data type: File
• Required: Business required

Column: Requestor

• Data type: Single line of text
• Format: Email
• Required: Business required

Column: RequestUser

• Data type: Lookup
• Required: Business required
• Related table: AAD User

Rename column ID to SignatureRequestID

We will be creating a Model-driven App in PowerApps to create our Signature Workflow.

1. Navigate to PowerApps here
2. Select Create a Model-driven App from existing data

3. When selecting existing data, select the Dataverse table we just created
4. Navigate back to Dataverse to the Signature Request table
5. Select the Forms option to modify the Main form
6. Adjust the form so the fields are displayed in order:
   • Title
   • Owner
   • File to Sign
   • Requestor
   • Request User

We will be using PowerAutomate to generate email notifications to notify users when a request is made or updated.

1. Navigate to PowerAutomate here
2. Navigate to My Flows
3. Create a new Cloud Flow

4. Set the following settings in the new Cloud Flow:

Email Notification

• Connections: Microsoft Dataverse, Office 365 Outlook

1. Flow: When a row is added, modified or deleted

• Change type: Added, Table name: Signature Requests, Scope: Organization

2. Flow: Send an email (V2)

• To: Requestor, Subject: A signature request has been sent to you, Body:

Hi,

Please sign the document here https://<TenantID>.sharepoint.com/sites/<SiteName>/_layouts/15/workbench.aspx?uniqueID=@{triggerOutputs()?['body/<TableID>_signaturerequestid']}.

Note: replace TenantID, SiteName, and TableID as necessary

Email Notification (Document Modified)

• Connections: Microsoft Dataverse, Office 365 Outlook

1. Flow: When a row is added, modified or deleted

• Change type: Modified, Table name: Signature Requests, Scope: Organization

2. Flow: Send an email (V2)

• To: Requestor, Subject: Document was modified

Document was modified here https://<TenantID>.sharepoint.com/sites/<SiteName>/_layouts/15/workbench.aspx?uniqueID=@{triggerOutputs()?['body/<TableID>_signaturerequestid']}.

The App can be shared from PowerApps with a share-able hyperlink. The hyperlink can be embedded into SharePoint as well if needed.

• MSFT Model Driven Apps
• MSFT Dataverse