Saving users signatures images in a collection and populating them

[Julien2]

Hello,

In a PowerApps app, I have a screen where the users add their signatures inside the PenInput box and inside this screen, I have a button that updates a field in SP List.

What I am trying to achieve is the following:

I want to save for each (current) user signed in their signature image and populate the image signature that is related to the user when they want to sign a report.

For example:
If a user came to sign and it was his first time he will scrabble inside the box to add his signature and when he submit I want to store this signature image that is related to the current user signed in, inside a collection. After that, if the same user came back the next time to add his signature for a new report, here I want a condition that checks if he already has the signature image in the collection so instead of showing the PenInput box and scrabble his signature again I want to populate his signature image that was saved the first time he updated his signature. And vice versa if he never added his signature it will show the PenInput instead.

Is it possible to achieve the above scenario?

Can please someone explains in detail and provide an example?

Any help will be greatly appreciated.
Thank you!

[v-xida-msft · Accepted solution]

Hi @Julien2 ,

Do you want to use Collection to store the Signature picture for the signed user when he sign in report first time?

If you want to use Collection to store the Signature picture for the signed user when he sign in report first time, I afraid that there is no way to achieve your needs.

The Collection in PowerApps app is a temporary data, which would be destroyed when you close your canvas app. When you re-open your canvas app, the previous saved Signature would be lost.

As an fixed solution, you could consider add a "Multiple Lines of Text" type column in your SP List, then save the Signature picture back to this Multiple Lines Of Text type column.

On your side, you could consider use Patch function to submit data from your canvas app back to your SP List. Please take a try with the following formula:

Patch(
      'Your SP list',
      Defaults('Your SP list'),
      {
        UserName: User().FullName,
        MulLineTextField:  Substitute(JSON(PenInput1.Image, JSONFormat.IncludeBinaryData), """", "")
      }
)

Set the Visible property of the Pen Input Box to following:

If(
   !IsBlank(LookUp('Your SP List', UserName = User().FullName, MulLineTextField)),
   false,
   true
)

You could add a Image control in your canvas app, set the Image property to following:

LookUp('Your SP List', UserName = User().FullName, MulLineTextField)

If current sign in user has stored a Signature picture into your SP List, the above Image control would display proper image data.

More details about storing image data back to SP List, please check and see if the following thread would help:

https://powerusers.microsoft.com/t5/Building-Power-Apps/Uploading-images-to-SharePoint-list-without-...

Best regards, 

[Julien2]

Hello @v-xida-msft ,

Thanks for providing an example and clarified about the collection functionality. I have tried the solution above which makes it works as expected.

But unfortunately, I am still stuck on the visible property of the submission button. This submits button shows only if the Popup variable is true and if the PenInput1.Image is not null. Currently, I have tried to add the following function below which should also check if the Image exists then it should show the button else it should not but it's not working which means it's always invisible and if I used or between the PopUp and the Empty sign the buttons show but if I closed the popup the button keeps appearing:

PopUp && EmptySign<>PenInput1.Image || If(
!IsBlank(LookUp(UsersSignatures, UserName = User().FullName, ImageText)),
false,
true

2. onSelect property, I have a function that also sends for the users their signatures based on the PenInput1.Image, so in what should be the function instead to send for the current user the image that is stored in the SP list?

Office365Outlook.SendEmailV2(
CURRENT USER?, 
SelectedReport.ID,
varHTMLImage,
{
Attachments:
Table(
{
Name:"FirstApprovalSignature.jpg",
ContentBytes:PenInput1.Image, // What should be here to get Current user image stored in the sp list to send it in the email?
'@odata.type':""
}
)
}
);

Finally, I received delegation warnings based on this function is that, okay, knowing that my data row limit for non-delegable queries is 2000 in the application.

Looking forward to your response.
Thanks again!

[v-xida-msft]

Hi @Julien2 ,

Is the solution I provided above helpful in your scenario?

Regarding the questions that you mentioned is about another issue, please consider open another ticket in our Community, we could help you there.

If the solution I provided above could achieve your needs, please consider go ahead to click "Accept as Solution" to identify my reply as Solution.

For your additional questions:

For your first question, could you please share a bit more about the EmptySign variable? Based on the formula that you mentioned, I think there is something with filter condition which you use to check if the Pen Input is Empty. I have made a test on my side, please consider take a try with the following workaround:

Set the OnVisible of the screen which contains the Pen Input Control to following:

Reset(PenInput1);
Set(EmptySignature, Substitute(JSON(PenInput1.Image, JSONFormat.IncludeBinaryData), """", ""));
Set(IsStart, false);Set(IsStart, true)

Add a Timer control in your screen, set the Duration property to following:

2000

set the Start property of the Timer control to following:

IsStart

set the Repeat property of the Timer control to following:

true

set the OnTimerEnd property of the Timer control to following:

Set(CurrentSignature, Substitute(JSON(PenInput1.Image, JSONFormat.IncludeBinaryData), """", ""))

set the Visible property of the Timer control to false.

Then set the Visible property of the "Submit" button to following:

If(
   PopUp = true && EmptySignature <> CurrentSignature,
   true,
   false
)

More details about how to detect if the Pen input is empty

For your second question, you could not get the stored signature data from your SP List, and assign it to the ContentBytes property within your Office365Outlook.SendEmail() function. The ContentBytes property under Attachments argument is required to provide a Blog data, but the signature data stored in your SP List is a Text value.

As my previous reply, you could add a Image control in your app, set the Image property to following:

LookUp(UsersSignatures, UserName = User().FullName, ImageText)

Then you could modify your Office365Outlook.SendEmail() function as below:

Office365Outlook.SendEmailV2(
CURRENT USER?, 
SelectedReport.ID,
varHTMLImage,
{
 Attachments:
            Table(
                   {
                     Name:"FirstApprovalSignature.jpg",
                     ContentBytes: Image1.Image,   // Reference image data from the Image control
                     '@odata.type':""
                   }
            )
}
);

For your third question, you could consider set the OnStart property of the App to followeing:

Set(CurrentUser, User().FullName)

then you could modify your LookUp formula as below:

LookUp(UsersSignatures, UserName = CurrentUser, ImageText)

then the Delegation warning issue would disappear. Please re-load your app to fire the OnStart property of App, then the issue would be fixed.

Best regards,

[Julien2]

Hello @v-xida-msft ,

Yes, it was helpful and I have accepted as a solution. For the next time, I will post another ticket in the community about other questions.

1. I have initialized the EmptySign variable onSelect property of a button that shows the Popup in the same screen and which is the following:

Set(SelectedReport,ThisItem);UpdateContext({PopUp:true});UpdateContext({EmptySign:PenInput1.Image});

Everything is working fine except the visibility of the submit button and what's not working is that if the signature image already exists and appears in the Popup the submit button doesn't appears for another new item for the user be able to submit and send the email whereas if the first time he signed everything works as expected.

Please have a look at the below GIF which shows a new item that the user should submit his signature for this new item and how the submit button is not appearing:

Any suggestions to solve this issue?

Looking forward to your response.
Thank you!