PS script for horizontal tabbed HTML Report
It's just another version of the earlier PS script, to create the report with horizontal tabs this time. Likely in future I would create a single function, which can do both. But before that I need to figure out scaling issue
Function New-HTabbedHTML {
[CmdletBinding()]
param (
[Parameter(Mandatory=$true)][ValidateScript({
($_ | Get-Member | Where-Object {$_.membertype -eq "NoteProperty"}).count -eq 2 -AND
($_ | Get-member | Where-Object {$_.membertype -eq "Noteproperty"}).Name -contains "Content" -AND
($_ | Get-member | Where-Object {$_.membertype -eq "Noteproperty"}).Name -contains "Title"
})][array]$inputArray,
[Parameter(Mandatory=$true)][string]$title
)
$CSS = @"
.tab {
overflow: hidden;
border: 1px solid Aliceblue;
background-color: AliceBlue;
background: linear-gradient(lightblue, blue);
}
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 10px 10px ;
transition: 0.2s;
}
.tab button:hover {
background-color: khaki;
}
.tab button.active {
background-color: seagreen;
}
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid lightblue;
border-top: none;
}
<style>
h1 { font-family: Arial, Helvetica, sans-serif; color: navy; font-size: 28px; }
h2 { font-family: Arial, Helvetica, sans-serif; color: midnightblue; font-size: 16px; }
table { font-size: 12px; border: 1px; font-family: Arial, Helvetica, sans-serif; }
td { padding: 4px; margin: 0px; border: 1; }
th { background: #395870; background: linear-gradient(#49708f, #293f50); color: #fff; font-size: 11px; text-transform: uppercase; padding: 10px 15px; vertical-align: middle; }
tbody tr:nth-child(even) { background: aliceblue; }
</style>
"@
$jScript = @"
function openTab(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();
"@
$Content = "<!DOCTYPE html><html><head>"+ "<title>$title</title>" +"<meta name='viewport' content='width=device-width, initial-scale=1'><style>" + "`n" + "* {box-sizing: border-box}" + "`n" + "body {font-family: Arial; background-color: lightblue;}"
$Content += "`n" + $CSS + "`n" + "</style></head><body>"
$Content += "`n" + "<div class='tab'>" + "`n"
$i = 0
ForEach($row in $inputArray){
if($i -eq 0){ $Content += "<button class='tablinks' onclick=`"openTab(event, '$($row.Title)')`" id='defaultOpen' >$($row.Title)</button>" + "`n" }
else { $Content += "<button class='tablinks' onclick=`"openTab(event, '$($row.Title)')`">$($row.Title)</button>" + "`n" }
$i++
}
$Content += "</div>" + "`n"
ForEach($row in $inputArray){
$Content += "<div id='$($row.Title)' class='tabcontent'><p>$($row.Content)</p></div>" + "`n"
}
$Content += "<script>`n" + $jScript + "`n</script></body></html>"
Return $Content
}
New-HTabbedHTML -inputArray (get-service | Select-Object @{l="Title";e={$_.DisplayName}},@{l="Content";e={$_.status}} -first 5) -title "Random" | set-content c:\temp\new.htm
invoke-item c:\temp\new.htm