Adding Script to Your PowerShell HTML Reports

I have been having a lot of fun with this series of articles demonstrating a variety of tips, tricks, and techniques to generate killer HTML reports with PowerShell and ConvertTo-HTML. By all means, use as little or as much as you want. If you missed the previous articles, get caught up before continuing. I will not explain the previously covered material.



I will confess right up front that I am not a web developer or even close. I know some basic HTML techniques and like you, have gleaned ideas from searching the Internet. One of those techniques is the use of javascript. While I probably could not write a javascript function from scratch, I do know how to use it in my PowerShell scripts. At some point in the past, I found some functions to create expandable sections. This is great for a long HTML document because you can collapse one or more sections.

In my header here string, where I define my CSS, I am going to insert this code.

The code assumes you will have a named DIV section that you want to collapse or expand. Let’s revise the example from the last article.

Most of this should look familiar to you by now. One thing I am doing differently is putting the graphic in a table with the document title. I do not want this table to follow the same style as other tables. Therefore, I am defining a style called ‘transparent’ that sets the cell background color to the same as the document background color.

Now, let’s add the new stuff. I want to define some section headings that when clicked, will toggle between expanded and collapsed. I also want to include a link at the beginning to toggle all sections. I will add the necessary script code to my array of fragments.

This will insert a link with the text “+/-“. When clicked, this will invoke the toggleAll javascript function. Now, we wll add the first section.

I am calling the DIV section the same as the text but I need to remove any spaces for the DIV id. After this section heading, I need to insert my content and add the closing DIV tag.

I repeat the process as needed.

When finished, I can create my final document from the collection of fragments. For your convenience, here is a script with all of my final code.

I have added my default values. You would want to change them for yourself. When I run the script, I end up with a file like this.

A collapsed HTML report (Image Credit: Jeff Hicks)
A Collapsed HTML Report (Image Credit: Jeff Hicks)

I have clicked the toggle all link to collapse all the sections. I can click in the individual section headings to toggle them.

Expanded sections (Image Credit: Jeff Hicks)
Expanded Sections (Image Credit: Jeff Hicks)

What do you think? Is this something you think you would find useful? This is definitely something you want to try for yourself and feel free to experiment. Make sure you try the CSS settings, assuming you are like me, and have limited experience with it.

I hope you found this series of articles enjoyable. If there is some other HTML-related element that you would like to add to your PowerShell reports, ping me on Twitter @jeffhicks.

Related Topics:

  • PowerShell

    Don't have a login but want to join the conversation? Sign up for a Petri Account