Questions About HTMLOrgCharts

[BrooksV]

I have a very wide and very long New-HTMLOrgChart

I created a New-HTMLOrgChart using Azure Management Groups (260 of them) which are nested 6 levels deep and have 13 Level 1 Management groups

I have been able to generate the data and formated it successfully using New-HTMLOrgChart -VerticalLevel 3 -Direction TopToBottom settings but it's still too wide.

I would love to insert some screen shots but I always get "Something went really wrong, and we can't process that file. Try again." It might be due to the security software and/or organizational policies preventing it the attachments.

I am having difficulty with the following:

1. How to create a Horizontal Scroll Bar as zooming out, panning, and then zooming in is not a good user experience and difficult to locate a specific node

• On a 32" 4K monitor I can see the full chart at 70% Browser Zoom but what do my co-workers and managers do when viewing from a LapTop PC?

2. The New-OrgChartNode Titles are longer than the Name and shows the entire Title text in the chart

• Is there a way to get the width of the Name to match that of the Title?
• How to make the Name show the entire text or to Tool Hint it?
• I know some could be done in the css but I have no idea how to do that.

3. When using the Show/Hide node indicators to collapse Siblings and Children nodes, Showing does not return to previous state.

• Is there a way to reset the Chart without having to reload the entire HTML file?

4. New-HTMLOrgChart -ChartNodes are there any examples on how to create the DataSource instead of nesting New-OrgChartNode?

• What would the PowerShell Object looks like?

5. How to display additional selected Node details?

• When I click on a Node, is it possible to display a Pop-Up or link to a section on the screen to display additional Node related details?
• Where and how in the html should that data for those additional details be placed? What New-HTMLxxxx CmdLet would be used?

I tried doing everything using Diagrams but it ended up being a blob in the middle of the screen. OrgCharts have a really nice clean look when presenting hierarchical trees.

Sorry for so many questions. I wasn't sure if I should create separate discussions or to do what I did here.

Thanks in-advance.
Regards, Brooks

[BrooksV]

For Question 2. Above:
I think I found a way but I am not sure this is the correct way or not.

I added this to change the CSS Style for OrgChart nodes:

   $StyleNodeInformation = @{
        ".orgchart .node .title" = @{
            'width' = 'inherit'
        }
    }
    Remove-EmptyValue -Hashtable $StyleNodeInformation -Recursive -Rerun 2
    if ($StyleNodeInformation) {
        Add-HTMLStyle -Placement Header -Css $StyleNodeInformation -SkipTags
    }

Example:

New-HTML -TitleText 'My Title' -Online -FilePath "$PSScriptRoot\Example-OrgChart-Test-26.html" {
    $StyleNodeInformation = @{
        ".orgchart .node .title" = @{
            'width' = 'inherit'
        }
    }
    Remove-EmptyValue -Hashtable $StyleNodeInformation -Recursive -Rerun 2
    if ($StyleNodeInformation) {
        Add-HTMLStyle -Placement Header -Css $StyleNodeInformation -SkipTags
    }
    New-HTMLSection -HeaderText 'Org Chart Test 26' -AnchorName "section_tree" -HeaderBackGroundColor "#EA8B05" -HeaderTextColor DarkBlue -JustifyContent center -CanCollapse {
       New-HTMLOrgChart -Pan -VerticalLevel 3 -Direction TopToBottom -ChartNodes {
              New-OrgChartNode -Name 'This is a very long Name that is longer than the 130px default' -Title 'The Root Node Title (Content) that is also very long' {
                  New-OrgChartNode -Name 'Another very long Name that is longer than the 130px default' -Title 'The Root Node Title (Content) that is also very long' {
                       ForEach ($entity in $mgEntities.Where({$_.Level -eq 1 -and $_.TenantId -eq $TenantId})) {
                           Get-ChildrenNodes -Entity $Entity -LkUpEntity $LkUpEntity -LkUpAssignments $LkUpAssignments
                       }
                  }
              }
        }
    }
}

[PrzemyslawKlys]

Hi, to be honest - I don't fully know. I am mainly using standard diagrams as those can be pushed into org diagrams by using hierarchical feature. I never tested with a huge amount of nodes being added to single node tho. Probably an idea that I have right now would be to create hidden nodes (I am not sure if that's even possible - just thinking loud) to be able to create "empty levels" to create an easier layout.

I can see there are 3 new versions of the library we're using, which may help a bit with your problems.

But if your proposed feature works for you, it could be used.

[BrooksV]

For Question to #1. How to create a Horizontal Scroll Bar

I was able to enable the bottom ScrollBar but could not figure out how to also create a Top ScrollBar

If anyone knows how to enable Horizontal ScrollBars at top and bottom of Chart, please let me know.

To Enable the Bottom ScrollBar:

        "div.orgchartWrapper" = @{
            'margin' = '4px, 4px'
            'padding' = '4px'
            'width' = 'calc(200%)'
            'overflow-x' = 'auto !important'
            'white-space' = 'inherit'
        }

I added this after

New-HTML -TitleText 'My OrgChart Example' -Online -FilePath "$PSScriptRoot\MyOrgChatExample-30.html" {
    $StyleNodeInformation = @{
        ".orgchart .node .title" = @{
            'width' = 'inherit' // Used to align the Name to the same size as the Title
        }
        "div.orgchartWrapper" = @{
            'margin' = '4px, 4px'
            'padding' = '4px'
            'width' = 'calc(200%)'
            'overflow-x' = 'auto !important'
            'white-space' = 'inherit'
        }
    }
    Remove-EmptyValue -Hashtable $StyleNodeInformation -Recursive -Rerun 2
    if ($StyleNodeInformation) {
        Add-HTMLStyle -Placement Header -Css $StyleNodeInformation -SkipTags
    }

[BrooksV]

For Question #5: How to display additional selected Node details?

I was hoping to discover how to when clicking a Node to do something more such as:

• Copying additional content details into the Clipboard
  • Not sure how to construct the data source content nor how to copy it to the ClipBoard
• Linking Node to a frame in a different section to display additional details
  • Not sure how to construct the data source content and then get that content to display somewhere else on the page
• Hyper Linking the Title to an HTML file on Disk

I was able to get working Hyper Linked Title approach as follows:

• Before New-OrgChartNode
• Create and write out an HTML File that contains a Page of the Nodes Additional Details
• Create a Variable with the reference to the saved detailed HTML file
• Create a $Title variable with the contents and the hyperlink:

$Title = "<a href=`"$aRefenceToHtmlDetailsFile`" target=`"_blank`">" + $MyData.Title + "</a>"
New-OrgChartNode -Name $Name -Title $countTitle -TitleColor DarkBlue -TitleBackgroundColor "#ffa84e" -Children {
... 
}