Hi,
There are plenty of blog posts around the internet on how to use Power Automate to save Pen input generate images into a CDS/Dataverse table. I have discovered a way of saving Pen input control images in a canvas app without using a Power Automate (previously MS Flow) workflow.
I haven't gone mad (yet!), but I need to talk about the Add picture control first. This control is the secret to saving the Pen input control's output image to the Dataverse table.
If you start with a blank screen and drag an Add picture control onto the canvas, then inspect the Tree view of the screen from the left hand menu, you will see that the Add picture control is a compound control (default name AddMediaWithImage1) made up of the following controls:
Default Name | Type |
AddMediaButton1 | Add Picture |
UploadedImage1 | Image |
The two controls that make up the Add picture control are tied together in a way that you cannot see or edit.
NB. If you delete one of these controls by accident, you will need to delete the parent control (AddMediaWithImage1) then start with a new Add picture control.
We can use the functionality that allows a user to upload a local file from their device into a Dataverse table, to allow the user to draw a picture in the Pen input control and save that image to the Dataverse table instead. It works by hijacking the Image sub-control of the Add picture compound control which then uses the Add picture sub-control of the Add picture compound control to save that image to the Dataverse table.
A high level overview of the steps involved:
- Add an Image column to a Dataverse table (I called the table SignatureTests and the column Signature).
- Add a Add picture control
- Hide the Add Picture sub-control
- Visible: false
- Edit the Image sub-control properties:
- Image: currentSignature
- Visible: true
- Add a Pen input control called PenInput1:
- Reset: clearPenInputFlag
- Mode: PenMode.Draw
- DisplayMode: DisplayMode.Edit
- Visible: true
- Add a Button control:
- Text: "Save Signature"
- OnSelect:
UpdateContext({currentSignature:PenInput1.Image});
UpdateContext({clearPenInputFlag:true});
UpdateContext({clearPenInputFlag:false});
Patch(SignatureTests, Defaults(SignatureTests), {Name: "Auto Patch", Signature: UploadedImage1.Image});
More detailed instructions:
1. Create a new Dataverse table called SignatureTests. The Primary Name Column is left as the default Name column.
2. Add a new column to the SignatureTests table called Signature. The column type is Image.
3. Save the changes to the table.
4. Create a new canvas app application called Pen Input Signature.
5. Select Data from the left-hand menu.
6. Add the SignatureTests table to the canvas app (+ Add data).
7. Select Tree view from the left-hand menu.
8. Add a new blank screen to the application (+ New screen) and rename it to Home.
9. Delete the original screen; we do not need the complexity of the default screen (Screen1) for this demonstration.
10. Drag an Add picture control from the Media controls collection to the top of the Home screen.
11. Select Tree view from the left-hand menu.
12. Expand the AddMediaWithImage1 control so that you can see the sub-controls.
13. Select the AddMediaButton1 sub-control and change its Visible state to Off in the control's Properties in the right-hand panel.
14. Select the UploadedImage1 sub-control and change the Visible state to On in the control's Properties in the right-hand panel.
15. Drag a Pen input control from the Input controls collection to just below the Add picture control.
NB. You might as well make the Pen input control square because it will only produce square images. If the control's shape is wider than it is high, or vice versa, you will get clipping of the image. The Pen input control's edit controls (ShowControls: true) will hide part of the square image that the control generates. i.e., with the controls turned on, the user will not be able to draw on the bottom section of the image.
16. Drag a Button control from the Input controls collection to just below the Pen input control.
17. Switch to the Advanced tab of the Button control's properties in the right-hand panel.
18. Change the Button control's Text to:
"Save Signature"
19. Change the OnSelect method of the Button control from false to:
UpdateContext({currentSignature:PenInput1.Image});
UpdateContext({clearPenInputFlag:true});
UpdateContext({clearPenInputFlag:false});
Patch(SignatureTests, Defaults(SignatureTests), {Name: "Auto Patch", Signature: UploadedImage1.Image});
20. Switch to the Advanced tab of the Pen input control's properties in the right-hand panel.
21. Change the Reset property to:
clearPenInputFlag
22. Switch to the Advanced tab of the UploadedImage1 Image control's properties in the right-hand panel.
23. Change the Image property from:
If(IsBlank(AddMediaButton1.Media), SampleImage, AddMediaButton1.Media)
to:
currentSignature
24. Run the canvas app in Preview mode.
25. Draw an image using the Pen input control.
26. Select the Save Signature button.
The image will move from the Pen input control to the AddMediaButton1 Image control.
If you close the Preview mode and return the the designer and inspect the data in the SignatureTests table, you will see that the image you drew with the Pen input control has been saved to the SignatureTests table.
It is possible to use the Add picture control to save the Pen input image to a Dataverse table when using an Edit form control as well.
