cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
MarkCherry
Advocate I
Advocate I

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

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.

 

MarkCherry_0-1619441660191.png

 

2. Add a new column to the SignatureTests table called Signature. The column type is Image.

 

MarkCherry_1-1619441703086.png

 

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.

 

MarkCherry_2-1619441286572.png

 

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.

 

MarkCherry_3-1619441286573.png

 

26. Select the Save Signature button.

 

The image will move from the Pen input control to the AddMediaButton1 Image control.

 

MarkCherry_4-1619441286575.png

 

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.

 

MarkCherry_5-1619441286576.png

 

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.

1 ACCEPTED SOLUTION

Accepted Solutions
iAm_ManCat
Super User II
Super User II

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:

image.png

 

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

@iAm_ManCat


Please 'Mark as Solution' if someone's post answered your question and always 'Thumbs Up' the posts you like or that helped you!


Thanks!
You and everyone else in the community make it the awesome and welcoming place it is, keep your questions coming and make sure to 'like' anything that makes you 'Appy
Sancho Harker, MVP


View solution in original post

5 REPLIES 5
cchannon
Solution Supplier
Solution Supplier

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
Super User II
Super User II

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:

image.png

 

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

@iAm_ManCat


Please 'Mark as Solution' if someone's post answered your question and always 'Thumbs Up' the posts you like or that helped you!


Thanks!
You and everyone else in the community make it the awesome and welcoming place it is, keep your questions coming and make sure to 'like' anything that makes you 'Appy
Sancho Harker, MVP


View solution in original post

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. 🙂

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

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 🙂

@iAm_ManCat


Please 'Mark as Solution' if someone's post answered your question and always 'Thumbs Up' the posts you like or that helped you!


Thanks!
You and everyone else in the community make it the awesome and welcoming place it is, keep your questions coming and make sure to 'like' anything that makes you 'Appy
Sancho Harker, MVP


Helpful resources

Announcements
PA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

MBAS Attendee Badge

Claim Your Badge & Digital Swag!

Check out how to claim yours today!

secondImage

Demo Extravaganza is Back!

We are excited to announce that Demo Extravaganza for 2021 has started!

MBAS on Demand

Microsoft Business Applications Summit sessions

On-demand access to all the great content presented by the product teams and community members! #MSBizAppsSummit #CommunityRocks

Top Solution Authors
Top Kudoed Authors
Users online (53,273)