Power Apps: Top 3 Uses for the HTML Control

hey everyone April Dunham here in this video I'm going to share my top three use cases for the HTML control and power apps but first here's the intro I'll start with the first use case which is probably the most obvious and that's custom visuals if you've been using power apps while you know that you're a little bit limited to what you can do design wise out-of-the-box however the HTML control gives us a little bit more flexibility there to add in an HTML control click on the text button and select HTML text what this control allows you to do is put in and inject each tml and inline CSS into your power and I highlight the inline CSS piece of this because we can't inject CSS Styles into here in reference those via classes or attributes so we can only do that in line so that is one limitation and then also with the HTML control we can't inject any JavaScript or anything like that it's just straight HTML and inline CSS but even with that there's a lot that we can do especially from the visualization side of things so one use case that I like to use this for is anywhere that I need a button so if we look at a normal button and perhaps you'll see that there's only so much so we can do it there we could change the color the border radius the outline and stuff like that but what if you want a nice shading to your button in CSS this is called a box shadow so let's take a look at how we can create our own customize button with the HTML control so I already have one in here so I'm just gonna make this visible we can see that the HTML button that I have just looks so much nicer than the powerups button we have this nice rounded corners but then this subtle sheeted overlay in the background thanks to that box shadow property in CSS so to use the HTML control you'll just go to its HTML text property and you'll paste in your HTML here wrapped around in quotes now this means that anywhere in your HTML where you would traditionally have double quotes like when you're referencing a style property you need to change those two single quotes instead since you're wrapping that in the double quotes but what we have here is just very simple a few lines of HTML to get this effect we have a div where we apply some inline Styles using that border radius property so we're defining a border radius of 25 and a box shadow effect here then we just have a span and we're pulling in some images so another tip when it comes to power apps design is if you want your power up to look a little bit more stylistic and not so recognizable as being a powerup then use external icons so I've just went out to a website icons a or you can get some free icons and reference that in an image property within this HTML and then I'm just a hard coating in some text below that to create this nice button now one thing you might notice though in our power apps button if I hover over it the cursor changes so that I know that that's a clickable button well we can make our HTML button do that as well and that's this property you might have noticed in the HTML called cursor:pointer so you can define when you hover over something that the cursor should change to a pointer and also so right now everything's hard-coded so you might ask well what if I need to dynamically pull in say the icon or the text that displays here for the button well we can do that also so I'll just come in here and add a text input control and say that we want our button name to be whatever is in this text input we can come into our HTML and just kind of in the quotes here where the text should be put in an ampersand and then an ampersand and a quote after so we're going to kind of wrap that in there so it's concatenated and then now we can pull in dynamic information from the power app so I can go directly to that text input and get its text value so now you see real time whatever is in that HTML changes so if I were to just run this and change the text input it's updated in my button and with this HTML control we can do all the things that we could do with our normal power apps controls so we can come in here go to its own select property and have this button navigate us somewhere that could be to a different screen or we could use something like the launch command to make it open an external website now I've added this HTML control just standalone here within my app but you can also use these within galleries as well so if I come in here and add in a gallery and I'll bind that to something we can insert in our gallery one of those HTML controls and let's just copy the HTML text from the one that I created earlier and we'll paste that in there I'm just gonna make a few tweaks to the design of my gallery here I'll change the wrap count to three so they kind of stagger a little bit across the screen now we can just change the text in the HTML control instead of pointing to that text input we can point it to this item to get the reference from the gallery and pull in whatever information from the data source that we want to pull in so now we have dynamic buttons that are pulling the title from the items in the gallery so in multiple ways that you can use this right now let's look at use case number two which is displaying rich text is particularly comes into handy when you're talking about rich text fields in your SharePoint list so let's look at a use case here I'm just gonna come in and add a new screen and we'll insert another gallery bind this to a data source that I have let's take a look at my data source first that you can see what I'm talking about here and in this list one of the fields I have is description HTML so when I set this up I went in and added a new column I chose multiple lines of text and spanned it out this more options and I enable this use enhanced rich text when you do that it allows you to put rich text in the column so if we look at this item for example you'll see that this is a multi line but it's just plain text so I can't make anything bold or do you ELLs and L eyes but in the enhanced text one I can so if you look here I'm able to make things bold and put list items and things like that now the problem with this is when you're trying to consume and power apps is this is actually stored as HTML so if I were to come back in here into my power up and want to display that information so if I just came into my gallery edit in my fields and made this sub title field for example be my description HTML look what we get here it's all of this nasty HTML that we don't want so what we can do instead is delete this label control and insert the HTML control and we'll just bind its HTML text to that field in our gallery so we'll see this item dot description HTML now we have that data from our SharePoint data source all nicely formatted with the HTML with the bullets and the bolding and everything that we have in there so this is great for just displaying the data if you need to be able to also edit it then you'll need a different kind of control so that is this let's delete this HTML control that's this rich text editor control so this is the control that gives you the ability to edit to that alright and on to the last use case for the HTML control and that is printing so as of the time of this video so early June 2020 there isn't any built-in mechanism to print in power-ups so one of the common workarounds that you'll see that a lot of us in the community do is to leverage the HTML control so that we can pass that HTML to power automate and print the document so let's take a look at a simple use case of that so in my training portal I can click on one of these trainings and it'll take me to a detail page so say I want to print out details about this particular training the duration speakers and the categories so let's just add in a button here I'll just add in any button for now it doesn't really matter just want to show the functionality so this will act as our print button now what we can do is we can come in and insert one of those HTML controls and build out our HTML for how we'd want the data to be printed out so in the background of this I have a property called selected course that is keeping in a variable the information about the selected item so I can just use that in my HTML so I can come in here and build out the HTML how I like to see it okay so I got my HTML formatted so let's just make sure it's working and I'm going to go back to my home page select one of these items and now we can see here's the information about it so it's nicely formatted with the title of the category in the description now once you have that HTML control in here you just really want to have it in the background but your users don't see it if you're using it just for printing so we can just set that visibility to off and then we can pass this data now to flow with the click of a button so in paradigm 8 you'll want to do a new instant type of flow and choose the power apps option so we can come in here and add in a variable that will store our HTML make sure it's a string and then we can use the asking power app so that we can pass that from power apps into here and then we can use the onedrive connector to create a file so just point it to a location and your onedrive give the file a name pass at the content which will be our HTML so that I'll create the HTML file but then we want to convert this so we'll probably want it to be a PDF so we can also use onedrive again here but use the convert file action to take what we just created and convert it to a PDF so that we can easily print it so from here we could do something like take this file and upload it to SharePoint or our blob stores wherever you might need so we can use the create file action and SharePoint point it to our site and library and just point the file content to the converted file content and then we can just add in a respond to power up section add an output of text file call this file link and then we can pass in the path of the file that we just created so let's save us and we'll go back to our power app and we'll add that in to initiate Wilma click the button now I want to get the link to the file in the app so when I call the flow I want to set that in a variable and let's look at how to add the flow first so we'll click on our button and we'll go to action piranha me and find the print flow that we just created so you see the one input that is expecting and that's the HTML so we can just put in our HTML control that we added which is just HTML text 8 and then do a dot HTML text so that we pass in the text from that control and this will execute it but we want to get the value that's returned so that link to the file so what we'll do is we'll set a variable called file link to the output of when we run this so if we do a dot after this flow call you'll see that that output parameter shows so there's our dot file link all right so then what I'll do is I'll come in here and we'll do an insert and let's Lee use our HTML control again but this time we'll just point this to our file link but we'll make it a clickable link here and also with this HTML property you notice the text is black and I have a black background rather than writing out the color in line I can actually come in here and use my power apps colors to change that so just a quick tip there all right so let's test this out I'm going to click our button here so we can kind of vaguely see the little dots up there so that means that it's running in the background and we can always come back to flow and check our run history and just to make sure that it ran successfully which it did that's good so now if I come here I should be able to click this link and open up the document now the path it looks like is only getting the folder location in the file name so I could change that to actually look up the file name or if I in my case since I know where I'm uploading it I'm just gonna cheat so that works here and copy the URL of my site and kind of merge the two together here so now if we play this and click on that here is my nicely formatted PDF that I can now print that was just a very simple use case of the HTML control there's so much more you could do with that as far as you know injecting images or pulling out data and a table from your galleries so many different things that you can do and it can get really complex but I just wanted to show the basic use for it and how you can take at pass it into power automates and get a printable PDF I'll probably have another video in the future showing some more advanced scenarios of this but for now I just wanted to leave you with this the HTML control is one of my favorite controls just because of the benefits that you can get from it from UI and branding standpoint and it can also help the performance of your app because some of the things that you would need to do like adding some shadows and multiple layers for dialogues caused you to have a lot of different controls and the more controls you have in your power up the more bloated so often times with that HTML control you can limit what might have taken five to ten different controls into one and then obviously being able to pull in that rich text and use it as a printing mechanism just makes it even better I hope you found these top three use cases for the HTML control helpful and I hope it inspired you to start using the HTML control in your applications if you found this helpful please like and subscribe and I'll catch you in the next video

Channel: April Dunnam

Views: 24,850

Keywords: powerapps html, powerapps html to pdf, html powerapps, shane young, powerapps911, powerapps pdf, sharepoint pdf generator, sharepoint pdf converter, powerapps pdf generator using microsoft flow pdf converter, powerapps pdf generator, powerapps pdf creator, microsoft flow pdf, microsoft flow pdf converter, powerapps, power apps, powerapps sharepoint list, powerapps sharepoint tutorial, powerapps flow pdf, htmltext, microsoft powerapps, powerapps tutorial, April Dunnam

Id: HqsV8dO1OBM

Length: 14min 45sec (885 seconds)

Published: Tue Jun 09 2020

Reddit Comments

[u/ApprehensiveHoney2]

Hmmm I have had the Flow take a bit of time to run but haven't ran into it actually timing out in Power Apps. I know there is a 1 minute timeout but haven't hit that issue yet. As far as I know you can't adjust the timeout so the only course of action would be to try to optimize your Flow the best you can. Here's a good article from Peter Veinstra on it: https://sharepains.com/2019/10/10/calling-long-running-flows-in-powerapps/#:~:text=These%20long%20running%20flows%20called,to%20do%20some%20additional%20work.

[u/oh_lympy]

If only you could see all the janky box shadows I made before it dawned on me that you could do this.

Note about the “print” implementation at the end. Last time I tried that, it was super inconsistent. Mine was exactly the same, but instead of assigning the return value to a variable, I’d pass it to Launch, so the file would pop up in a new tab. Problem was that a lot of times the flow would take so long that PowerApps would timeout. Anyone else have this happen/know if this has been fixed?