Add image from document library to list item - Canvas Form Signature

[sudosaurus]

Hello,

I have followed Shane Young's tutorial on how to add a PenInput control to a PowerApps form and save an image to SharePoint.

This is working and is saving the image to a SharePoint document library.

Essentially what I want to do now is that once the Image has been saved and the PowerApps form has been saved to a list, I want my PowerAutomate flow to grab the image saved from the form and attach it to the SharePoint attachments column - so this would be adding the file from the document library and into the SharePoint list item just created.

Advice appreciated

[v-bacao-msft]

Hi @sudosaurus ,

If you can already store pictures in the SharePoint Library, you can use the Get file properties action and Get file content action to get the file name and file content, and then add the picture as an attachment to the List item.

You can share screenshots of the Flow configuration so that we can provide you with appropriate suggestions.

Best Regards,

[sudosaurus]

Hi @v-bacao-msft ,

Thanks for the pointers - the attachment still isn't adding to the list item for me - please see the screenshots from my flow below:

Its worth noting that the Create file stage completes and saves a signature image from PowerApps into a file format as similar to below:

Example file saved into document library: 2020-01-29T10_36_03.2147567Z.jpg

Create file

File Name: concat(utcNow(),'.jpg')
File Content: triggerBody()['Createfile_FileContent']

Currently it seems logical to create the SharePoint list item first and then going back into the form afterwards to save the signature as I'm not sure how the flow would work if the item is not already created without putting some kind of pause in first? Then the OnSubmit would need to be changed in PowerApps to indlude the signature.

Hope you can help me resolve this.

[sudosaurus]

@v-bacao-msft ?

[Mrfunk]

Hi @sudosaurus, did you figure out a solution to achieve this? I'm trying to do the exact same thing and have been struggling for days now! Thank you so so much!

[sudosaurus]

Hi @Mrfunk 

So what you want to do first is use this code on the submit button of your canvas app:

Set( 
    varSIG,
    JSON(
        PenInput1.Image,
        IncludeBinaryData
    )
);
Set(
    varSIG,
    Mid(
        varSIG,
        24,
        Len(varSIG) - 24
    )
);

PenInputToSharePoint.Run("Signature " & DataCardValue15.Text &".jpg" ,varSIG,DataCardValue15.Text);
SubmitForm(SharePointForm1)

Then set the Visible property of your pen input control to:

If(IsBlank(LookUp(ReplacementKitSignatures,ReplacementRef = DataCardValue15.Text).'Link to item'),true,false)

*"ReplacementKitSignatures" is a document library where the signature image is stored.

You will need to insert an image control directly on top of the pen input control and set its Image property to:

LookUp(ReplacementKitSignatures,ReplacementRef = DataCardValue15.Text).'Link to item'

*This will allow the saved signature to be displayed in the form when opening in Edit/Read modes once its been submitted!

Then use this example in Power Automate:

File name: triggerBody()['CreateFile_FileName']

File Content: base64ToBinary(triggerBody()['CreateFile_FileContent'])

ReplacementRef: triggerBody()['Updatefileproperties_ReplacementRef']

Hope this helps! 🙂 

[Mrfunk]

@sudosaurus Thank you so very much!! I will try this out! 🙂 I appreciate you taking the time to respond to me!

[sudosaurus]

@Mrfunk no worries dude, let me know how you get on! 😎