Saving Pen Input Images to a CDS/Dataverse table without using Power Automate

[MarkCherry]

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:

1. Add an Image column to a Dataverse table (I called the table SignatureTests and the column Signature).
2. Add a Add picture control
3. Hide the Add Picture sub-control
1. Visible: false
4. Edit the Image sub-control properties:
1. Image: currentSignature
2. Visible: true
5. Add a Pen input control called PenInput1:
1. Reset: clearPenInputFlag
2. Mode: PenMode.Draw
3. DisplayMode: DisplayMode.Edit
4. Visible: true
6. Add a Button control:
1. Text: "Save Signature"
2. 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.

[cchannon]

Great build, @MarkCherry  - and VERY well documented!

In general, though, this forum is for questions and seeking help with Dataverse issues. This post would probably be better suited to the Samples, Learning and Videos Galleries area. That would help more people find your fun example and get use out of it! Thanks again for sharing!

[iAm_ManCat · Accepted solution]

Hi,

I think you can do this directly using the PenInput control instead of using all the other pieces - I ran a test and was able to produce this:

1. Create image column in table,

2. Set button to:

UpdateContext({currentSignature:PenInput1.Image}); 
Patch(TestSigs, Defaults(TestSigs), {SigName: "Test Patch1", SigTest2: PenInput1.Image});

3. Press button, item shows up in gallery below that points to that dataverse table

Is there any reason you weren't able to do this before, happy to help if you're having issues with it.

Cheers,

Sancho

[MarkCherry]

Thanks @cchannon, this was my second post. I'll remember to place them in the correct area next time. It's all a learning curve at the moment. 🙂

[MarkCherry]

Hi @iAm_ManCat,

I think I missed your solution because of the way I discovered my solution. I was brand new to Power Apps and Dataverse, and was working with an Edit form card and the Image column. I search for a solution to adding the Pen input control image to the Dataverse table but only found the Power Automate solutions. I was unfamiliar with Power Apps pattern of passing information between controls using local or global parameters.

I tried to do a straight reference of the Pen input image into a Patch statement but that didn't work.

After I got my solution working in the Edit form card I simplified it to work outside of the Edit form. I simply overlooked your simplified solution.

I'm glad there is now somewhere where others may find the answer to this.

Regards,

Mark

[iAm_ManCat]

There are certainly many ways to do the same thing in the platform! 😺

Welcome to the community, and I hope to see many more posts from you in future 🙂

[MH_Hassan]

The images being saved in the Dataverse are of Base64 type, How to save them as png or jpeg? I need the image in a pdf but the image control in the template is giving the error of "Please provide an image of png/jpeg format". Please answer ASAP.

[westerdaled]

Hi has anyone tried embedding a similar canvas app into a Model-driven app? When I run the Canvas App as standalone app, I can update an image field in the dataverse table with one of my squiggles. Note, there is a noticeable delay as the field gets updated. Conversely,  Inside the Model-driven app, the patch statement appears to work ( with no noticable delay)  but the image field does not get updated.  

UpdateContext({customerSignature:penSignatureInput.Image}); 

  Patch(
    'Home Deliveries',
     ModelDrivenFormIntegration.Item,
    
    {
         
        'Customer Signature': penSignatureInput.Image  
    }
);


If (
    !IsEmpty(Errors('Home Deliveries')),
    Notify(
        Concat(
            Errors('Home Deliveries'),
            Column & ":  " & Message
        ),
        NotificationType.Error
    ),
    Notify(
        "Customer Signature added to Home Delivery record",
        NotificationType.Success
    );
   
);