Powershell - html: create html from get-addirectreports?

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.
janhoedtAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Jeremy WeisingerSenior Network Consultant / EngineerCommented:
0
Shaun VermaakTechnical SpecialistCommented:
0
janhoedtAuthor Commented:
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.
0
Has Powershell sent you back into the Stone Age?

If managing Active Directory using Windows Powershell® is making you feel like you stepped back in time, you are not alone.  For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why.

janhoedtAuthor Commented:
Let me clarify: this is what I'm looking for, BUT it should expand/collapse when you click on an item:
https://codepen.io/bernardoantunes/pen/inrbh
0
Jeremy WeisingerSenior Network Consultant / EngineerCommented:
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. :(
0
janhoedtAuthor Commented:
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.


<HTML><TITLE>Organogram generated on 07-11-2017 21-51-26</TITLE>    <BODY>
<style type="text/css">
    <!--
    body {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font: 10pt Verdana, Geneva, Arial, Helvetica, sans-serif;
    }

    #report { width: 835px; }

    table{

    border-collapse: collapse;
    border: 1px solid #FFFFFF;

    font: 10pt Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: black;
    margin-bottom: 10px;
    }

    table td{
    border-collapse: collapse;
    border: 1px solid #FFFFFF;
    font-size: 14px;
    padding-left: 10px;
    padding-right: 10px;

    }

    table th {
    border-collapse: collapse;
    border: 2px solid ##FFFFFF;
   
    font-size: 14px;
    font-weight: bold;
    padding-left: 10px;
    padding-right: 10px;

    }

    h2{ clear: both; font-size: 130%; color: black; }

    h3{
    clear: both;
    font-size: 115%;
    margin-left: 20px;
    margin-top: 30px;
    color: brown;
    }

    h4{
    clear: both;
    font-size: 90%;
    margin-left: 20px;
    margin-top: 30px;
    }

    }
   
    button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 25%;
    border: none;
    text-align: center;
    outline: none;
    transition: 0.4s;
    }

    button.accordion.active, button.accordion:hover {
    background-color: #ddd;
    }

    div.panel {
    padding: 0 18px;
    display: none;
    background-color: white;
    }

    div.panel.show {
    display: block;
    }

    * Code based on this sample http://thecodeplayer.com/walkthrough/css3-family-tree */

/*Now the CSS*/
.tree * {margin: 0; padding: 0;}

.tree ul {
      padding-top: 20px; position: relative;
      
      transition: all 0.5s;
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
}

.tree li {
      float: left; text-align: center;
      list-style-type: none;
      position: relative;
      padding: 20px 5px 0 5px;
      
      transition: all 0.5s;
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
}

/*We will use ::before and ::after to draw the connectors*/

.tree li::before, .tree li::after{
      content: '';
      position: absolute; top: 0; right: 50%;
      border-top: 1px solid #8dc63f;
      width: 50%; height: 20px;
}
.tree li::after{
      right: auto; left: 50%;
      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 {
      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{
      border: 0 none;
}

/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
      border-right: 1px solid #8dc63f;
      border-radius: 0 5px 0 0;
      -webkit-border-radius: 0 5px 0 0;
      -moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
      border-radius: 5px 0 0 0;
      -webkit-border-radius: 5px 0 0 0;
      -moz-border-radius: 5px 0 0 0;
}

/*Time to add downward connectors from parents*/
.tree ul ul::before{
      content: '';
      position: absolute; top: 0; left: 50%;
      border-left: 1px solid #8dc63f;
      width: 0; height: 20px;
}

.tree li a{
      border: 1px solid #8dc63f;
      padding: 1em 0.75em;
      text-decoration: none;
      color: #666767;
      font-family: arial, verdana, tahoma;
      font-size: 0.85em;
      display: inline-block;
 
  /*
      border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
  */
      
      transition: all 0.5s;
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
}

/* -------------------------------- */
/* Now starts the vertical elements */
/* -------------------------------- */

.tree ul.vertical, ul.vertical ul {
  padding-top: 0px;
  left: 50%;
}

/* Remove the downward connectors from parents */
.tree ul ul.vertical::before {
      display: none;
}

.tree ul.vertical li {
      float: none;
  text-align: left;
}

.tree ul.vertical li::before {
  right: auto;
  border: none;
}

.tree ul.vertical li::after{
      display: none;
}

.tree ul.vertical li a{
      padding: 10px 0.75em;
  margin-left: 16px;
}

.tree ul.vertical li::before {
  top: -20px;
  left: 0px;
      border-bottom: 1px solid #8dc63f;
      border-left: 1px solid #8dc63f;
      width: 20px; height: 60px;
}

.tree ul.vertical li:first-child::before {
  top: 0px;
  height: 40px;
}

/* Lets add some extra styles */

div.tree > ul > li > ul > li > a {
  width: 11em;
}

div.tree > ul > li > a {
  font-size: 1em;
  font-weight: bold;
}


/* ------------------------------------------------------------------ */
/* Time for some hover effects                                        */
/* We will apply the hover effect the the lineage of the element also */
/* ------------------------------------------------------------------ */
.tree li a:hover, .tree li a:hover+ul li a {
      background: #8dc63f;
  color: white;
  /* 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{
      border-color:  #aaa;
}


}


    -->
    </style>
</head>
<H2>Organogram </H2><BR><div class="tree"> <ul> <li><a href='#'>General manager</a><ul  class="vertical">
<li> <a href='#'>Manager 2</a>
<li> <a href='#'>Manager3</a>
0
Shaun VermaakTechnical SpecialistCommented:
Post that in a jsfiddle.net share
1

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
janhoedtAuthor Commented:
Thanks, nice site btw. This is the report:
https://jsfiddle.net/janhoedt/amhsyzrk/#&togetherjs=b2auExk0lJ

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
0
janhoedtAuthor Commented:
Any comment here howto proceed?
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Powershell

From novice to tech pro — start learning today.