Capture signature in PowerApps Portal
Help UKRAINE ! Your action matters! Donate money to support Ukrainian Army! Donate money to charity fund! Organize/join street protests in your city to support Ukraine and condemn Russian aggression! Expose and report Russian disinformation! #StandWithUkraine
Ability to get customer signature without relying on printed documents is very important in our digital world. And in Dynamics 365 you were able to do so for quite some time with Pen Input component. However, it isn’t possible to do so on the Power Apps Portal, at least with OOTB components. In this article, I will explain how you can easily add support for both capturing and viewing signatures in the Power Apps Portal. This tutorial will not show how to work with signature input inside Dynamics 365 itself. For that one, you can check out this post by PowerObjects. Below you can see the final result of this article.
First, let’s start with the field that will hold our signature. It should be a field of Multiline Text type with Max length of at least 15000 characters. This is because the field will store the signature as a text representation of the image. I created this field on the Contact entity, named it Client Signature and put on both create and edit form.
Next, we need to select a library to actually capture signature in the web. There are a lot of different libraries you can choose from, but in this example, we will use the Signature Pad library. To add this library to our page we need to insert a script tag to our page (you can find it below).
If you are using custom web template just add script tag at the end of your template. If you are using one of the pre-existing templates and don’t want to change them you can add the script tag to the Page Copy part of the page (this will only work if you are using default MS templates or templates that include Page Copy as part of their template). To do so navigate to your web page, find Localized Content and open a web page for a language you need. There scroll to the Content section and in Copy (HTML) field switch to HTML view and add script tag.
Now when we have a code to capture signature we need to have something to show it on an edit form (in a read-only format).
In this article I described an easy way to capture and show signature on Power Apps Portal using Singanture Pad library. Hope you will find this article useful.