In this post, I will show you how to print data from a Gallery control in Canvas Apps without using MS Flow. Currently the way to move data from a Canvas App and print it involves a Flow through which an HTML table is created from the data and that table is converted to an HTML file which is further converted to a PDF. Let's cut down this process by introducing a Custom Component that enables a print functionality on the Canvas App itself.
I created a custom component using the PowerApps Component Framework #PCF to address this. In this article I will show you how to create the component, import it in the canvas app and finally use it on a Gallery control.
Let's get started!
Step 1: In this step, we will look at creating the component. Follow the steps here to create a generic component structure of type field. Once the setup is complete, certain parts of the index.ts and ControlManifest.Input.xml files need to be modified. The same have been updated and present on the GitHub repository as mentioned below.
The source code for this component is on this GitHub repository here.
Process followed in the component: String retrieval from the canvas app -> Convert string to JSON -> Convert JSON to HTML table -> Print the HTML Table.
Note: For canvas app, only field type component is supported. Source
The following steps (2, 3, 4) refer to the setup for using the component in the canvas app and have been referred from here.
Step 2: Enable the "PowerApps component framework for canvas apps" feature from the admin center. Navigate to Admin Center -> Environments -> Select the desired environment in which you want to use this component -> Settings -> Features -> set the flag as shown in the image below:
Step 3: Enable the "Components" feature in the canvas app settings. Navigate to File -> App settings -> Advanced settings -> Experimental features -> enable the "Components" flag as shown in the image below.
Step 4: Import the component to the canvas app. On the canvas app toolbar -> select Insert -> Custom -> Import component -> Select the "Code (experimental)" tab -> select the created component here.
Step 5: Update the "DataToPrint" custom property to point to the Gallery control for the data that you want to print. (this could be any data control element on the canvas app). The catch here is that the data should be passed in a valid JSON format to eventually create the HTML table appropriately. (Example implementation shown in the next section)
Implementation
In this section let's implement the above created component on the canvas app. The app has a Gallery control that displays data of 10 rows from a SharePoint list. We will use the custom "DataToPrint" property to pass the data from the gallery as a JSON and then use the print button to print it.
Expression used on the "DataToPrint" property:
Substitute(Concatenate("[",Concat(Gallery1.AllItems,"{"&Char(34)&"Order"&Char(34)&":"&Char(34)&Title&Char(34)&","&Char(34)&"Customer"&Char(34)&":"&Char(34)&Customer&Char(34)&","&Char(34)&"Billing Address"&Char(34)&":"&Char(34)&BillingAddress&Char(34)&","&Char(34)&"Shipping Address"&Char(34)&":"&Char(34)&ShippingAddress&Char(34)&"},"),"]"),",]","]")
Explanation: "Gallery1.AllItems" fetches the values from the gallery control and this can be replaced with any of the supported controls/ data sources. The "Concat" function is being used to produce a string in the form of JSON (which will be converted to an HTML table in the component). The keys for the respective column data needs to be provided manually as per the data source schema. In the current example I have passed "Order", "Customer", "Shipping Address" and "Billing Address" matching to my data from the "OrderDets" SharePoint list.
Setup in Action
In this article we saw how to create a component using the PowerApps Component Framework and deploy it on a Canvas App. This component enables users to print data from a gallery control. This component addresses a current limitation of the print functionality for canvas apps and we have found a way to address that using the amazing PCF.
I hope you found this interesting and it helped you!