Children in Navigation

Universal Dashboard
1

Weird thing happening to me … my dashboard loads and all the links in the navigation (side bar) work. I click on a page (regardless of its a parent or child in the navigation structure) and it takes me to the correct page. Once I go a page in, the children links no longer work. Anyone experience this before?

2

I actually have had this happen.
How do you have your dashboard navigation and pages setup?
Is it all in one file, or are you separating each page in a different file?

3

Different file

4 
$UDScriptRoot = $PSScriptRoot

$Navigation = @(
	New-UDListItem -Label 'MenuItem-1' -OnClick { Invoke-UDRedirect '/Page1' }
	New-UDListItem -Label 'MenuItem-2' -OnClick { <# Nothing #> } -Children {
		New-UDListItem -Label 'MenuItem-2a' -OnClick { Invoke-UDRedirect '/Page2a' }
		New-UDListItem -Label 'MenuItem-2b' -OnClick { Invoke-UDRedirect '/Page2b' }
	}
	New-UDListItem -Label 'MenuItem-3' -OnClick { Invoke-UDRedirect '/Page3' }
)

$Pages = @()

$Pages += New-UDPage -Name 'Page1' -Content {
	. "$UDScriptRoot\DashboardPages\Page1.ps1"
} -Navigation $Navigation

$Pages += New-UDPage -Name 'Page2a' -Content {
	. "$UDScriptRoot\DashboardPages\Page2a.ps1"
} -Navigation $Navigation

$Pages += New-UDPage -Name 'Page2b' -Content {
	. "$UDScriptRoot\DashboardPages\Page2b.ps1"
} -Navigation $Navigation

$Pages += New-UDPage -Name 'Page3' -Content {
	. "$UDScriptRoot\DashboardPages\Page3.ps1"
} -Navigation $Navigation

New-UDDashboard -Title 'DashboardExample' -Pages $Pages

This is what is working for me without any issue.

Be aware though; This method won’t let you edit the individual page content from the web-admin or VSC extension, unfortunately.

5

I have mine set up basically the same way:

$Navigation = @(
    New-UDListItem -Icon (New-UDIcon -Icon home -Size lg) -Label "Home" -OnClick {Invoke-UDRedirect '/home'}
    New-UDListItem -Icon (New-UDIcon -Icon server -Size lg) -Label "Servers" -OnClick {Invoke-UDRedirect '/servers'}
    New-UDListItem -Icon (New-UDIcon -Icon folder -Size lg) -Label "Scripts" -Children {
        New-UDListItem -id "subnav" -Icon (New-UDIcon -Icon play -Size sm) -Label "Run Script" -OnClick {Invoke-UDRedirect '/script'}
        New-UDListItem -id "subnav" -Icon (New-UDIcon -Icon tools -Size sm) -Label "New Build" -OnClick {Invoke-UDRedirect '/build'}
    }
    New-UDListItem -Icon (New-UDIcon -Icon book -Size lg) -Label "Workbooks" -OnClick {Invoke-UDRedirect '/workbooks'}
)

$pages = @()
$pagesPS1s = Get-ChildItem "C:\home\powershelluniversal\repository\dashboards\$name\Pages"

foreach ($page in $pagesPS1s) {
    $url = "/" + $page.BaseName.tolower()
    $pages += New-UDPage -Name $name -url $url -NavigationLayout permanent -Navigation $Navigation -Logo '/assets/logo.png' -Content {
        . "$($page.FullName)"
    }
}

Side note: the $UDScriptRoot variable never worked for me so I hardcoded it.

6

I could be wrong, but I feel like the order in which you have $name in the $pagesPS1s variable won’t result in what you are looking for in that foreach loop.

Since the $name variable is undeclared when you start the foreach loop, I don’t believe it actually knows what the eventual correct path is and does;

$pagesPS1s = Get-ChildItem "C:\home\powershelluniversal\repository\dashboards\$null\Pages"

Unless you have $name declared, but just not include it in what you’ve shared haha

The only real difference I see is me not using

New-UDPage -NavigationLayout permanent

Worth a try to see what it does when you leave it out?

7

It’s declared I just didn’t include the whole script! The $name is populated with the dashboard name, and the pages load, so that can’t be it. Let me try disabling permanent.

8

Ah … once I took the -id “subnav” out from the children it worked.

I had css associated with this ID to indent the children:

#subnav{		
    padding-left: 30px;
}
1 Like
9

I honestly can’t remember what exactly made me have a similar issue… But I think you’ve found the culprit in the custom CSS?
Might be worth a bug report, as I don’t think something so seemingly small should cause this - haha!

10

Having the same ID for 2 components will cause it to overwrite the event handler in this case. So since there are 2 OnClick event handlers, the second one will win.

You might be able to achieve this with UD style.

    New-UDListItem -Icon (New-UDIcon -Icon folder -Size lg) -Label "Scripts" -Children {
      New-UDStyle -Style "padding-left: 30px" -Content {
        New-UDListItem -Icon (New-UDIcon -Icon play -Size sm) -Label "Run Script" -OnClick {Invoke-UDRedirect '/script'}
        New-UDListItem -Icon (New-UDIcon -Icon tools -Size sm) -Label "New Build" -OnClick {Invoke-UDRedirect '/build'}
      }
    }

In 2.4, we’ve add -ClassName to most of the components. This will let you apply classes throughout the dashboard without having to apply them directly to an ID.

    New-UDListItem -Icon (New-UDIcon -Icon folder -Size lg) -Label "Scripts" -Children {
        New-UDListItem -ClassName 'sidebarclass' -Icon (New-UDIcon -Icon play -Size sm) -Label "Run Script" -OnClick {Invoke-UDRedirect '/script'}
        New-UDListItem  -ClassName 'sidebarclass' -Icon (New-UDIcon -Icon tools -Size sm) -Label "New Build" -OnClick {Invoke-UDRedirect '/build'}
    }
1 Like
11

Thanks Adam that worked like a charm.

2 Likes