Overview

This Solution/Implementation enables Digitally signing documents using Tools in Office 365.

We will use PowerApps as our User Interface for getting the Signature, SharePoint Online for storing both the Document Template and the Digital Signatures, and lastly Flow for running the Processes.

Create a simple Document Template

  1. Using Microsoft Word, create a new Blank Document
  2. You will need to enable Developer Tab
  3. Insert some Text in your document

  4. Go to the Developer Tab and Insert a Picture Control

  5. From the Developer Tab, Insert two Plain Text Control

  6. Your document should look something like below

  7. You should name each control so you can easily populate them later

  8. Save your document with a .docx extension and upload to a SharePoint Online Document Library.

Create a Microsoft Flow for Saving the Signatures

Next step is to create a PowerApps triggered flow that will take a Pen Input and save to a SharePoint Online Document Library (You can also use OneDrive).

This solution is based from this blog by John Liu.

  1. Create a Flow with a PowerApps Trigger

  2. Create a condition that will always be false
  3. Inside If Yes, add a Send an Email Action (Use V1). This will not send we just need the action.
    Expand Show Advanced Options, and fill in the Attachments Name and Attachments Content with Values from Ask in PowerApps


  4. Add a new Step outside the Condition with Action - Create File (SharePoint). Choose your SharePoint Document Library and Folder where you would want to save the Signature. For File Name and FIle Content use the values we've passed on Send an Email action respectively.


Create a PowerApp with Pen Input Control

Next step is to create a PowerApp to take the Signatures.

  1. Create a Blank Canvas App (Phone or Tablet). Better if in Landscape Orientation.
  2. Insert a Pen Input Control and a Button

  3. Associate the Button to the flow we've created earlier

  4. For the Filename, I'll be passing the User's email and a .jpg extension. You can customize the file name by adding Identifiers such as Item ID, Application Name where the signature is generated for. In File Content, pass the Pen Inputs Image Property.
  5. Run the PowerApp, Use the Pen Input and click the Submit Button. The image should be save on the Document Library Folder you have set using MS Flow


Create another Flow to Populate the Document Template with the Signature

The last step is to create a Flow to use the Signature we created. I'll be using a Manual Trigger for this Example but you should be able to trigger the flow from PowerApps or via an Approval Process for a more realistic implementation.

  1. Add a Get File Content (SharePoint) Action to your Manual Trigger Flow. 
    This is where the File Name Manipulation earlier can come into play as you can Get a Specific Signature using Dynamic Content in Flow.

  2. **Unfortunately, this is a premium connector for now :(** Add a Populate a Microsoft Word Template Action. Start Trial for now.
    Point to the Document Library and Document Template you have created earlier.
    It should auto populate with the Content Controls we have Created.
    For the Photo, pass the File Content from the Get File Content.
    You can pass any value for the rest of the Content Controls.

  3. For the Final Step, I'll be sending the Populated Template to my email. You can also store the File using Create File to a OneDrive or SharePoint Library.
    For attachments name, add a .docx extension.


  4. Trigger the flow and verify the Attachment on the email.
**There may have been an issue with my template so I was not able to populate that last Content Control. There are Content Controls that are not yet supported by Flow to be Populated like Rich Text Control.