• Status: Solved
  • Priority: Low
  • Security: Public
  • Views: 76
  • Last Modified:

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.
0
janhoedt
Asked:
janhoedt
  • 5
  • 2
  • 2
1 Solution
 
Jeremy WeisingerSenior Network Consultant / EngineerCommented:
0
 
Shaun VermaakTechnical Specialist/DeveloperCommented:
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
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 Specialist/DeveloperCommented:
Post that in a jsfiddle.net share
1
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 5
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now