Menus and pages

PowerShell Universal
#1

I’m so very very stuck.

I have gone through so many guides, videos and examples. But very few of them seem to be complete.

I’m currently trying to create a menu to several pages.

I understand that the new-udpage command accepts -url as a parameter. But it doesn’t seem that the list item for the menu does?
New-UDListItem -Label “Reset password” -OnClick {}

Here’s the code that I have. But it’s not working as I’m obviously doing something wrong. I’m also having issues with intelisense in VSCode so figuring out what commands support what parameters has been hit and miss.

$Navigation = @( 
New-UDListItem -Label "Home"

New-UDListItem -Label "Active directory" -Children {

    New-UDListItem -Label "Check user" -OnClick {}

    New-UDListItem -Label "Reset password" -OnClick {}

    New-UDListItem -Label "Get last login" -OnClick {}

    New-UDListItem -Label "User numbers" -OnClick {}

}

)

$Pages = @()

$Pages += New-UDPage -Name ‘Check user’ -Url “check-user” -Content {

New-UDTypography -Text “Hello”

} -NavigationLayout permanent -Navigation $Navigation

$Pages += New-UDPage -Name ‘reset password’ -Url “reset-password” -Content {

New-UDTypography -Text "Hello"

} -NavigationLayout permanent -Navigation $Navigation

New-UDDashboard -Pages $Pages -Title “DCU Active Directory” -Content {

import-module "C:\Program Files (x86)\WindowsPowerShell\Modules\DCU\DCU.psd1"

New-UDForm -content {

New-UDTextbox -Id "Username" -Label "Username" -Placeholder Username

} -OnSubmit {

$UserDetails = Get-DCUUserDetails -UserName $EventData.Username

New-UDRow {

    New-UDColumn -size 6 -content  {

        new-udTable -Data $UserDetails

     }

}

}

} -NavigationLayout permanent -Navigation $Navigation

#2

Hey @Darragh, please try to put your code using the preformatted text button in the editor.
That way, we’ll see it properly and it won’t mess up all the quotes from your sample.

From what I saw quickly, this would be more like it:

$Navigation = @(
    New-UDListItem -Label "Home"
    New-UDListItem -Label "Active directory" -Children {
        New-UDListItem -Label "Check user" -OnClick {Invoke-UDRedirect -Url './check-user'}
        New-UDListItem -Label "Reset password" -OnClick { Invoke-UDRedirect -Url './reset-password' }
        New-UDListItem -Label "Get last login" -OnClick { Invoke-UDRedirect -Url './reset-password' }
        New-UDListItem -Label "User numbers" -OnClick {}
    }
)

$Pages = @()
$Pages += New-UDPage -Name 'Check user' -Url "check-user" -Content {
    New-UDTypography -Text "Hello"
} -NavigationLayout permanent -Navigation $Navigation

$Pages += New-UDPage -Name 'reset password' -Url "reset-password" -Content {
    New-UDTypography -Text "Hello"
} -NavigationLayout permanent -Navigation $Navigation

New-UDDashboard -Pages $Pages -Title "DCU Active Directory";

Tip:
Yo can try your code out in VSCode / your IDE to see what parameter set works and the ones that do not work. All you have to do is to import the psd1, which for the latest version, if installed with the MSI, is at : import-module 'C:\ProgramData\PowerShellUniversal\Dashboard\Frameworks\UniversalDashboard\3.1.2\UniversalDashboard.psd1'

I had some error about endpoint not registering testing that way but at least, this told me immediately some of your parameter used in New-UDDashboard were not good.

Lokks like you can’t use New-UDDashboard with both pages and content.
Thus, I removed the content part and also the NavigationLayout from the cmdlet.
(The example I provided work, but you’ll need to create a new page for what you had in the content of New-UDDashboard. )

Here’s what I had (and clicking on the link where Invoke-UDRedirect was set worked perfectly.)

image
image839×506 12.3 KB

1 Like
#3

Hi all,

Regarding the “New-UDPage…} -NavigationLayout permanent -LoadNavigation $Navigation”, is it possible to style/customise the app bar that is created?

As a test, within the $Navigation scriptblock I’ve added a New-UDAppBar with -Drawer $null which I can style (adding logo elements, UDChips, Typography etc) and set in a fixed position but this renders beneath the default appbar that is created with “-NavigationLayout permanent -LoadNavigation $Navigation”

Has anyone solved this, or know of a way to customise the default app bar?

EDIT: I worked out this way of achieving what I was after, it may be very hacky, completely wrong way to go about it, but it’s working for now :stuck_out_tongue:

In the $Navigation script block that is loaded for each page I set an Id of ‘CustomisedAppBar’

$Navigation = {
    New-UDAppBar -Id 'CustomisedAppBar' -DisableThemeToggle -Children {
...
...

On my New-UDDashboard I’ve added -Stylesheets @("/assets/style_changes.css"

New-UDDashboard -Title "Dashboard Nav Test" -Theme $Theme -Pages $Pages -Stylesheets @("/assets/style_changes.css")

In this css file I’ve hidden the header.MuiAppBar-root element.class and made visible only my New-UDAppBar with the Id of ‘CustomisedAppBar’

header.MuiAppBar-root {
	visibility: hidden !important;
}
#CustomisedAppBar {
    visibility: visible !important;
}

So yeah, probably a bit huckety - but it’s working.

Cheers,
Steve.

AppBar / Drawer, Show-UDToast icon