Blog Post

SharePoint Electronic Signature: Sign a PDF in SharePoint

Illustration: SharePoint Electronic Signature: Sign a PDF in SharePoint

This blog post will dive into SharePoint electronic signatures and provide step-by-step instructions on how you can sign a PDF in SharePoint Online using PSPDFKit’s SDK.

In the first part of this blog, you’ll see how to set up the PSPDFKit integration with SharePoint Online as a web part. Then, you’ll learn how to add electronic signatures to your PDF documents using PSPDFKit. By following these steps, you’ll be able to create a seamless and secure document signing experience within your SharePoint environment.

A Note on SharePoint eSignature Solutions

There are two types of eSigning solutions that exist for SharePoint Online. The most common type of solution is an out-of-the-box eSignature integration that provides a signing workflow. In this solution, your documents are sent from SharePoint to a third-party server where the eSignature occurs. This is the typical eSignature workflow you see on platforms like DocuSign and Adobe.

At PSPDFKit, we provide a customized eSigning solution that can be deployed directly in your SharePoint environment. The first step requires a direct integration of our web SDK into your SharePoint application. Once PSPDFKit has been integrated, you can add eSignatures to documents without ever sending them to a third-party server — the signature occurs directly in the browser. This solution can be beneficial for organizations that have strict compliance requirements.

Integrating PSPDFKit for Web into SharePoint Online as a Web Part

PSPDFKit for SharePoint is built on top of PSPDFKit for Web Standalone, a client-side JavaScript library for viewing and editing PDF documents in a web browser. It shares the same APIs as PSPDFKit for Web Standalone, so refer to the Web documentation for customizing your SharePoint application.

Try Our No-Code App

integration diagram

Requirements

Setup

  1. Clone the pspdfkit-sp-online-webpart repository from GitHub by navigating to the desired directory and entering the following command in your command line/terminal:

git clone https://github.com/PSPDFKit/pspdfkit-sp-online-webpart.git

Alternatively, download the project as a .zip file.

  1. Sign in to your tenant account at admin.microsoft.com.

Click Show all in the side navigation, and find Admin centers > SharePoint to access the SharePoint Admin portal.

Follow this Microsoft tutorial to configure your SharePoint tenant and create a new team site.

  1. In the pspdfkit-sp-online-webpart project’s config/serve.json file, replace enter-your-SharePoint-site with your SharePoint site’s URL:

"initialPage": "https://enter-your-SharePoint-site/_layouts/workbench.aspx",
  1. Set up your development environment to build a client-side web part.

Remember to run gulp trust-dev-cert from the project’s root to trust the self-signed developer certificate.

  1. Change your directory to the pspdfkit-sp-online-webpart directory:

cd pspdfkit-sp-online-webpart
  1. Check your Node.js version:

node --version

Ensure you have Node.js version 16.19.0 installed. If not, switch to this version using nvm (Node Version Manager) or asdf.

  1. Install the dependencies:

npm install
  1. Serve the project:

npm run serve

Your SharePoint account will open in a new browser tab.

Integrating PSPDFKit into SharePoint

You can add PSPDFKit to your project as a widget using the user interface (UI) elements. Follow the video tutorial or the instructions below to integrate the PSPDFKit widget into your project.

  1. On your Home page, click Edit in the upper right-hand corner to open the editing interface.

  2. Hover over the desired location for the PSPDFKit widget and click the plus icon that appears. This opens a dialog box with the available web parts.

  3. Search for the PSPDFKit widget and select it.

adding pspdfkit widget

  1. Click the pencil icon’s Edit web part button and click Select Document from the open panel.

pspdfkit widget properties

  1. Choose your document and click Open. The PSPDFKit widget will now appear in your project.

pspdfkit preview

Adding Electronic Signatures

PSPDFKit provides support for adding electronic signatures to your PDF documents. This allows users to sign documents digitally, streamlining the process and enhancing security. To add electronic signatures with PSPDFKit, follow the steps in the next section.

Adding Electronic Signatures with the PSPDFKit UI

In this section, you’ll learn how to sign PDF documents using PSPDFKit’s user-friendly interface.

  1. Since you set up the PSPDFKit widget in the previous section, you’ll now be able to see your document in the web part.

  2. Click the signature icon in the toolbar to open the signature dialog box.

Or, check out the PSPDFKit demo and find the signature icon. Clicking this icon will open a dialog box where you can draw your signature.

PSPDFKit provides various options for customizing your signature. You can choose the pen color, insert an image or text as your signature, and adjust the size and position of the signature for perfect placement within the document. This flexibility allows you to create an electronic signature that accurately represents your unique signing style and securely validates your documents.

Adding Electronic Signatures Programmatically

In the subsequent sections, you’ll see how to programmatically add ink and image signatures to PDF documents within SharePoint using TypeScript.

Adding Ink Signatures Programmatically in SharePoint

PSPDFKit provides two unique signature types that can be incorporated into PDF documents in SharePoint: ink signatures and image signatures. In this section, you’ll learn about the process of creating these signature types programmatically and including them in PDF documents.

First, there are ink signatures, which resemble conventional pen and paper signatures and can be drawn on a signature pad provided by PSPDFKit.

To add an ink signature programmatically within SharePoint, open the src/webparts/PSPDFKit/components/PSPDFKitViewer.tsx file and modify the PSPDFKit.load() function as follows:

instance = await PSPDFKit.load({
	// Container where PSPDFKit should be mounted.
	container,
	// The document to open.
	document: documentURL,
	toolbarItems: [...PSPDFKit.defaultToolbarItems, saveItem],
});

restoreBlobDownloadInterception = disableBlobDownloadInterception();

// Ink signature code.
+ const annotation = new PSPDFKit.Annotations.InkAnnotation({
+ 	pageIndex: 0,
+ 	isSignature: true,
+ 	lines: PSPDFKit.Immutable.List([
+ 		PSPDFKit.Immutable.List([
+ 			new PSPDFKit.Geometry.DrawingPoint({ x: 5, y: 5 }),
+ 			new PSPDFKit.Geometry.DrawingPoint({ x: 95, y: 95 }),
+ 		]),
+ 		PSPDFKit.Immutable.List([
+ 			new PSPDFKit.Geometry.DrawingPoint({ x: 95, y: 5 }),
+ 			new PSPDFKit.Geometry.DrawingPoint({ x: 5, y: 95 }),
+ 		]),
+ 	]),
+ 	boundingBox: new PSPDFKit.Geometry.Rect({
+ 		left: 0,
+ 		top: 0,
+ 		width: 100,
+ 		height: 100,
+ 	}),
+ });

+ instance
+	.create(annotation)
+	.then(function (newAnnotation) {
+		console.log('Annotation created:', newAnnotation);
+	})
+	.catch(function (error) {
+		console.error('Error creating annotation:', error);
+	});

The PSPDFKit.load() function initializes the PSPDFKit instance, while PSPDFKit.Annotations.InkAnnotation creates freehand drawings for ink signatures with the isSignature property set to true. The lines and boundingBox parameters remain unchanged, and PSPDFKit.Geometry.DrawingPoint inserts the ink signature, with boundingBox determining its position and size.

Now you’ll see a blue ink signature in the top-left corner of the document.

Resulting image when the ink signature code is applied to the demo project

Adding Image Signatures Programmatically in SharePoint

In this section, you’ll learn how to programmatically add image signatures to a PDF document in a SharePoint environment using PSPDFKit. Image annotations enable you to insert images into PDF documents from either a URL or a file on the user’s device.

Update the PSPDFKit.load() function inside the React.useEffect hook as follows:

instance = await PSPDFKit.load({
	// Container where PSPDFKit should be mounted.
	container,
	// The document to open.
	document: documentURL,
	toolbarItems: [...PSPDFKit.defaultToolbarItems, saveItem],
});

restoreBlobDownloadInterception = disableBlobDownloadInterception();

// Image signature code.
+ try {
+ 	// Fetches the image via its URL.
+ 	const request = await fetch(
+ 		'https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80',
+ 	);

+ 	// Converts the image to a blob.
+ 	const blob = await request.blob();

+ 	const attachmentId = await instance.createAttachment(blob);

+ 	const annotation = new PSPDFKit.Annotations.ImageAnnotation({
+ 		pageIndex: 0,
+ 		contentType: 'image/jpeg',
+ 		imageAttachmentId: attachmentId,
+ 		description: 'Image Description',
+ 		boundingBox: new PSPDFKit.Geometry.Rect({
+ 			left: 30,
+ 			top: 20,
+ 			width: 300,
+ 			height: 150,
+ 		}),
+ 	});

+ 	await instance.create(annotation);

+ 	console.log('Image annotation created successfully.');
+ } catch (error) {
+ 	console.error('Error creating image annotation:', error);
+ }

In this code snippet, you create an ImageAnnotation by passing several properties, such as pageIndex, contentType, imageAttachmentId, description, and boundingBox:

  • pageIndex specifies the page number on which the image annotation is added.

  • contentType specifies the MIME type of the image file.

  • imageAttachmentId specifies the ID of the attachment that contains the image data.

  • description is an optional property that provides a description for the image.

  • boundingBox specifies the position and size of the image on the PDF document.

Once the image annotation is created, it can be added to the PDF document using the instance.create() method.

Resulting image when the image signature code is applied to the demo project

Creating Signature Fields in PDF Documents for SharePoint

PSPDFKit enables you to easily create signature fields for adding signatures in your PDF documents. To accomplish this in a SharePoint environment, follow these steps to update the PSPDFKit.load() function inside the React.useEffect hook:

instance = await PSPDFKit.load({
	// Container where PSPDFKit should be mounted.
	container,
	// The document to open.
	document: documentURL,
	toolbarItems: [...PSPDFKit.defaultToolbarItems, saveItem],
});

restoreBlobDownloadInterception = disableBlobDownloadInterception();

// Signature field creation code.
+ try {
+	const widget = new PSPDFKit.Annotations.WidgetAnnotation({
+		pageIndex: 0,
+		boundingBox: new PSPDFKit.Geometry.Rect({
+			left: 200,
+			top: 200,
+			width: 250,
+			height: 150,
+		}),
+		formFieldName: 'My signature form field',
+		id: PSPDFKit.generateInstantId(),
+	});

+	const formField = new PSPDFKit.FormFields.SignatureFormField({
+		name: 'My signature form field',
+		annotationIds: PSPDFKit.Immutable.List([widget.id]),
+	});

+	await instance.create([widget, formField]);

+	console.log('Signature form field created successfully.');
+ } catch (error) {
+	console.error('Error creating signature form field:', error);
+ }

In the code snippet above, you can create a new signature field that allows users to sign within that specific field. The PSPDFKit.Annotations.WidgetAnnotation function is used to define the properties of the signature field, such as its page index, bounding box dimensions, and form field name. The PSPDFKit.FormFields.SignatureFormField function is used to specify the name and IDs of the annotations associated with the signature field. Finally, the instance.create() function is used to create the signature field and add it to the PDF document in SharePoint.

Conclusion

This comprehensive post provided detailed instructions for integrating PSPDFKit for Web into SharePoint Online pages using a web part.

Adding an electronic signature to a document in SharePoint using PSPDFKit is a straightforward process that ensures secure and efficient document workflows. By following these step-by-step instructions, you can quickly add electronic signatures to your SharePoint documents and enhance your team’s collaboration capabilities. Remember to choose a reputable electronic signature solution like PSPDFKit to guarantee the security and legality of your signed documents.

To see a list of all web frameworks, contact our Sales team. Or, launch our demo to see our viewer in action.

Related Products
Share Post
Free 60-Day Trial Try PSPDFKit in your app today.
Free Trial

Related Articles

Explore more
PRODUCTS  |  Web • Releases • Components

PSPDFKit for Web 2024.2 Features New Unified UI Icons, Shadow DOM, and Tab Ordering

PRODUCTS  |  Web

Now Available for Public Preview: New Document Authoring Experience Provides Glimpse into the Future of Editing

PRODUCTS  |  Web • Releases • Components

PSPDFKit for Web 2024.1 Adds LTV Support for Digital Signatures and Improves the Document Editor UI