Convert Multiple Power Apps Media Controls from The Power Apps Screen to HTML and PDF

In this Post, we’ll convert Power Apps data- including ‘textual’, ‘camera’, and ‘pen / ink content’ to HTML and PDF.

To make sure there are no authentication problems when deploying our Power App to end-users, we’ll decouple the Power App Flow from the Flow that does the actual PDF Conversion.  Don’t worry if you’re unsure how to do this, just follow along and all will be revealed.

If you prefer to watch the following steps being completed instead of reading through them, please just view the video below:

Step 1: 

  • Go to web.powerapps.com, sign in with your work or school account, click on the Apps menu in the left hand navigation bar, and then click on on ‘+Create’ and select ‘Canvas app from blank’, as shown below:
  • Specify the name and the format of the APP and click on ‘Create’.

Step 2:

  • Add a ‘Text Input’, ‘Pen Control’, ‘Camera’, and a button on the Power Apps screen as shown below.

Step 3: 

  • Paste the Formula below into the button’s ‘OnSelect’ property.
Collect(
    Controlcollection,
    {
        Name: TextInput1.Text,
        Image: Camera1.Photo,
        Pen: PenInput1.Image
    }
);
Set(
    JSONVar,
    JSON(
        Controlcollection,
        JSONFormat.IncludeBinaryData
    )
);
Clear(Controlcollection);

What does the above formula do?

  • Collect(Controlcollection,{Name:TextInput1.Text,Image:Camera1.Photo,Pen:PenInput1.Image});

The ‘Collect’ function will create a new collection with the name ‘Controlcollection’ and add the following values to the table:

Name:TextInput1.Text,
Image:Camera1.Photo,
Pen:PenInput1.Image
  • Set(JSONVar,JSON(Controlcollection,JSONFormat.IncludeBinaryData));

The ‘Set’ function will set the variable ‘JSONVar’, to the JSON function and converts the collection ‘Controlcollection’ to binary data.

  • Clear(Controlcollection)

The ‘Clear’ function deletes all the records of a collection, but the columns of the collection will remain.

Step 4:

Now we Associate our Power Automate Flow to a button.

To do this, we add another button to the Power Apps Designer Canvas and rename the button to ‘Trigger Merge Flow’.  Doing this is detailed in the following two bullet points:

  • Select the Button Control ‘TriggerMerge Flow’, select the ‘on Action’ tab and then click on ‘Power Automate’.
  • When the ‘Power Automate’ blade opens, click on ‘Create a new flow’.

Step 5: 

  • You should now be redirected to the Flow template pages.
    • Select the ‘PowerApps button’ template.
  • Give your Flow a meaningful name (I named it ‘Multiple Control’).

Step 6:

Add the ‘Initialize variable’ action, set the parameters with reference to screenshot below, and then save your Flow.

Now that we have our Flow ready, let’s get back to our PowerApps and add the formula to  the ‘Flow Trigger’ button.

For the button ‘OnSelect’ function add the Microsoft Flow and set the variable ‘JSONSample’ variable.

Step 7:

  • Add the ‘Parse JSON’ action
    • Content: Pass the ‘JSONSample’ variable.
    • Schema: This is the tricky part, but Microsoft has made it extremely easy for us to complete.  We just need to select the ‘Use sample payload to generate schema’ option, though that does leave a question- where will we get the ‘sample payload’?
    • To get the ‘sample payload’, we need to navigate back to our PowerApps, add a label to the PowerApps Canvas, then set it to the ‘JSONVar’ variable, and then finally copy the label content to the clipboard and delete the label.
  • In the ‘Parse JSON’ action, click on ‘Use sample payload to generate schema ’, that should open a modal dialog box where you then paste the content from the clipboard to the ‘Textbox’ and then click ‘Done’.

Step 8: 

  • Add the ‘Initialize variable’ action to the flow canvas.
    • Name: HTMLFile
    • Type: String

Step 9:

  • Add the ‘Compose’ action to the Flow canvas and configure it as shown in the screenshot below:
<h1>@{items('Apply_to_each')['Name']}</h1>
<img src='@{items('Apply_to_each')['Image']}'>
<img src='@{items('Apply_to_each')['Pen']}'>

Note:

The ‘Apply to each’ loop will automatically be added around the ‘Compose’ action, so that section of your Flow should look similar to the image below:

Step 10:

In the ‘Apply to each’ loop add the ‘Set variable’ action.

  • Name: HTMLFile.
  • Value: Output of the “Compose HTML” action.

Step 11:

Outside the ‘Apply to each’ loop add the SharePoint ‘Create File’ action.

We use the ‘Create file’ SharePoint action to write the PDF document to the SharePoint document library.

  • File Name: Add the formula @{Sample(utcNow()).html}
  • File Content: Pass the ‘HTMLFile’ variable as the File Content.

Our Flow is now ready to be tested, though we’ll first need to publish it.  Then, we’ll fill-in the details in the ‘Text Input’, ‘Click a Picture ‘and ‘Scribble in the Pen-Input’ , click on ‘Button’, and then the on the ‘Trigger Flow Button’.  This will trigger the Flow.

After a short wait, you will find the new HTML file created in your SharePoint Online Folder.


Using Power Automate Convert the File to PDF:

Now that we have the HTML ready, we just need to create a new Flow and Pass the HTML Content to the Muhimbi ‘Convert HTML’ action.

So,  why are we creating another Flow just to  convert the HTML to PDF?   Can’t we just add the action to our first Flow and pass it the HTML?

You can certainly just add the action to your first Flow, but then, on deployment to end users, each user will need their own account in the Muhimbi system to authenticate with The Muhimbi Flow Connector, or they all need to enter a shared account’s credentials. All and all, not a very practical solution, as sharing credentials does not follow Best Practices. Unfortunately, Muhimbi is not in control of this aspect of the way Flow works.

I’d be a great time saver if we could get around this limitation, so may I ask for 1 minute of your time to vote for this Flow idea?

For now, we get around this limitation by using the ‘Decoupled’ or ‘Indirect’  approach, as described below:

The ‘Decoupled’ or ‘Indirect’ approach, is to create a Flow in the Document Library to which we write the HTML file and that Flow should be set to an automatic trigger, such as ‘When a File is Created in a folder’, and then it writes the file to a different destination folder.

The Flow would be a simple ‘Three Step’ Flow, as shown below:

Step 1: 

  • Open the Power Automate (Microsoft Flow Designer), create a Flow and find the ‘When a file is created in the folder’ trigger.

In the action, specify the path to the SharePoint Online Library to monitor for new items.

Note: As mentioned above, we need to create this Flow in the Library to which we are writing our HTML file.

Step 2:

  • Add the Muhimbi ‘Convert document’ action to the Flow Canvas and configure it with reference to the details below.
    • Source File name: ‘File name’ the output from the ‘When a file is created in a folder’ action.
    • Source file content: ‘File Content’ the output of the ‘When a file is created in a folder’ action.
    • Output Format: PDF

Step 3:

  • Use the ‘Create file’ SharePoint action to create the PDF document in the   SharePoint document library.
    • Folder Path: Specify the output path to write the processed file to. Make sure this is a different folder than the input file to prevent ‘recursive’ flows.
    • File Name: ‘Base file name’.pdf- the output variable of the ‘Convert document’ action.
    • File Content: ‘Processed file content’- the  output variable of the ‘Convert document’ action.

That’s it, publish your Flow and fill in the details in the ‘Text Input’, ‘Click a Picture’ and ‘Scribble in the Pen-Input’, then click on ‘Button’ and on the ‘Trigger Flow’ button. This will trigger the first Flow and after a short wait, you will find the new HTML file created in your SharePoint Online Folder. Once the HTML is created it will trigger the second(decoupled) Flow, and then you should have a PDF in your SharePoint Online Folder.

Subscribe to this blog for the latest updates about SharePoint Online, Power Automate (Microsoft Flow), Power Apps and document conversion and manipulation using The PDF Converter.

One thought on “Convert Multiple Power Apps Media Controls from The Power Apps Screen to HTML and PDF

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 )

Twitter picture

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

Facebook photo

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

Connecting to %s