PowerApps – Store Signatures and Other Media as Text Anywhere

Written by William Watfeh

 

PowerApps is a very flexible and powerful tool, but with that comes limitations, premium licensing, and delegation that most have a workaround.

In this article we’re going to cover a scenario where a client wants a tool to capture a digital signature on PowerApps with no third-party connectors such as “Adobe Signature” or “DocuSign”.

 

Content:

  • Pen input control.
  • Configure Pen input control.
  • Difference between Blob and Base64.
  • Convert signature to Base64.
  • Save Change scenarios
    • Patch to a data source.
    • Store in collection.
  • Display Base64 format.

 

Pen input control:

The tool allows the user to draw on a blank canvas, it has its own controls bar:

  • Draw
  • Erase
  • Clear
  • Line Thickness
  • Line color/transparency

 

Configure Pen input control:

Below are some important properties of PowerApps Pen input control:

  • Color: It sets the color of input strokes.
  • Mode: Draw or Erase mode.
  • DisplayMode: the input control allows user input (Edit), only displays data (View), or is disabled (Disabled).
  • Fill: It defines the background color of the Pen input control.
  • Input: “Deprecated” It defines whether the input supports mouse, pen, or touch inputs. The Default value is “7” that supports all three.
  • OnSelect: When the user clicks the pen input control, it specifies how the app responds.
  • ShowControls: When set to true, it shows the controls bar.
  • Size: text font size that appears on the Pen input control.
  • Visible: Pen input control appears or is in hidden mode.

For more information visit Pen input control in Power Apps – Power Apps | Microsoft Docs

 

Configure Pen input control:

Set “ShowControls” property to false.

We need to change “OnSelect” property as well, now if you Set a variable with “Control.image” you will get blob temp storage URI like “appres://blobmanager/7b12ffa2ea4547e5b3812cb1c7b0a2a0/1” which helps during the session but is useless out of it.

We need to store the value behind the blob URI, to do that you can use JSON function and store it in a variable

“Set(VarSignarure,JSON( PenInput.Image,JSONFormat.IncludeBinaryData ))”

 

Difference between Blob and Base64:

When you see a URI similar to this it is temporary URI unretrievable or shareable doesn’t hold the information just an address to it.

The goal is converting the image from the pen input to text and a great way to do that by converting it to Base64

For more information Data types in Power Apps – Power Apps | Microsoft Docs

 

Convert signature to Base64:

Setting “OnSelect” property to “Set(VarSignarure,JSON( PenInput.Image,JSONFormat.IncludeBinaryData ))” will store the Base64 value in VarSignature

To view the value just add a label and set its “Text” property to VarSignature

To view the image captured add image control and set “Image” property to :

“Substitute(VarSignarure,Char(34),””)”

 

Store in data source: (SharePoint list)

Create a SharePoint list with a multiline text column to store the Base64 code.

And create a button control to patch the image as base64 to SharePoint

Set “OnSelect” property to

“Patch(‘Signature list’,Defaults(‘Signature list’),{Image:VarSignarure})”

 

Store in collection:

update a collection with every time you make a change on the pen input

Add to the pen input control “OnSelect” property:

“;Collect(colSignatures,{SignatureBase64:VarSignarure})”

Then create a gallery to show the collection values and add two controls Text and Image default property set to “Thisitem. SignatureBase64”

 

Display Base64 format

To view any Base64 image code stored as text in image control, set “Image” property to “Substitute({Base64Value},Char(34),””)”

 

Conclusion:

You can quickly and efficiently store any image or media as Base64 and retrieve it on the fly with PowerApps, you can also add encryption layer or many and decrypt it back.

This only adds more bonus as you can now think of different ways of storing and displaying files with PowerApps.