Power Apps Add An Image To A PDF Form

Imported reference from Matthew Devaney's blog for learning purposes. Original: https://www.matthewdevaney.com/power-apps-add-an-image-to-a-pdf-form/. Author: Matthew Devaney.

Power Apps Add An Image To A PDF Form Posted by - Matthew Devaney on - June 26, 2022 27 Comments

Power Apps can be used to collect data and display the results on a PDF document with the help of Power Automate. Populating text fields in a PDF is easy but figuring out how to add an image is not as straightforward. However, you must know how to insert images to show a customer’s signature on a contract or a picture of something that failed during an inspection. In this article I will reveal how to add an image to a PDF Form in Power Apps. Table of Contents Introduction: The Sales Contract App

Create A Sales Contract App In Power Apps

Enable The Developer Tab In Microsoft Word Add An Image Field To The Word Document Template

Save The Word Document Template To OneDrive

Generate A PDF From A Word Document Template Using Power Automate

Transfer Signature Image From Power Apps To A Power Automate Flow

Generate The PDF Contract From Power Apps Introduction: The Sales Contract App

Salespeople at a selling & marketing company use the Sales Contract app to collect a contract signature from their customers. A signed a PDF copy of the contract is sent to both the salesperson and the customer. The PDF contract looks like this:

Create A Sales Contract App In Power Apps

Open Power Apps studio and create a new tablet app from blank. Place a label with the words “Sales Contract” at the top of the screen.

Next, insert another label directly below with the contract text.

The Lorem Ipsum placeholder text for this example can be found below. " Lorem ipsum dolor sit amet , consectetur adipiscing elit . Phasellus molestie turpis eget magna tempus , ut aliquet orci facilisis . Morbi a vestibulum orci . Fusce at tristique elit . Pellentesque mattis urna egestas est dictum interdum . Morbi malesuada varius enim ut maximus . Ut aliquam ipsum purus , porttitor congue nulla auctor non . Vivamus ex risus , dictum a feugiat porttitor , egestas quis enim . Nam metus dolor , finibus eu ex nec , pretium viverra orci . Donec ut tempor ligula . Pellentesque varius congue mi , at scelerisque enim lobortis at . Nullam sollicitudin sollicitudin tortor sed condimentum .Nullam convallis tempor feugiat . Sed vitae consequat lacus , a interdum elit . Nam erat tortor , vestibulum vitae finibus vitae , tempor et nisi . Aenean in felis ultricies , scelerisque eros quis , dapibus elit . Sed pretium ipsum eget nunc accumsan , imperdiet efficitur risus tempor . Duis dictum a velit quis ultricies . Nam interdum imperdiet justo ut auctor ." Code language: CSS ( css )

Then add a pen input control and place it below the contract text. This is all we must do to setup the app for now. We will return to it later to insert a submit button.

Enable The Developer Tab In Microsoft Word

When the sales contract is submitted in Power Apps the customer’s signature gets applied to a PDF sales contract. We will create the sales contract template in Microsoft Word and then apply the signature and convert to PDF using Power Automate. Open Microsoft Word and start a new document. Insert the text shown below.

Then right-click on any tab in the ribbon and choose Customize the Ribbon .

Check the Developer box and press OK. Now the developer tab will appear in the ribbon and allow us to create a Word document template.

Add An Image Field To The Word Document Template

In Power Apps the customer will sign at the bottom of the contract. We will need an image field at the bottom of the Word document template to display the signature. Add an image field to the contract.

Right-click on the image and choose Size and Position .

Uncheck lock aspect ratio and choose a height and width. In Power Apps my pen input had a height of 216 and a width of 563 of I chose 2.16″ and 5.63″.

Next, highlight the image field and select Properties.

Input the title and tag Signature Image to identify the field in Power Automate. Save and close the Word Document once finished.

Save The Word Document Template To OneDrive

The Word document template must be stored in a SharePoint document library or OneDrive for Power Automate to access it. In this example we will use OneDrive. Move the sales contract word document template to the root folder in OneDrive.

Generate A PDF From A Word Document Template Using Power Automate

After submitting the contract Power Automate is used to populate the word document template with the customer’s signature image, convert the file to PDF and send the contract as an attachment via email. Open Power Automate and start a new instant cloud flow.

Select the Power Apps (V2) trigger and press Create .

Add a file type input to the Power Apps (V2) trigger named Signature Image and remove the description. Then make the Signature Image required.

Next, add a compose action with the following code. The Word document template requires the image code to be formatted in this way.

Insert a Populate a Microsoft Word template action and point it to the sales contract we created. Use the output of the compose action in the Signature Image field.

Add a Create File action and fill it with the Microsoft Word document body. Then Convert the Word Document to PDF .

And finally Send an Email (V2) with the Sales Contract attached. The Power Automate flow is now completed.

Transfer Signature Image From Power Apps To A Power Automate Flow

Now we will complete the Sales Contract App . Go back to the Power Apps and connect the Generate PDF With Image flow to the app.

Insert a button with the text “Generate PDF” at the bottom of the contract.

Use this code in the OnSelect property of the button to trigger the flow and take the signature image as a flow input. GeneratePDFWithImage .Run ( {

contentBytes : pen_Signature.Image, name: Concatenate ( "signature_" , Text(Now(), "yyMMddhhmmss" ), ".jpg" ) } ) Code language: CSS ( css )

Generate The PDF Contract From Power Apps

Our app, flow and word document template are now complete. Write a signature in the pen input field to and select the Generate PDF button.

After a few moments the Sales Contract PDF is received via email and shows a signature image at the bottom. Did You Enjoy This Article? 😺

Subscribe to get new Power Apps articles sent to your inbox each week for FREE Enter your email address Sign Me Up Questions?

If you have any questions about Power Apps Add An Image To A PDF Form please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion. Matthew Devaney M365 Copilot Power Apps

How To Create Copilot Custom UI Widgets In Power Apps