<div>
Have you tried using ConvertTo-HTML? 
<a href="https://docs.microsoft.com/en-us/powershell/module/microsoft.powershell.utility/convertto-html?view=powershell-5.1" rel="ugc">https://docs.microsoft.com/en-us/powershell/module/microsoft.powershell.utility/convertto-html?view=powershell-5.1</a>
</div>

<div>
I use this library to create pretty HTML tables 
<a href="https://gallery.technet.microsoft.com/scriptcenter/PowerShell-HTML-Notificatio-e1c5759d" rel="ugc nofollow">https://gallery.technet.microsoft.com/scriptcenter/PowerShell-HTML-Notificatio-e1c5759d</a>
</div>

<div>
I know how to make html. It s the clickable part and the generation of the organogram in html combined with powershell that I m looking for.
</div>

<div>
Let me clarify: this is what I'm looking for, BUT it should expand/collapse when you click on an item: 
<a href="https://codepen.io/bernardoantunes/pen/inrbh" rel="ugc">https://codepen.io/bernardoantunes/pen/inrbh</a>
</div>

<div>
Oh, I see. Sorry I didn't read your question carefully. That's getting beyond the basics of HTML and unfortunately I will be of no help. :(
</div>

<div>
Got some code here wat works, but would need to make it clickable so it expands. 
The button css can do that, but then it is a button and it should stay text. 
 
 
&lt;HTML&gt;&lt;TITLE&gt;Organogram generated on 07-11-2017 21-51-26&lt;/TITLE&gt; &nbsp; &nbsp;&lt;BODY&gt; 
&lt;style type=&quot;text/css&quot;&gt; 
&nbsp; &nbsp; &lt;!-- 
&nbsp; &nbsp; body { 
&nbsp; &nbsp; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
&nbsp; &nbsp; font: 10pt Verdana, Geneva, Arial, Helvetica, sans-serif; 
&nbsp; &nbsp; } 
 
&nbsp; &nbsp; #report { width: 835px; } 
 
&nbsp; &nbsp; table{ 
 
&nbsp; &nbsp; border-collapse: collapse; 
&nbsp; &nbsp; border: 1px solid #FFFFFF; 
 
&nbsp; &nbsp; font: 10pt Verdana, Geneva, Arial, Helvetica, sans-serif; 
&nbsp; &nbsp; color: black; 
&nbsp; &nbsp; margin-bottom: 10px; 
&nbsp; &nbsp; } 
 
&nbsp; &nbsp; table td{ 
&nbsp; &nbsp; border-collapse: collapse; 
&nbsp; &nbsp; border: 1px solid #FFFFFF; 
&nbsp; &nbsp; font-size: 14px; 
&nbsp; &nbsp; padding-left: 10px; 
&nbsp; &nbsp; padding-right: 10px; 
 
&nbsp; &nbsp; } 
 
&nbsp; &nbsp; table th { 
&nbsp; &nbsp; border-collapse: collapse; 
&nbsp; &nbsp; border: 2px solid ##FFFFFF; 
&nbsp; &nbsp; 
&nbsp; &nbsp; font-size: 14px; 
&nbsp; &nbsp; font-weight: bold; 
&nbsp; &nbsp; padding-left: 10px; 
&nbsp; &nbsp; padding-right: 10px; 
 
&nbsp; &nbsp; } 
 
&nbsp; &nbsp; h2{ clear: both; font-size: 130%; color: black; } 
 
&nbsp; &nbsp; h3{ 
&nbsp; &nbsp; clear: both; 
&nbsp; &nbsp; font-size: 115%; 
&nbsp; &nbsp; margin-left: 20px; 
&nbsp; &nbsp; margin-top: 30px; 
&nbsp; &nbsp; color: brown; 
&nbsp; &nbsp; } 
 
&nbsp; &nbsp; h4{ 
&nbsp; &nbsp; clear: both; 
&nbsp; &nbsp; font-size: 90%; 
&nbsp; &nbsp; margin-left: 20px; 
&nbsp; &nbsp; margin-top: 30px; 
&nbsp; &nbsp; } 
 
&nbsp; &nbsp; } 
&nbsp; &nbsp; 
&nbsp; &nbsp; button.accordion { 
&nbsp; &nbsp; background-color: #eee; 
&nbsp; &nbsp; color: #444; 
&nbsp; &nbsp; cursor: pointer; 
&nbsp; &nbsp; padding: 18px; 
&nbsp; &nbsp; width: 25%; 
&nbsp; &nbsp; border: none; 
&nbsp; &nbsp; text-align: center; 
&nbsp; &nbsp; outline: none; 
&nbsp; &nbsp; transition: 0.4s; 
&nbsp; &nbsp; } 
 
&nbsp; &nbsp; button.accordion.active, button.accordion:hover { 
&nbsp; &nbsp; background-color: #ddd; 
&nbsp; &nbsp; } 
 
&nbsp; &nbsp; div.panel { 
&nbsp; &nbsp; padding: 0 18px; 
&nbsp; &nbsp; display: none; 
&nbsp; &nbsp; background-color: white; 
&nbsp; &nbsp; } 
 
&nbsp; &nbsp; div.panel.show { 
&nbsp; &nbsp; display: block; 
&nbsp; &nbsp; } 
 
&nbsp; &nbsp; * Code based on this sample <a href="http://thecodeplayer.com/walkthrough/css3-family-tree" rel="ugc">http://thecodeplayer.com/walkthrough/css3-family-tree</a>&nbsp;*/ 
 
/*Now the CSS*/ 
.tree * {margin: 0; padding: 0;} 
 
.tree ul { 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding-top: 20px; position: relative; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: all 0.5s; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition: all 0.5s; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-transition: all 0.5s; 
} 
 
.tree li { 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;float: left; text-align: center; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;list-style-type: none; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: relative; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding: 20px 5px 0 5px; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: all 0.5s; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition: all 0.5s; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-transition: all 0.5s; 
} 
 
/*We will use ::before and ::after to draw the connectors*/ 
 
.tree li::before, .tree li::after{ 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content: ''; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute; top: 0; right: 50%; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-top: 1px solid #8dc63f; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 50%; height: 20px; 
} 
.tree li::after{ 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;right: auto; left: 50%; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-left: 1px solid #8dc63f; 
} 
 
/*We need to remove left-right connectors from elements without 
any siblings*/ 
.tree li:only-child::after, .tree li:only-child::before { 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: none; 
} 
 
/*Remove space from the top of single children*/ 
.tree li:only-child{ padding-top: 0;} 
 
/*Remove left connector from first child and 
right connector from last child*/ 
.tree li:first-child::before, .tree li:last-child::after{ 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border: 0 none; 
} 
 
/*Adding back the vertical connector to the last nodes*/ 
.tree li:last-child::before{ 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-right: 1px solid #8dc63f; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-radius: 0 5px 0 0; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-border-radius: 0 5px 0 0; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-border-radius: 0 5px 0 0; 
} 
.tree li:first-child::after{ 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-radius: 5px 0 0 0; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-border-radius: 5px 0 0 0; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-border-radius: 5px 0 0 0; 
} 
 
/*Time to add downward connectors from parents*/ 
.tree ul ul::before{ 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content: ''; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute; top: 0; left: 50%; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-left: 1px solid #8dc63f; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 0; height: 20px; 
} 
 
.tree li a{ 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border: 1px solid #8dc63f; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding: 1em 0.75em; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-decoration: none; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: #666767; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-family: arial, verdana, tahoma; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size: 0.85em; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: inline-block; 
&nbsp; 
&nbsp; /* 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-radius: 5px; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-border-radius: 5px; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-border-radius: 5px; 
&nbsp; */ 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: all 0.5s; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition: all 0.5s; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-transition: all 0.5s; 
} 
 
/* -------------------------------- */ 
/* Now starts the vertical elements */ 
/* -------------------------------- */ 
 
.tree ul.vertical, ul.vertical ul { 
&nbsp; padding-top: 0px; 
&nbsp; left: 50%; 
} 
 
/* Remove the downward connectors from parents */ 
.tree ul ul.vertical::before { 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: none; 
} 
 
.tree ul.vertical li { 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;float: none; 
&nbsp; text-align: left; 
} 
 
.tree ul.vertical li::before { 
&nbsp; right: auto; 
&nbsp; border: none; 
} 
 
.tree ul.vertical li::after{ 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: none; 
} 
 
.tree ul.vertical li a{ 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding: 10px 0.75em; 
&nbsp; margin-left: 16px; 
} 
 
.tree ul.vertical li::before { 
&nbsp; top: -20px; 
&nbsp; left: 0px; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-bottom: 1px solid #8dc63f; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-left: 1px solid #8dc63f; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 20px; height: 60px; 
} 
 
.tree ul.vertical li:first-child::before { 
&nbsp; top: 0px; 
&nbsp; height: 40px; 
} 
 
/* Lets add some extra styles */ 
 
div.tree &gt;&nbsp;ul &gt;&nbsp;li &gt;&nbsp;ul &gt;&nbsp;li &gt;&nbsp;a { 
&nbsp; width: 11em; 
} 
 
div.tree &gt;&nbsp;ul &gt;&nbsp;li &gt;&nbsp;a { 
&nbsp; font-size: 1em; 
&nbsp; font-weight: bold; 
} 
 
 
/* ------------------------------------------------------------------ */ 
/* Time for some hover effects &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;*/ 
/* We will apply the hover effect the the lineage of the element also */ 
/* ------------------------------------------------------------------ */ 
.tree li a:hover, .tree li a:hover+ul li a { 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background: #8dc63f; 
&nbsp; color: white; 
&nbsp; /* border: 1px solid #aaa; */ 
} 
/*Connector styles on hover*/ 
.tree li a:hover+ul li::after, 
.tree li a:hover+ul li::before, 
.tree li a:hover+ul::before, 
.tree li a:hover+ul ul::before{ 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-color: &nbsp;#aaa; 
} 
 
 
} 
 
 
&nbsp; &nbsp; --&gt; 
&nbsp; &nbsp; &lt;/style&gt; 
&lt;/head&gt; 
&lt;H2&gt;Organogram &lt;/H2&gt;&lt;BR&gt;&lt;div class=&quot;tree&quot;&gt; &lt;ul&gt; &lt;li&gt;&lt;a href='#'&gt;General manager&lt;/a&gt;&lt;ul &nbsp;class=&quot;vertical&quot;&gt; 
&lt;li&gt; &lt;a href='#'&gt;Manager 2&lt;/a&gt; 
&lt;li&gt; &lt;a href='#'&gt;Manager3&lt;/a&gt;
</div>

<div>
Thanks, nice site btw. This is the report: 
<a href="https://jsfiddle.net/janhoedt/amhsyzrk/#&togetherjs=b2auExk0lJ" rel="ugc">https://jsfiddle.net/janhoedt/amhsyzrk/#&togetherjs=b2auExk0lJ</a> 
 
So this is the idea of the organogram. Managers will contain submanagers till there are just members (not managers) which have no submembers. A few things I 'd like to have: 
 
*Make everything collapsable 
*Make it searchable, so if I look for a name, it expands till the specific name 
*If possible: when searching for a name it should autofill the existing names
</div>

<div>
Any comment here howto proceed?
</div>

<div>
<div class="content wysiwyg-content">
Hi, 
 
I would like to create an html report from this PS function. 
<a href="https://gallery.technet.microsoft.com/scriptcenter/Get-ADDirectReport-962616c6" rel="ugc nofollow">https://gallery.technet.microsoft.com/scriptcenter/Get-ADDirectReport-962616c6</a> 
 
Iow: get-addirectreports -identity managersamaccountname shows all members in team of this manager. 
I then would like to have a html which shows 
 
MANAGER 
member1 member2 member3 
 
each of those members should then be clickable so if you click you can see the members below it 
f.e you click member1, you get all members in team of manager member1 
 
Hope this is clear, thanks for your input. 
J.
</div>
</div>

Hi,

I would like to create an html report from this PS function.
https://gallery.technet.microsoft.com/scriptcenter/Get-ADDirectReport-962616c6

Iow: get-addirectreports -identity managersamaccountname shows all members in team of this manager.
I then would like to have a html which shows

MANAGER
member1 member2 member3 

each of those members should then be clickable so if you click you can see the members below it
f.e you click member1, you get all members in team of manager member1

Hope this is clear, thanks for your input.
J.

Powershell - html: create html from get-addirectreports?

Windows PowerShell is a task automation and configuration management framework from Microsoft, consisting of a command-line shell and associated scripting language built on the .NET Framework. PowerShell provides full access to the Component Object Model (COM) and Windows Management Instrumentation (WMI), enabling administrators to perform administrative tasks on both local and remote Windows systems as well as WS-Management and Common Information Model (CIM) enabling management of remote Linux systems and network devices.

Powershell

HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.