PowerShell Tutorials Making HTML Reports #1 : Basic HTML Reports

hi and welcome to this Powershell tutorial video this series is pro is going to be focusing on convert to HTML or creating web reports that you can view on a web browser on a website send by email if you're formatting your email as HTML these reports are going to be quite colorful we're going to add a lot of styling in them uh so this is going to be a multi-part series uh so in the first video we're going to be really just playing around with the basics of converting our Powershell objects to HTML um and then in the second video we're going to be a little bit more in depth uh and there might be a third video I'm not 100 sure yet um but there will be at least two videos in the series so let's actually go ahead and let's get started on just seeing what exactly we can do in Powershell to convert our objects to HTML and how it kind of looks like just running that commandlet and seeing what we can do with it uh in a short amount of time so the first thing that we're going to want to do in Powershell of course is get some sort of object or some sort of table that we can actually output to HTML so what we're going to be doing is we're going to be doing our typical get service command list um so let's do a get Dash service and let's again let's just see what this gives us we've used this commandlet a lot on this channel but as you can see it just gives us the services that are currently running or not running on our computer gives us the names of those services and then gives us the display name but we can also get a lot of other information once again if we just pass that to the get member commandlet it'll tell us all the different properties that we can actually get including startup or startup type the status the username that's running it and a bunch of other options here so what we're going to want to do and what we're more interested in is doing a get service and let's say we're going to do a select Dash object what we really want and what we really care about is going to be the name display name the status and the startup the start type so if we actually run this here we're going to see this in our Powershell window um in Visual Studio code doesn't always like to Output it with my screen resolution here so let me just do a out grid view so you guys can actually just see what exactly I'm outputting here all right so here we have it so we have our name of our services we have the display name we have the status and we have the start type so what we actually want to do is create a web page with this data in it and just format it really nicely and have a nice little table so let's actually go ahead let's see how we can actually do that so the first thing that we're going to need to do is find out the commandlet now you guys probably already guessed it it's going to be just convert 2 Dash HTML so once we actually do that if we actually just run this as it is you will see we get this quite ugly output here and this is the HTML code that Powershell generates for us so what we're actually going to want to do here is just do an HTML and then we're going to want to pipe this to an out Dash file and what we're going to want to do is we're going to want to put a file path and we are just going to want to go ahead and pipe that to our path that we want so for me it's going to be in C Scripts quick tips which is not actually a quick tip video and then we're going to pipe that to our put that in our convert to HTML folder and we're just going to put this to a simple dot HTML so once we actually run this code and let's just go in my folder here so we have our simple.html document here we have it in our Microsoft edge browser this is the default output for convert to HTML so as you can see it's not very very pretty it does output the table so we can actually view it in a web browser um but it's kind of hard to follow the lines like you can start at app info and then you might get kind of lost when you start going to the different lines we have like no no borders around things we have no way to see where our Mouse is over the different objects we have stopped it running but nothing to really show us exactly what it is here so maybe as a viewer is isn't very very nice to look at just yet so what we can actually do here is let's actually just simplify this code a little bit more here so let's split this up into a few lines let's actually create our a variable here that's going to store our services we're just going to call that Services we're going to set that to the get service select object and then what we're going to do is we are then going to pipe our services to the convert HTML and what we're going to do as well is we're going to add one more variable here at the top and we're going to do a path to exports and we're going to make that equal our HTML path here and this is again more for me to be able to display everything much nicer on the screen for you guys but this is also just like a good practice to not really have anything manually typed out in these parameters and just have it all at the top this way it's very easy for you to ever change it if you need to so once we have this here let's just go ahead and let's delete this simple HTML let's just make sure that everything is still working so if we actually run all of this code again now you might notice that I'm getting these errors this is because I'm not running in administrator mode but it doesn't really matter for our situation here and as you can see file generates it looks perfectly fine so we are good to go and what I could actually even do is do an error action here and silently continue and we should not see those errors anymore so that should be good so let me just clear the screen here and now we have our simple HTML but now let's actually try to make it look a little nicer so what we need to do to make it look a little nicer is add some CSS now I'm not going to be teaching on CSS from the beginning to the end but I will be teaching you guys how to make the tables look a little bit nicer so it's going to be very much like a boiler template for CSS for you guys to be able to use uh in your own projects but if you know CSS you can actually probably make tables a lot nicer than I can um but I will just go over some basic CSS rules and make a table that will look fairly good to present your reports in so what we're going to actually want to do is create a another variable here and what I like to call it is I just like to call it CSS we can actually just make it all lowercase here and we're going to actually make this equal to a literal string so we haven't seen these in a little while um and if you haven't watched the tutorial series that is just designated by doing an at symbol and then the double quotes and that will let you just type in and format anything this like enters and spaces and Powershell will just take that as a string literally as you typed it out so let's go ahead and let's add our HTML tags in here for the CSS so what we want to do is a style here so let's do a style in the opening and closing bigger lesser than brackets and then our closing style tag so this tag is to tell our HTML code that we're going to have some CSS in between these two tags and we are going to be using these these CSS properties to actually dress up our table so the first thing that we actually want to do here is actually add a table and then an open and curly bracket and all we're going to do is just do a border and then a colon and then a one pixel black solid then a semicolon so what this is actually going to do is going to add a border around our table so it's not going to do all the individual cells and rows just yet but it will actually do the around the table now if we again just run this we're going to see that it actually does not change anything so if we go in here it still looks exactly the same what we need to do in our convert to HTML commandlet here is we're going to add a parameter and our parameter is going to be the head parameter and what we're going to want to do is we're going to want to add our CSS variable to the Head and then what we can do is if we actually run this again we go back to our web browser we refresh and there is that border around our table so we've actually already kind of made it a little bit better it doesn't really help viewing the data but we can actually see that it does work we do have a border around our table so then what we're going to want to do is to get all the different rows what we're going to want to do is is after our table here we're going to do a comma and then we're going to do a TR and then if we just actually save this and we just run this what we're going to see is going to add a border to not everything yet we will need to do a TD and th as well and let's run this again here and let's refresh it and there we have it so we actually have a full table um with all of our different um all of our different things all separated here and you can you don't actually need the TR I do actually remember that now you should only need a TD and th ick for these so if we actually refresh it there we have it so everything does still look very very nice um and we can actually see all of our different options and see that everything does look as it should so that's good now all we want to do now is maybe add some some different styling maybe some background color or where we're hovering over or maybe make the font a little bit thicker so we know what line our Mouse is over so what we can actually do in that case is actually add another CSS rule so each of these this is called a CSS Rule and now we're going to add another CSS Rule and what we're going to do is TR and this is going to be for the table row and we're going to do a colon and we're going to do hover and we're going to do an open and closing curly bracket again and what we're going to do is we are going to do a background color colon light Gray and what we're also going to do is in another rule with a semicolon at the end we're going to do a font Dash weight and we're going to make that go to let's say 800 and we're going to do a semicolon now the max value for this is actually 900 but we're just going to put it to to 800 I think that that'll be fine and then what we're going to also going to do is we're going to do a font size and we're going to do a font size of 16 pixels so that's going to be designated by 16px and let's actually go ahead and let's just save that and let's run this code again and let's refresh our page now it doesn't look very different but as soon as I start hovering you will see our Tech schools bold our background color goes a little bit um our background color goes light gray so now we should be good and we can do a lot of different things here we can actually even change the font color by doing a color and we could change that to Red so if we actually run this again here and we refresh there it is our font color changes so just a bit so that is all good now let's actually see if we can actually make the font even bigger here okay let's run that yeah so there you go so now you can actually notice the font size really increase here it's maybe a little bit too big but it does give you that ability to really see what line you're hovering over and give you a little bit more information so let's actually go ahead let's just shrink that just a tiny bit here let's do 24 pixels instead and let's rerun it and let's refresh the page there you go that seems a little bit nicer it's not as chunky um but there you have it this is the very easy way to use the convert to HTML and add some very very basic CSS to it in the next video what we're going to be looking at is actually creating nicer reports so what we're actually going to be able to do is do a formatting based on what is in the status what is in the start type so we can actually color these rows green or red based on what the status and what the start type is because we already know that if the start type is automatic it should be running and if it's not running we should probably signify that to the user saying that something is wrong if it's stopped and it's manual maybe we still want to highlight that for the user but maybe it's not as important as if it's automatic and stopped and if it's automatic and it's running then it's all good to go we can make it green we know that everything is running as it should so we're going to be seeing that in the next video it is a little bit more intense we're going to be playing around with the convert to HTML but we're going to be actually adding some other HTML to our code and adding some CSS properties to the different lines as we iterate through the different rows in the table so that's why I'm kind of separating these two videos out this is just the very basic intro to convert to HTML so you guys can get used to it play around with it with your own Powershell objects in your own environment if you guys have any comments or questions please let me know in the comment section down below please be taking a look out for that next video in this series uh so I think this guys could really level up your reports that you send to people by email um or you can even put it on your website so be sure to stay tuned for that please also be sure to subscribe and hit that like button hit that notification Bell to be notified when that next video comes out and I will see you guys on the next video

Channel: JackedProgrammer

Views: 3,780

Keywords: powershell basics, powershell, windows powershell, programming, coding, scripting, powershell scripting, powershell scripting tutorial, powershell tutorial, how to, faster data filtering powershell, powershell automation, powershell beginners, learn powershell, html, powershell convertto-html, convertto-html, html report using powershell, powershell export to html, powershell html, powershell reports, css

Id: 9B2iSqXDGj4

Length: 17min 7sec (1027 seconds)

Published: Mon Dec 19 2022