Generating PDF Documents in PowerApps

Hello everyone Reza here. In this video we will learn how to generate a PDF document directly from PowerApps. I will cover two scenarios one where we will email the PDF document as an attachment and second where we will give the user the option to download the document directly from PowerApps. No flows are involved here. Let's check this video out in action. I have a PowerApp for issue tracking. The homepage lists the data from my data source and the modern table control. The user can select a record. The toolbar lights up actions that the user can take. If I select view. This will take me to the screen where I can view the selected record details. Our scenario here is to generate a PDF of this form experience directly from PowerApps. This form screen I have built leveraging one of the new modern screen templates called header and form. This is a fully responsive PowerApp experience as it leverages the responsive container controls. Let's start working with the pdf function. I'll select my screen container and in this go and insert a horizontal container which I will reorder and move up. I'll turn off flexible height and give it a defined height of 50. I will be placing some action buttons within this. In this container, I'll go and insert the modern button control. The text for this button I will set as email pdf. The modern button also has an icon option. I'll pick the mail icon. I'll give it some more width. Now when the user selects this button I would like to send an email that includes a PDF version of the form. To create a PDF, important step, go to settings, updates, search for PDF and we need to ensure that we enable the PDF function. This allows us to create PDF documents from screens, galleries and containers. I want to send an email and for that I'll head over to data sources. I'll go and select Office 365 Outlook on select function of my email pdf button. I'll use the formula office365outlook.sendemailv2. Who am I sending this email to? I'll use user.email. That's the current logged in user's email address. Next, the subject of the email. I would like to give the title of the issue and that will come from my home screen's table control table.selected. the name of the issue. My form control is connected to a modern table control. this could very well be a gallery control as well in the body of the email i can provide additional details i can also enter html code and then the next parameter i'll pick attachments now attachments is an object that will include two parameters name that's the name of the attachment The title of the issue, I'll pick that same name and very important, I need the extension of the file along with it.pdf and the next property is content bytes. Here I'll use the PDF function. What's the target control on my screen for which I would like to generate the PDF? In my case, it's my form control that is sitting in a container called form container one so here i'll pick form container one my screen is a responsive screen if there is not enough real estate to fit the columns your form has a scroll experience when it generates the pdf i wanted to open the complete form to build that pdf so for that we can pass options expand containers i'll set its value to true that completes my pdf function my attachments object is closed i'll close the properties of the email and then i'll close my send an email v2 function i'll click format text and right after sending the email i would like to notify the user. So I'll use the notify function that says email sent. Let's try this out. I'm on my screen which has the email pdf button. I'll select this. It will call my send an email function and once the email is sent I'll see the notification. If I head over to my mailbox here is the email that I have received. the subject of the email in the body i have given additional details about that specific issue record and here is the pdf attachment it includes all the data in that form container i'm exploring my app in a tablet device experience if i click email pdf once again it will send that email Here is the email. So notice a tablet device held vertically is going to be one of the best experiences for me to generate the PDF. If I view this on a mobile device and send the email, observe at the bottom how momentarily that container expanded. And this time when I get the PDF in the email, it has the form in it. single column layout all the columns are a part of this and right at the bottom you see that little border that's actually the back button and the reason why that is being exported as part of the pdf is because my pdf function is targeted to this container which includes the form control as well as this button control since i do not want this button container to be a part of that pdf that's being generated one of the things we can do is when email pdf is clicked right at the beginning i'll set a variable called where pdf gen and i'll set it to true and after it sends the notification i'll set that variable to false So this variable will always be true when the process of generating the PDF begins. So I can use this variable on my button container and I'll set its visible property to not of where PDF gen. So this time if I was to email the generated PDF you will note that it does not include the button container and this variable is something that I can use to design and style the generated PDF. For example, my form control has a fill property that's currently set to the color code white. I'll change this to if var pdf gen meaning if the PDF is being generated, then set a different background color to the form. In my form container, I'll go and insert a text control that I'll move up. I'll give it a different font, font size, font color, and this one I'll say issue. my table dot select the name of the issue now this text control that I added it should only be visible on where pdf gen which is that boolean variable. So this time if I click email pdf notice how those styles those controls that I was showing hiding take effect and this time the generated pdf in the email includes all that information. Every time when the PDF is generated, if I would like the format to be in that two column layout so it fits well in the PDF document irrespective of my responsively designed screen width, what I can do is for the main responsive screen container with property, I will change as follows if where pdf gen in that case let's say i'll give it a defined width of 800 else parent.width so notice on a widescreen experience here when i click email pdf when the pdf is generating it changes the size builds the pdf sends the email and irrespective of the dimensions of my screen, the generated PDF will be in this neat format. When it is generating the PDF, at that moment, the user can see the screen shrinking or growing depending upon the existing device they are running the screen at. I would like to give a loading screen experience while that action is being performed. For that, select your form screen. I'll go and insert a vertical container. This container I will drag it to the top left of the screen. Important that x property of this container is set to zero, y property of this container is set to zero. Width I'll set it as parent dot width. Height I'll set it as parent dot height. fill property i'll give it a light gray color so notice how it takes the full real estate of the screen in my app i will go and upload a loading gif in this container i'll go and add an image this image will be that loading image I'll select the container, Vertical Justification Center, Horizontal Alignment Center. This container, Visible Property, I'll set it to Where PDF Gen, Widescreen Experience. I click Email PDF. Notice how this loading image comes up, all the work's done, the email is sent. Here is the outcome. This is true no matter which device I am running this app on. I would like to generate the PDF and give the user an option to download that PDF directly in the PowerApp itself. No usage of Power Automate. Now on select of this, I'll use that same logic as before. Set where PDF gen true the key thing here I need is the content of that PDF document and for that I'll set a variable called PDF content I'll use the PDF function same concept as before Generate PDF of my form container. I'll set the property expand containers to true This generated PDF, I would like to convert it to JSON by using the JSON function and here I'll specify to include the format include binary data. Right after this, I'll notify the user that the PDF has been generated and then I will set my variable back to false. Now this variable will have the content but how will the user download this in power apps we have an attachments control that control you will get if you connect to a sharepoint list and use an edit form control add the attachments column go grab that special control out of the form control and then use it here now that's a lot of work i've made it a lot easier thanks to one of the new features in PowerApps that allows us to copy code and paste code. In my screen container, I'll go and insert a horizontal container. In here, I'll insert a simple text control and I'll give it the text download. In this container, I will go and paste the following YAML code. select the container, right click, paste, paste code and there is the attachments control. This attachments control has its items property set as follows. It's an array, there's an object in it, that's the attachment. The name of the attachment, once again I'm creating it dynamically based on the name of my issue. then the extension of the file so dot pdf and then my variable that will have the json content i'm providing that content to the value property now currently i have not clicked on this button generate pdf so this pdf content will be blank this container should only be visible if pdf content is not equal to blank and my user can keep coming to this form screen and every time they come here on visible i will make sure that pdf content is set to blank let's try this generate pdf it says pdf generated Here is the file to download. I select on this and it will download that pdf file. Let me open that file. That's the generated pdf. Let's go back to my previous screen, pick a different record. I'll go to view, generate pdf. I select, downloads it and here it is. If you enjoyed this video then do like, comment and subscribe to my YouTube channel and thank you so much for watching.

Let's check this video out in action. I have a PowerApp for issue tracking. The homepage lists the data from my data source and the modern table control.

The user can select a record. The toolbar lights up actions that the user can take. If I select view.

This will take me to the screen where I can view the selected record details. Our scenario here is to generate a PDF of this form experience directly from PowerApps. This form screen I have built leveraging one of the new modern screen templates called header and form. This is a fully responsive PowerApp experience as it leverages the responsive container controls.

Let's start working with the pdf function. I'll select my screen container and in this go and insert a horizontal container which I will reorder and move up. I'll turn off flexible height and give it a defined height of 50. I will be placing some action buttons within this.

In this container, I'll go and insert the modern button control. The text for this button I will set as email pdf. The modern button also has an icon option.

I'll pick the mail icon. I'll give it some more width. Now when the user selects this button I would like to send an email that includes a PDF version of the form.

To create a PDF, important step, go to settings, updates, search for PDF and we need to ensure that we enable the PDF function. This allows us to create PDF documents from screens, galleries and containers. I want to send an email and for that I'll head over to data sources. I'll go and select Office 365 Outlook on select function of my email pdf button. I'll use the formula office365outlook.sendemailv2.

Who am I sending this email to? I'll use user.email. That's the current logged in user's email address.

Next, the subject of the email. I would like to give the title of the issue and that will come from my home screen's table control table.selected. the name of the issue.

My form control is connected to a modern table control. this could very well be a gallery control as well in the body of the email i can provide additional details i can also enter html code and then the next parameter i'll pick attachments now attachments is an object that will include two parameters name that's the name of the attachment The title of the issue, I'll pick that same name and very important, I need the extension of the file along with it.pdf and the next property is content bytes. Here I'll use the PDF function.

What's the target control on my screen for which I would like to generate the PDF? In my case, it's my form control that is sitting in a container called form container one so here i'll pick form container one my screen is a responsive screen if there is not enough real estate to fit the columns your form has a scroll experience when it generates the pdf i wanted to open the complete form to build that pdf so for that we can pass options expand containers i'll set its value to true that completes my pdf function my attachments object is closed i'll close the properties of the email and then i'll close my send an email v2 function i'll click format text and right after sending the email i would like to notify the user. So I'll use the notify function that says email sent.

Let's try this out. I'm on my screen which has the email pdf button. I'll select this. It will call my send an email function and once the email is sent I'll see the notification.

If I head over to my mailbox here is the email that I have received. the subject of the email in the body i have given additional details about that specific issue record and here is the pdf attachment it includes all the data in that form container i'm exploring my app in a tablet device experience if i click email pdf once again it will send that email Here is the email. So notice a tablet device held vertically is going to be one of the best experiences for me to generate the PDF. If I view this on a mobile device and send the email, observe at the bottom how momentarily that container expanded. And this time when I get the PDF in the email, it has the form in it.

single column layout all the columns are a part of this and right at the bottom you see that little border that's actually the back button and the reason why that is being exported as part of the pdf is because my pdf function is targeted to this container which includes the form control as well as this button control since i do not want this button container to be a part of that pdf that's being generated one of the things we can do is when email pdf is clicked right at the beginning i'll set a variable called where pdf gen and i'll set it to true and after it sends the notification i'll set that variable to false So this variable will always be true when the process of generating the PDF begins. So I can use this variable on my button container and I'll set its visible property to not of where PDF gen. So this time if I was to email the generated PDF you will note that it does not include the button container and this variable is something that I can use to design and style the generated PDF. For example, my form control has a fill property that's currently set to the color code white. I'll change this to if var pdf gen meaning if the PDF is being generated, then set a different background color to the form.

In my form container, I'll go and insert a text control that I'll move up. I'll give it a different font, font size, font color, and this one I'll say issue. my table dot select the name of the issue now this text control that I added it should only be visible on where pdf gen which is that boolean variable. So this time if I click email pdf notice how those styles those controls that I was showing hiding take effect and this time the generated pdf in the email includes all that information. Every time when the PDF is generated, if I would like the format to be in that two column layout so it fits well in the PDF document irrespective of my responsively designed screen width, what I can do is for the main responsive screen container with property, I will change as follows if where pdf gen in that case let's say i'll give it a defined width of 800 else parent.width so notice on a widescreen experience here when i click email pdf when the pdf is generating it changes the size builds the pdf sends the email and irrespective of the dimensions of my screen, the generated PDF will be in this neat format.

When it is generating the PDF, at that moment, the user can see the screen shrinking or growing depending upon the existing device they are running the screen at. I would like to give a loading screen experience while that action is being performed. For that, select your form screen.

I'll go and insert a vertical container. This container I will drag it to the top left of the screen. Important that x property of this container is set to zero, y property of this container is set to zero. Width I'll set it as parent dot width. Height I'll set it as parent dot height.

fill property i'll give it a light gray color so notice how it takes the full real estate of the screen in my app i will go and upload a loading gif in this container i'll go and add an image this image will be that loading image I'll select the container, Vertical Justification Center, Horizontal Alignment Center. This container, Visible Property, I'll set it to Where PDF Gen, Widescreen Experience. I click Email PDF. Notice how this loading image comes up, all the work's done, the email is sent. Here is the outcome.

This is true no matter which device I am running this app on. I would like to generate the PDF and give the user an option to download that PDF directly in the PowerApp itself. No usage of Power Automate. Now on select of this, I'll use that same logic as before.

Set where PDF gen true the key thing here I need is the content of that PDF document and for that I'll set a variable called PDF content I'll use the PDF function same concept as before Generate PDF of my form container. I'll set the property expand containers to true This generated PDF, I would like to convert it to JSON by using the JSON function and here I'll specify to include the format include binary data. Right after this, I'll notify the user that the PDF has been generated and then I will set my variable back to false.

Now this variable will have the content but how will the user download this in power apps we have an attachments control that control you will get if you connect to a sharepoint list and use an edit form control add the attachments column go grab that special control out of the form control and then use it here now that's a lot of work i've made it a lot easier thanks to one of the new features in PowerApps that allows us to copy code and paste code. In my screen container, I'll go and insert a horizontal container. In here, I'll insert a simple text control and I'll give it the text download.

In this container, I will go and paste the following YAML code. select the container, right click, paste, paste code and there is the attachments control. This attachments control has its items property set as follows. It's an array, there's an object in it, that's the attachment. The name of the attachment, once again I'm creating it dynamically based on the name of my issue.

then the extension of the file so dot pdf and then my variable that will have the json content i'm providing that content to the value property now currently i have not clicked on this button generate pdf so this pdf content will be blank this container should only be visible if pdf content is not equal to blank and my user can keep coming to this form screen and every time they come here on visible i will make sure that pdf content is set to blank let's try this generate pdf it says pdf generated Here is the file to download. I select on this and it will download that pdf file. Let me open that file. That's the generated pdf. Let's go back to my previous screen, pick a different record.

I'll go to view, generate pdf. I select, downloads it and here it is. If you enjoyed this video then do like, comment and subscribe to my YouTube channel and thank you so much for watching.

Transcript for:Generating PDF Documents in PowerApps

Transcript for:
Generating PDF Documents in PowerApps