> 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/sharepoint-signing-flow.md).

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

Integrate a free trial of WebViewer into SharePoint Online as a web part with this comprehensive guide. Get step-by-step instructions, unlimited trial usage, and support from solution engineers. Prere

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.

<a href="https://github.com/ApryseSDK/sharepoint-integration-examples/" class="button primary">Get the SharePoint sample source code here</a>

## Prerequisites

* This guide expects you to have completed the SharePoint webpart integration guide found here.
* [**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)
* 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 Webpart Environment Update

<a href="https://github.com/ApryseSDK/sharepoint-integration-examples/" class="button primary">Get the SharePoint sample source code here</a>

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](https://xxxx.crm.dynamics.com/))

## Dataverse Integrations

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

1. Navigate to [PowerApps here](https://make.powerapps.com/)
2. Select Tables (If not found, dropdown for Additional options on the left Navigation bar)

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-95a231a1ce6782631ae2889c9ceb876b277f6805%2F1d69f9e1c2dab948e5a58e8ed729ed0903d49041-800x800.gif?alt=media)

1. Create a new table and name it Signature Requests
2. 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

## PowerApps Integration

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

1. Navigate to [PowerApps here](https://make.powerapps.com/)
2. Select Create a Model-driven App from existing data

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-08484ae06edb44a2a2b0065b3bdd955a8da0cdfc%2F7f1fa670327f7bcdd81c723c4d1ab0ec59fbbe3a-800x200.gif?alt=media)

1. When selecting existing data, select the Dataverse table we just created
2. Navigate back to Dataverse to the Signature Request table
3. Select the Forms option to modify the Main form
4. Adjust the form so the fields are displayed in order:

* Title
* Owner
* File to Sign
* Requestor
* Request User

## PowerAutomate Integration

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

1. Navigate to [PowerAutomate here](https://make.powerautomate.com/)
2. Navigate to My Flows
3. Create a new Cloud Flow

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-174b360c721f0d66fbf811581c4e7e5ef1526525%2F5f59805b1f74cc79ce40732f3d86ec9b0a472441-897x500.gif?alt=media)

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

1. Flow: Send an email (V2)

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

{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}

```sh
Hi,

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

{% endcode %}
{% endtab %}
{% endtabs %}

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

1. Flow: Send an email (V2)

* To: Requestor, Subject: Document was modified

{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}

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

{% endcode %}
{% endtab %}
{% endtabs %}

## Deployment

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

## Addtional Information

* [MSFT Model Driven Apps](https://learn.microsoft.com/en-us/power-apps/maker/model-driven-apps/model-driven-app-overview/)
* [MSFT Dataverse](https://learn.microsoft.com/en-us/power-apps/maker/data-platform/data-platform-intro/)


---

# 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/sharepoint-signing-flow.md?ask=<question>&goal=<endgoal>
```

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