Power Platform : Power Apps – Display, Edit, Save and Print the SharePoint List Items from Data Table using List Screen.

.

Never underestimate the investment yo make in yourself.

.

Hello Everyone,

Hope you all are doing well.

Today in this article I am going to discuss about how to display, edit, save and print the SharePoint List Items from Data Table using List Screen in PowerApps.

We have good number of articles on Power Platform, please have a look.

https://knowledge-junction.in/category/technology-articles/power-platform/

So without getting late, lets get started.

Requirement

Having a dashboard screen with data table control and with all required filter options is a very common use case in PowerApps app. For every process such dashboards are required so that users can view and manage the records. Displaying, editing, saving and printing the SharePoint list items from the data sources is a standard requirement in many cases. For instance, getting data from SPO list or getting from Power Apps, generating pdf file.

Note : The HTML content cannot be greater than 2 MB for this PDF generation to work. This is the limitation of the Create File action for the ‘One drive for business’ connector. 

Solution

We can display, edit, save and print the selected list items form dashboard/data table using list screen. Also there is no direct connector in PowerApps to print the data to a pdf file, so we must trigger a FLOW from PowerApps and generate the PDF file in OneDrive or SharePoint and respond back with URL of the generated file.

Introduction:

The Errors app is used by people at an office to print the selected record in PDF. They open the app to the Error details screen, click on print to download and then open the PDF file.

Setup the SharePoint list

  • Create a new SharePoint list called Errors with the following columns:
TitleSingle line of text
Error fromSingle line of text
Error messageMultiple lines of text
CauseMultiple lines of text
ResolutionMultiple lines of text
SeverityChoice
fig: SharePoint list site columns
  • Include this data in the list.
SharePoint list with data
fig: SharePoint list with data

Insert a table to display information in the app.

  • Open Power Apps Studio and create a new app from blank. Place a label at the top of the screen showing the title.
PowerApps title
fig: PowerApps title
  • Add the Errors SharePoint list as a datasource.
PowerApps datasource
fig: PowerApps datasource
  • Then insert a data table with and update the Items property to ‘Errors’ to show the list of error details.
PowerApps datatable
fig: PowerApps data table

In data table columns, made the ID column as hyper link to navigate to Edit Screen and display/edit the respective record details and print the record details in PDF.

PowerApps hyper link on ID column
fig : PowerApps hyper link on ID column

Create a blank screen and add Edit form.

To view the details about each record in the Edit form, follow these below steps:

  • Create a Blank screen (Go to Home/Insert tab -> New screen -> Blank)
  • Select Edit form (Insert -> Forms -> Edit)
  • Select the Display form and go to the Properties tab from the right section.
  • Select the Data source as SharePoint list Name (Errors).
  • Edit the Fields and add those fields that we want to display.
  • Select the Columns as 1 and Layout as Horizontal. Also, if we want to provide some other properties like Font Size, Font Color, Border, etc, then we can.
  • Add a Label (Insert -> Label) inside the Edit screen and rename it (Error Details) (Optional)
  • Select the Edit form and apply this below formula on its Item properties as

Item = tbl_Errors.Selected

Now we can see the item in the Edit screen as like the below screenshot.

PowerApps - Edit screen
fig : PowerApps – Edit screen
  • Add a Back button on the Edit screen where the item will navigate to the first screen (it is the List screen where all the items are present). Apply this below formula:
OnSelect = Navigate(ErrorsScreen)

Where,

ErrorsScreen = First/Dashboard screen name

  • Add a Save button on the Edit screen where the item will save the edited/updated item details to the list and navigate to first screen. Apply this below formula:
OnSelect = SubmitForm(EditForm);Navigate(ErrorsScreen)

Where,

EditForm = Form name on Edit Screen

  • Add a Print button on the Edit screen where the item will print to pdf.

PowerApps - Buttons on edit screen
fig : PowerApps – Buttons on edit screen

Creating the print PDF flow.

  • Now we are ready to make the flow to print the errors table selected data to a PDF file. Go to the Action tab and select Power Automate. Then click create a new flow.
fig: Create new flow
  • Refer to the below screenshot to understand the steps used in FLOW -> Taking filter values as parameters from PowerApps.
Flow taking item id
fig: Flow taking item id
  • Use the varItemID variable output/result as input to Get Items as shown below -> Use compose action to generate tabular data, add whatever columns we want to print in PDF file.
fig: Flow – Get item
fig: Flow – Get item
Flow – Compose data
fig: Flow – Compose data
  • Use OneDrive create file action to create a html file, then use convert file action to convert the html file to the PDF file.
Flow – Create and convert html file
fig: Flow – Create and convert html file
  • Use OneDrive create file action to create a PDF file, then use create share link by path action to generate the PDF file URL, respond back this URL to PowerApps.
Flow – Create and download PDF
fig: Flow – Create and download PDF
  • At last, to print the displaying record data to PDF. Select the Print button and apply the below formula on its OnSelect property as:

Concurrent (Notify("Working on it...", NotificationType.Information), Set(pdfFileURL, PrintPDF.Run(DataCardValue9.Text).fileurl));Launch(pdfFileURL);

PowerApps print button OnSelect property
fig: PowerApps print button OnSelect property
  • We have triggered a FLOW on Print button of a record. If we see the Print button click code, then we have used Launch function to download the PDF file for end user.
  • This is how the selected data looks in the PDF file, the user can easily save/print it as PDF file and do the analysis.
PDF file
fig: PDF file

Preview the Canvas App

To Preview the App to see how it works, Press F5 or Run icon on the top of the page. This below screenshot represents the total performances of the List screen and Edit screen.

  • In the Preview screen, click on ID of the item, then in another screen, it will display the details about that item. When we click the Back button on the Edit screen, then it will again come back to the list screen.
  • Similarly, we click on ID of the item, then in another screen, it will display the details about that item. When we click the Save button on the Edit screen, then it will save the edited/updated details and again come back to the list screen.
  • Similarly, we click on ID of the item, then in another screen, it will display the details about that item. When we click the Print button on the Edit screen, then it will download/print the displayed item details.
PowerApps - App preview
fig : PowerApps – App preview

.

Hope this article will help us to display, edit, save and print the SharePoint list items from data table using List Screen in PowerApps.

Also get my article updates on my social media handles.

LinkedIn – https://www.linkedin.com/in/khasim-shaik-8784a1232/

Twitter – https://twitter.com/KhasimShaik2009

Facebook – https://www.facebook.com/profile.php?id=100078255554660

Thank you for your support, will catch up with new article soon.

Keep learning and keep sharing.

Have a great day.

Thanks.

Khasim Shaik

SharePoint & Power Platform Developer at OS InfoTech

You may also like...

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: