VMware Cloud Community
Sureshadmin
Contributor
Contributor
‎05-31-2011 09:24 AM

Powershell output inside a HTML collapsible panel

Hi,

I have a basic HTML/Javascript code to produce a collapsible panel in HTML page. I want a powershell script which can process this peice of HTML code and output the result of Get-cluster "mycluster" | Get-VM inside the collapsible panel.

<html>
  <head>
  <title>Test page</title>
  </head>
  <body>
<script language="javascript">
var ie4 = false; if(document.all) { ie4 = true; }
function getObject(id) { if (ie4) { return document.all[id]; } else { return document.getElementById(id); } }
function toggle(link, divId) { var lText = link.innerHTML; var d = getObject(divId);
 if (lText == '+') { link.innerHTML = '−'; d.style.display = 'block'; }
 else { link.innerHTML = '+'; d.style.display = 'none'; } }
</script>
<div style="border: 1px solid #000000; padding: 0px; background: #EEEEEE; "><table border="0" cellspacing="0" cellpadding="2" width="100%" style="background: #000000; color: #FFFFFF; "><tr><td>Testbox</td><td align="right">
[<a title="show/hide" id="exp1306866434_link" href="javascript: void(0);" onclick="toggle(this, 'exp1306866434');"  style="text-decoration: none; color: #FFFFFF; ">−</a>]</td></tr></table>
<div id="exp1306866434" style="padding: 3px;">Powershell content goes here</div>
<script language="javascript">toggle(getObject('exp1306866434_link'), 'exp1306866434');</script>
  </body>
</html>

Thanks in advance!

3 Replies
RvdNieuwendijk
Leadership
Leadership
‎05-31-2011 09:42 AM

You can convert the output of a PowerCLI script into html like this:

$Pre = @"
<html>
  <head>
  <title>Test page</title>
  </head>
  <body>
<script language="javascript">
var ie4 = false; if(document.all) { ie4 = true; }
function getObject(id) { if (ie4) { return document.all[id]; } else { return document.getElementById(id); } }
function toggle(link, divId) { var lText = link.innerHTML; var d = getObject(divId);
 if (lText == '+') { link.innerHTML = '−'; d.style.display = 'block'; }
 else { link.innerHTML = '+'; d.style.display = 'none'; } }
</script>
<div style="border: 1px solid #000000; padding: 0px; background: #EEEEEE; "><table border="0" cellspacing="0" cellpadding="2" width="100%" style="background: #000000; color: #FFFFFF; "><tr><td>Testbox</td><td align="right">
[<a title="show/hide" id="exp1306866434_link" href="javascript: void(0);" onclick="toggle(this, 'exp1306866434');"  style="text-decoration: none; color: #FFFFFF; ">−</a>]</td></tr></table>
<div id="exp1306866434" style="padding: 3px;">
"@

$Post = @"
</div>
<script language="javascript">toggle(getObject('exp1306866434_link'), 'exp1306866434');</script>
  </body>
</html>
"@

Get-cluster "mycluster" | Get-VM | ConvertTo-Html -PreContent $Pre -PostContent $Post -Fragment

Regards, Robert

Blog: https://rvdnieuwendijk.com/ | Twitter: @rvdnieuwendijk | Author of: https://www.packtpub.com/virtualization-and-cloud/learning-powercli-second-edition
Sureshadmin
Contributor
Contributor
‎06-07-2011 06:34 AM

Thanks Robert. This works perfect.

Any idea how to make 2 collapsible panel in a single webpage? for example: vmlist of 2 clusters, each in a separate collapsible panel.

0 Kudos
AmolPatil
Enthusiast
Enthusiast
‎06-28-2013 06:20 AM

Nice post..

But what can we do if we need multiple function output with the same.

I am collecting output as below and i want Show/Hide option.. on General Information, Number of VMs Per Datastore and Datastores and so on..

and with the border of table..

html.png

Regards, Amol Patil VCP 5
0 Kudos