Convert a List item to PDF using a Button for a SharePoint Form customized in PowerApps

In my previous blog post, I explained how to Trigger a Flow using a Button in SharePoint Online.

In this example, we’ll create a simple Flow that can be triggered using a Button from the SharePoint Online list item customized in PowerApps. Once the button is clicked, the list item will be converted to PDF and the generated PDF is written back to the SharePoint Document library.

---

Please make sure the following prerequisites are in place:

• An Office 365 subscription with, SharePoint Online license.
• Muhimbi PDF Converter Services Online full, free or trial subscription(Sign up).
• Appropriate privileges to create Flow.
• Working knowledge of SharePoint Online, Microsoft Flow and PowerApps. This is not a generic PowerApps Tutorial.

---

To break down the complexity we will divide the blog post into two parts:

Part 1: Customise the SharePoint Online Form in PowerApps.
Part 2: Create a Flow that Converts a list item to PDF when the Button is clicked.

---

So let’s begin with Part 1: Customise the SharePoint Online Form in PowerApps.

Step 1: On a SharePoint Online site, create or navigate to a list, make sure Modern View is enabled for that list, and then add these columns:

• Title Column renamed as ProductName (single line of text).
• Email Address(single line of text).
• ConvertPDFToggle(Yes\No) and Default value No.

Step 2: Customise the SharePoint Online Form in PowerApps.

• Open the list that you just created, on the command bar, select PowerApps > Customize Form.

Step 3: PowerApps shows your form, but it contains fields that you don’t need.

• In the Data pane, clear the check boxes for the Attachments fields. The field will disappear from the form, leaving only the fields that you added.
• For demo purposes, we need to Check the box for ID field.

• Add a Button to the form and set the Text property to “ConverttoPDF“.

• Add a Label to your PowerApps screen and set the “Text” property to the “DataCardValue” for the “ConvertPDFToggle“.

Step 4: Adding the Logic to the “Button”.

Set the “On-Select” property for the “Button” to :

Set(a, Value(Label1.Text));Patch(‘PowerApps Form’, {ID:a,Title:DataCardValue1.Text,Email_x0020_Address:DataCardValue2.Text,ConvertPDFToggle:true})

To reduce the complexity lets break the Formula into two parts:

• Set(a, Value(Label1.Text)): The first part of the Formula is a workaround, to convert the “ID“(number) to text so that we can Patch the value back from PowerApps to SharePoint. This will help us Update the existing item when the Button is clicked.

• Patch(‘PowerApps Form’, {ID:a,Title:DataCardValue1.Text,Email_x0020_Address:DataCardValue2.Text,ConvertPDFToggle:true})
  • This is a simple Patch Function of PowerApps in the Data-Source set SharePoint List “PowerApps Form“.
  • {ID:a,Title:DataCardValue1.Text,Email_x0020_Address:DataCardValue2.Text,ConvertPDFToggle:true} are the Columns and DataCardValues for the Fields on the SharePoint screen (Just Follow the colour scheme of the lines below).

• Now that you have created the Formula, let’s Hide(Set the “Visible” property to “false”) for the “ConvertPDFToggle”, “Label” and “ID” field.

Your Form will now look like:

You might be Wondering why did we create the “ConvertPDFToggle” switch? The ConvertPDFToggle will be used in Flow which will help us to Convert the List item to PDF on demand.

---

Part 2:  Create a Flow that Converts a list item to PDF when the Button is clicked.

Before we start building our Flow let’s try to understand the logic of our Flow first.

In Part one we created a Button and associated it with the formula and our end Goal is when the “ConverttoPDF” button is clicked a PDF should be generated. It is straight forward to build a flow that ALWAYS converts a file, or carries out any kind of action when a file is saved. However, in this example we decouple saving from the main flow functionality by only executing the body of the flow when the ‘”ConvertPDFtoggle”’ field is set to true via a click on the PowerApps button.

In SharePoint Online Flow we have the following triggers for list item.

The “Trigger” that suits for our example is “When an item is created or modified“.

So the logic from a high level:

---

The Final Screenshot of the Flow based on the above logic:

---

Step 1: For this demo, we will use the SharePoint Online Trigger “When an item is created or modified“, add the “Site Address” and “List Name“.

Step 2: Add a “Condition” in Flow and Configure it with reference to the screenshot below. ConvertPDFToggle is the output of “When an item is Created or modified” Condition “is equal to” “true”. 

Note: In SharePoint, the default value for the column “ConvertPDFToggle” is Set to “No“(False). The Column is updated only when the Button is clicked in SharePoint list item form.

Step 3: If the value evaluates to “True” continue the Flow. If “False” Do nothing.

Step 4: This is where the real Magic happens.

If the value evaluates to “True“, Convert the List item to PDF using Muhimbi “Convert HTML to PDF” action.

Due to architectural difficulties, it is currently not possible to directly Convert the SharePoint Online List Forms customized in PowerApps. But we build our own layout using HTML and pass the SharePoint Online Data to the HTML.

Note: The sky is the limit when it comes to HTML, the above is just a simple example.

Step 5: Use the “Create file” SharePoint action to store the PDF document into SharePoint document library.

• File name: For this Demo, we will user “ProductName” (output variable of the “When an item is created or modified” action).
• File content: Processed file content the (output variable of the “Convert document”)action.

Step 6: Finally we need to update the ConvertPDFToggle to No(False) to make sure that the next time the document is updated the body of the Flow will not be executed until the “ConverttoPDF” button is clicked again. Please Configure the “Update item” action with reference to the screenshot below.

Step 7: All done! Now its time to test our Flow.

Navigate to SharePoint Online and open a list item and click on the “ConverttoPDF” button.

Once clicked it should Trigger the Flow and on successful completion of Flow, you should have a PDF generated in the Destination document Library.

Step 7: To avoid confusion for the end user, let’s hide the Columns “ID” and “ConverttoPDFToggle” from the default SharePoint view.

This same functionality also works with files in Document Libraries, but in those cases the Flow is even easier as the content of the file can be sent to the Muhimbi PDF Converter without manually creating HTML. For more Muhimbi – Tutorials and Blog posts see https://support.muhimbi.com/hc/en-us/articles/115005900168-Microsoft-Flow-Logic-Apps-PowerApps-Tutorials-and-Blog-posts

Happy Converting 🙂….