There are a lot of methods out there for capturing signatures in canvas apps, tailored to many different data sources. This isn’t particularly surprising, as canvas apps are very popular for front-line work, where you often need a signature from a customer or contractor.
With Microsoft Dataverse image columns, there is a quick and easy way to not only capture your signatures, but also store them right in the relevant record. Start by creating an image column in Dataverse:
This doesn’t have to be the primary image for your table, this method will work regardless of how many different image columns your table has.
In your canvas app, add a Pen Input control for capturing your signature. Name this control penSignature and resize it to an appropriate size for signing a name. There is a catch to this method, however. In order to save on storage space, Dataverse will automatically crop your image. So be sure that your pen input has the same height and width properties.
Now add an edit form connected to the table that has your signature column. Include your signature field on the form:
The image card comes with an image input control that covers the image to be displayed. We could delete this control, but there are a lot of properties tied to it that would all need to be approached. An easier method is to simply hide the control (AddPicture).
Now we want to link the image we capture in our pen input to the image displayed on the form. Select the form image (usually called image by default) and change the Image property to penSignature.Image (you will probably need to unlock the data card):
Play your app and try adding an image to the pen input control. You should see this image display on your form image:
Now let’s try submitting the image and see if it displays in a gallery. Create a button and set its OnSelect property to SubmitForm(Form1) or whatever your form name is. Create a gallery and set the default image field that comes with it to your signature image.
Create a record and submit it, you will see the image appear in the gallery:
- Quick and easy to deploy.
- Uses the same data source to store the signature as the rest of the form.
- No long strings for encoding the image file.
- Multiple signatures can be stored in multiple image columns
- Must use a square pen input control to avoid having your signature cropped. This can possibly make your app look a little unwieldy. But bear in mind, you probably won’t display signatures in a gallery, so if you have a dedicated approval screen you should be able to size it appropriately.