Convert PowerApps data to PDF and send it as an Email

Muhimbi has an excellent BLOG which Convert PowerApps data to PDF (with some help from Microsoft Flow), however the article has its own limitation.

  1. It has a dependency on FLOW.
  2. You cannot pass Images(from Camera Control) from PowerAPP to FLOW(Nothing to do with Muhimbi, its a Microsoft-FLOW limitation).

In this example we will Convert PowerAPPs data, including images to PDF without the help of Microsoft FLOW. So, let’s get started.

The focus of this post is on how to use PowerApps to capture data and turn that data into a richly formatted PDF. Please note, that this article is NOT about converting the layout of the PowerApp screen to PDF. Due to architectural difficulties, that is currently not possible.

In this post we will:

  • Create a simple PowerApps form to capture user data.
  • Use, Muhimbi Methods to use the captured data, enrich it with HTML, and convert it to PDF.

To keeps thing easy to understand, we carry out the actual PDF generation, display it on the PowerAPPs PDF viewer and then send the PDF as an email.

Prerequisites:

Before you begin, please make sure the following prerequisites are in place:

  • An Office 365 subscription with access to PowerApps
  • Muhimbi PDF Converter Services Online full, free or trial subscription(Start Trial)
  • The appropriate privileges to create PowerApps.
  • Working knowledge of PowerApps. This is not a generic PowerApps Tutorial.

Step 1: Building the PowerApps.

Let’s begin by creating a PowerApp. It doesn’t really matter what it looks like, as long as it contains two text fields named EmailTextInput, TextInputName two a buttons named ViewPDFButton, Send PDF and PDFViewer1.

PowerappsWeb

Step 2:Adding the Data-Source.

Click on the top “View” tab Data source, in the Data pane (which opens automatically), click “+ Add a data source” and add the MuhimbiPDF and Office365(Outlook) data sources.

Datasource

Step 3: Understanding Muhimbi Action and Method.

Now, this is where things get slightly tricky, as we need to Set the variable for the data and pass it to Muhimbi [MuhimbiPDF.converthtm] action as HTML String. Note: The sky is the limit when it comes to HTML formatting  but let’s not go overboard for this simple example. In this case the contents of the TextInputName.Text and EmailTextInput.Text and Camera1.Photo fields.

We build and associate the Formula, to “View the PDF” button.

The Fomula’s for both “View the PDF” and “Send PDF as Email” can be downloaded at:Download Fomula’s

The Final formula looks like:

MuhimbiFormula

Let’s break down the above formula to understand it better.

Photo

We are setting the “image” variable to Camera1.Photo. 

Concate

Set the Variable PDF to MuhimbiPDF.converthtml Muhimbi Action.

SetMuhimbi

The MuhimbiPDF.converthtm excepts an HTML String Input so we build the HTML String with the help of “Concatenate” function in PowerAPP.

Concatenate Formula

Note:  I am using the Concatenate method so that I can easily pass PowerApps Data field “TextInputName.Text” and “EmailTextInput.Text” and “Camera1.Photo” Image variable to the MuhimbiPDF.converthtm Action. Generating the HTML String is a bit Tricky, so be very careful when you are building the HTML String.

The Formula associate with “View the PDF” Button, OnSelect Function.

ViewPDF

ViewPDFFormula

Step 4: Associating the PdfViewer1, Document property to PDF.processed_file_content.

PDFViewer

PDF

The PDF.processed_file_content hold the Base64 Converted PDF file string.

It will Display the Converted PDF Content in the PDF viewer.

DisplayPDF.png

Step 5: Associate the “Send PDF as Email” Button OnSelect function, to the Formula below.

Submitbutton

Sendemail

Sendemaila

Step 6: Output when you click, “Send PDF as Email” button. It includes the PDF

Output.png

I hope this article will help you in building Powerful PowerApps with Muhimbi Converter Service Online.

Thanks for reading and Happy Converting with Muhimbi Converter Service Online 🙂.

Advertisements

2 thoughts on “Convert PowerApps data to PDF and send it as an Email

  1. I can get everything to work EXCEPT the image. I am trying to add an image that is in my app to the pdf. it is not associated with the camera though. for some reason the image will not appear. can you help me with this?

    Like

    1. Hi Evie,

      The problem with PowerAPPS Image control is that it does not return a base64 string, it just returns a URL “appres://resources/page”.

      If you have a static Image in your PowerAPP e.g. a company logo, you can use an anonymous image URL\link and format it within the MuhimbiPDF.converthtml Muhimbi Action.

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s