Creating a signature box in a Customized Sharepoint Form

(0) Share

Report

Posted on by StanP

Hello Community,

I m trying to make a Customized SharePoint Form that has a signature field.

I've watched some videos but I cant seem to make it work. I have the following things:

I added a custom datacard(that is not a sharepoint list column) , I put a PenInput field there and added 2 buttons - 1 for Sign(when you sign the field , this should submit the signature) and one to Clear the PenInput.

On the button to sign's OnSelect property :

Set(varSig, JSON(Sig.Image, IncludeBinaryData));Set(VarSigned, true)

On the Clear button's OnSelect Property I have variables that I have put in the PenInput reset property:

UpdateContext({clearPenInputFlag:true});UpdateContext({clearPenInputFlag:false})

I also have a column(Single line of text) called Image Update , that would (in my head) store the varSig binary code.

On the Default Property of the field in the Image Update column(the text field) I have:

varSig

Additionally , I have a Image control inserted into the DataCard where the PenInput control is.

On above mentioned Image control on the Image property I have:

Substitute(varSig,Char(34),"")

When I create an item in the SharePoint List , I sign it and submit the form. When I open a new Item, and sign again as another user* , The varSig value changes and it updates the image control of all the list items and I want to avoid that.

The outcome should be , every single signature is stored uniquely within the SharePoint List item.

Where am I going wrong with this?

Would appreciate the help!

Thank you!

Categories:

Building Power Apps

I have the same question (0)

All responses (5)

Answers (1)

WarrenBelz 153,034 Most Valuable Professional on at

Like (0)

Report
Hi @StanP ,

You generally need a Multiple Lines of Text (plain) to store an image in Base64 as you are doing, however the main issue is how you are writing the data to SharePoint (which is not clear in your post). I use something similar to you, but set a Variable on a save icon

UpsdateContext( { varSign: Substitute( PenInputName.Image, """", "" ), varSigned:false } )

varSigned simply hides the signature control and shows the Image control
The Update of the DataCard is then

If( !IsBlank(varSign), varSign, ThisItem.SignatureFieldName )

The Image control Image is the same as above.
How are you updating the field in SharePoint?

Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.

Was this reply helpful? Yes No
StanP 88 on at

Like (0)

Report

Thanks for the reply @WarrenBelz ,

I m not sure I understood you correctly, the PenInput control does not have a OnChange property?

In my head I was imagining it like this:

You sign the PenInput box , press the sign button, that translates a base64 code in a textinput field(multiline column in SharePoint created for that) , and the image control looks up that text input field and gets the image from there , but I cant seem to make the textinput save the code uniquely for that SharePoint item. So everytime you sign it , that image control looks up its respective textinput field for the item and just displays the image from there.

Sorry If I m not making sense , the way I m trying to make it work does make sense in my head 😄

Was this reply helpful? Yes No
Verified answer

WarrenBelz 153,034 Most Valuable Professional on at

Like (0)

Report
Hi @StanP ,

Problem with free-typing responses - I went back to one of my apps and I have a save icon that does this (the rest however is the same). I have updated my post to reflect the actual code.

So the key items here are: -

Save the pen input Base64 code to a Variable using a Save icon (or similar)

After this, hide and reset the pen input and unhide the Image control and display the variable in it.

The Update of the data card is either the pen input if the variable is not blank or the field value so you do not overwrite existing data if the signature is not present in the Pen Input.

Once saved, the image control displays the field value (the signature) as the Variable is now blank (which is cleared after the save and also on Screen OnVisible).

I can assure you it works effectively.

Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.

Was this reply helpful? Yes No
WarrenBelz 153,034 Most Valuable Professional on at

Like (1)

Report

Hi @StanP ,

Just checking if you got the result you were looking for on this thread. Happy to help further if not.

Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.

Was this reply helpful? Yes No
StanP 88 on at

Like (0)

Report

Hey @WarrenBelz ,

Was just coming back to this thread . I managed to make it work like this :

On the "Sign" button's OnSelect property :
Set(varSig, JSON(Sig.Image, IncludeBinaryData));

On the Image control's image property:
Substitute(DataCardValue14.Text,Char(34),"")

Default Property of the multiline text:
If(!IsBlank(Parent.Default),
Parent.Default,
varSig)

MultiLineText's DataCard update property :
If(
!IsBlank(varSig),
varSig,
MultiLineTextValue.Text
)

And I have variables on the Sig(PenInput Control)'s reset property for reset:
UpdateContext({clearPenInputFlag:true});UpdateContext({clearPenInputFlag:false})

You did give me guidance on this and it seems to work as far as I have tested it .

Thank you!

Was this reply helpful? Yes No