This sample shows how you can create a Power Apps canvas app to capture a users signature and then save it to a Dataverse record. This solution also allows you to avoid using a 3rd party solution to capture the signature portion.
This solution requires using a premium license of Power Apps (i.e. not the seeded version of O365/M365). You must have an environment with a Dataverse database provisioned.
You can download the sample solution for this here to play around with yourself in Power Apps!
Details on importing solution files can be found on our online docs below,
This solution leverages the new File field type in Dataverse to save the captured Pen Ink signature input and save it.
Create a new custom entity called Signature.
Add two new custom fields (neither has to be required fields)
- Signature Image => File field type
- Signature Date => Date and Time type
Create a new Canvas App in your Power Apps environment. Then add a new edit form to the first screen.
Then add the Signature entity as a data source for the edit form.
Next, configure the fields for your edit form to include the Signature Image field and the Signature Date fields.
In this case, we want to make sure the edit form is only used for new entries. Set the Edit Form's DefaultMode property to FormMode.New,
Now we want to specify the default value for the Signature Date field to be the current date and time. First unlock the field properties for Signature Date,
Now we can set the new Default property to "Now()",
Next we want to modify the automated field for Signature Image. Expand the controls for the Signature Image control card. Then unlock the properties,
Remove all controls except the DataCardKey control,
Add a Pen Ink control in the Signature Image data card control,
Resize the Pen Input control to fit better in the Edit Form,
Now we need to set the Update property on the control to save back to the File field type. To save to the File field type you need to specify two values. The first is the filename (in this case I named it Signature.jpg). You also need to save the image itself that is returned from the Pen Ink control.
By default the Pen Ink control will show different ink styles and options. If you want to not show those, you need to disable that in the ShowControls setting by changing it to "false",
Your edit form should now look like this,
Lastly, click on the preview icon in the upper right of the editor. Fill out the form and click on the check icon. This will now save your first entity that includes an electronic signature!
The completed canvas app is packaged in a solution if you want to play around with this more,