Using CSS with Powershell Output: A Step Up in Styling

Question

Using CSS with Powershell Output: A Step Up in Styling

Recently, I've been experimenting with the powershell functions "Convertto-HTML" and ConvertTo-EnhancedHTML (a downloadable module). While searching online, I stumbled upon a visually appealing table template that utilizes CSS and Angular. Unfortunately, my expertise in CSS and Angular is limited, so I am seeking assistance to properly format the output.
By using

Get-IAMUserList | Select Username, PasswordLastUsed, UserID |ConvertTo-Html -PreContent "<h2>User List</h2>"|Out-File report.htm

The produced result is a simplistic HTML table (excluding the header).

<body>
<h2>User List</h2>
<table>
<colgroup><col/><col/><col/></colgroup>
<tr><th>UserName</th><th>PasswordLastUsed</th><th>UserId</th></tr>
<tr><td>Joe</td><td>1/3/2020 4:36:24 PM</td><td>IPNB63</td></tr>
<tr><td>Sally</td><td>1/1/0001 12:00:00 AM</td><td>GRUIF</td></tr>
<tr><td>Joe</td><td>1/1/0001 12:00:00 AM</td><td>JI4H</td></tr>
<tr><td>user</td><td>1/1/0001 12:00:00 AM</td><td>Z4PM2</td></tr>
</table>
</body>

I'm interested in incorporating the code from this website for styling the data. It serves as a great example and template. Any guidance or support would be highly appreciated. Here is the link --Link to Code

To clarify - I have researched numerous CSS examples for displaying powershell output and tried several of them. Many are straightforward and allow me to format my data adequately. However, I am drawn to the more advanced designs showcased in the provided link but lack the understanding of CSS/JS required to implement them effectively. Thank you for any assistance!

javascript html css powershell

Answer 1

Answer №1

If you're looking to think outside the box with ConvertTo-Html and want some custom formatting, then manual CSS creation is required for that extra touch. Alternatively, if you prefer using your own CSS styles (especially for a static table where JavaScript isn't necessary), one simple approach would be to construct the table yourself.

Here's how I do it:

$UserList = Get-IAMUserList | Select Username, PasswordLastUsed, UserID

$HTMLHead = @'
<!DOCTYPE html>
<html>
<head>
    <title>Table</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/sandstone/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <h2>User List</h2>

  <table class="table table-bordered table-striped">  
    <thead>
      <tr>
        <td>
          <a href="#">UserName</a>
        </td>
        <td>
          <a href="#">PasswordLastUsed</a>
        </td>
        <td>
          <a href="#">UserId</a>
        </td>
      </tr>
    </thead>
    <tbody>
'@

$HTMLRow = @'
      <tr>
        <td>{{UserName}}</td>
        <td>{{PasswordLastUsed}}</td>
        <td>{{UserId}}</td>
      </tr>
'@

$HTMLFoot = @'
    </tbody>
  </table>
</div>
</body>
</html>
'@

$HTMLTable = ''

$UserList | ForEach-Object {
    $Row = $HTMLRow.Replace('{{UserName}}', $_.UserName)
    $Row = $Row.Replace('{{PasswordLastUsed}}', $_.PasswordLastUsed)
    $Row = $Row.Replace('{{UserId}}', $_.UserId)

    $HTMLTable += $Row
}

#Compile everything together
$HTMLOut = $HTMLHead + $HTMLTable + $HTMLFoot

$HTMLOut | Out-File report.htm

Answer 2

If you're looking to think outside the box with ConvertTo-Html and want some custom formatting, then manual CSS creation is required for that extra touch. Alternatively, if you prefer using your own CSS styles (especially for a static table where JavaScript isn't necessary), one simple approach would be to construct the table yourself.

Here's how I do it:

$UserList = Get-IAMUserList | Select Username, PasswordLastUsed, UserID

$HTMLHead = @'
<!DOCTYPE html>
<html>
<head>
    <title>Table</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/sandstone/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <h2>User List</h2>

  <table class="table table-bordered table-striped">  
    <thead>
      <tr>
        <td>
          <a href="#">UserName</a>
        </td>
        <td>
          <a href="#">PasswordLastUsed</a>
        </td>
        <td>
          <a href="#">UserId</a>
        </td>
      </tr>
    </thead>
    <tbody>
'@

$HTMLRow = @'
      <tr>
        <td>{{UserName}}</td>
        <td>{{PasswordLastUsed}}</td>
        <td>{{UserId}}</td>
      </tr>
'@

$HTMLFoot = @'
    </tbody>
  </table>
</div>
</body>
</html>
'@

$HTMLTable = ''

$UserList | ForEach-Object {
    $Row = $HTMLRow.Replace('{{UserName}}', $_.UserName)
    $Row = $Row.Replace('{{PasswordLastUsed}}', $_.PasswordLastUsed)
    $Row = $Row.Replace('{{UserId}}', $_.UserId)

    $HTMLTable += $Row
}

#Compile everything together
$HTMLOut = $HTMLHead + $HTMLTable + $HTMLFoot

$HTMLOut | Out-File report.htm

Using CSS with Powershell Output: A Step Up in Styling

Answer №1

Similar questions

Creating an interactive website with the functionalities of a blog by combining AngularJS with Middleman

Updating the image source using JQuery dynamically

How can you extract the text associated with the chosen value in a dropdown list implemented in JavaScript?

Tips for preserving the contents of a list with HTML and Javascript

Storing passwords in a text file using PHP

Container slide-show fill error

Transition from the previous image to the new one with a fading effect to enhance list item navigation

collaborating with complex structures within an object

Different perspectives displayed simultaneously on a single page, achieved without the need for routes

Choosing the perfect gradient shade for a progress bar canvas illustration: Tips and tricks

Prevent any sliding animations of content when the button is triggered

Display or conceal elements using Jquery based on radio button selection

Adding a gradient to enhance an SVG chart

How to Create a Dynamic CSS Mobile Menu Animation

I am receiving a 401 error when attempting to verify the token following a successful login

Is it possible to adjust a single element within a class without affecting the rest using CSS?

Transform form array elements into JSON format using solely JavaScript or other client-side libraries

How can I use PHP to send the user to another PHP file?

Retrieving the special attribute value from a div element

Ways to determine if a date matches today's date within a component template