AppBar / Drawer, Show-UDToast icon

PowerShell Universal
1

Hi, I have a couple of different things to ask about, I don’t know if these should be different topics or not, if so, please let me know.

First, I am trying to add a permanent AppBar / Drawer to my dashboard.
I tried with using the Drawer, and -Navigation $Navigation -NavigationLayout permanent, which adds the bar like I want.
When I then tried to exclude different items in the bar based on $Roles, it doesn’t work, as $Roles seems to be populated first after New-UDPage has run.
I then switched to AppBar, which works with $Roles, but I can not make it permanent, without it creating a new header.
Is there some way to work with $Roles when using -Navigation $Navigation -NavigationLayout permanent, or is there some way to make the AppBar permanent?

Some example code:
Appbar:

function New-AppBar {
    param($Title)
    $Drawer = New-UDDrawer -Children {
        New-UDList -Children {
            New-UDListItem -Label "Home" -OnClick { Invoke-UDRedirect "/" }
            if ($Roles -eq "Reader") {
                New-UDListItem -Label "User" -OnClick { Invoke-UDRedirect "/User" }
            }
        }
    }
    New-UDAppBar -Position fixed -Children { 
        New-UDTypography -Text $Title -Variant h6
    } -Drawer $Drawer
}

New-UDPage -Name "Test" -Url "/User" -Role "Reader" -Content {
    New-AppBar -Title "User"
}

Drawer:

$Navigation = @(
    New-UDListItem -Label "Home" -OnClick { Invoke-UDRedirect "/" }
    if ($Roles -eq "Reader") {
        New-UDListItem -Label "User" -OnClick { Invoke-UDRedirect "/User" }
    }
)

New-UDPage -Name "Test" -Url "/User" -Role "Reader" -Navigation $Navigation -NavigationLayout permanent -Content {
}

Secondly I am wondering if “-Icon” is broken for Show-UDToast?
I can not make any icon visible, neither with just
Show-UDToast -Icon "ad"
nor
Show-UDToast -Icon (New-UDIcon -Icon "ad")

Product: PowerShell Universal
Version: 1.4.6
Dashboard Framework: 3.1.6
2

When I then tried to exclude different items in the bar based on $Roles , it doesn’t work, as $Roles seems to be populated first after New-UDPage has run.

We need to fix this. It shouldn’t work that way. I’ll take a look at what we can do there. The problem is we have to adjust the page to make a permanent bar so adding it using the New-AppBar method isn’t going to work.

Secondly I am wondering if “-Icon” is broken for Show-UDToast?

Unfortunately, this looks like a bug as well. I’ll get both of these added to our backlog to be resolved.

3

Ah, then I wasn’t crazy.
Thanks for your answer @adam!

1 Like
4

Hi @adam

Im starting my conversion to v3 and a little stuck here… It appears to customise the top nav bar you need to use New-AppBar command and add content in (images etc), this runs from inside the New-UdPage which causes issues as i cannot find a way to then fix the drawer (side nav) and stop it going to a hamburger. If i use the drawer inside the dashboard code, then at the end of New-UdPage add ‘-NavigationLayout permanent -Navigation $Navigation’ i have a fixed bar, but i cannot customise the Appbar anymore…

I tried playing with CSS, but adding z-index 9999 to the appbar inside the page, but i guess this doesnt work as the main appbar from the dashboard is also set to 9999.

  1. Is there a way to make the side nav permanent, but also allow the top bar to be customised with icons and images etc?
  2. Is there a way to use the New-UdDashboard -Stylesheets to do this? i cant seem to find any documentation on this -stylesheets parameter and what i do add to that is not working.

I did also try this thread: Pinning the App Bar , this did allow me to have a fixed bar with custom navbar, but the formatting is all over the place, even when using UdContainer.

Thanks.

5

Hi @neo this may or maynot be of use to you, but I did just release this:-


If you scroll near the bottom you will see a Navbar I created, this in theory should be able to hold anything in it. I hope this can be of some help?
1 Like
6

I also worked out the CSS stuff, so now i have a way to do this, actually fairly easily but @psDevUK your plugin is a huge enhancement on my current method, I honestly dont think your timing could be better here! I will certainly give that a go!

1 Like
7

Hi @neo glad to hear this component will come into use for you :slight_smile: if you adjust the -BottomBoundary parameter this should prevent it from being sticky, so will not scroll with the page. As I added a -Content parameter you should be able to basically stick anything inside this navbar. I just tested with my badgelink component as I wanted to emulate the newer UD3+ navbar with fanicier links and badges in it.
On my blog I just wanted to demo the proof of concept that this does work, I am still yet to implement this on my work dashboards…

8

Hi @neo - I’m trying to do the same thing, using the permanent navigation but customise the app bar (or add a new appbar over the top). Just wondering if you’d be happy to share the CSS you’ve used to accomplish this?

Cheers!
Steve.

9

Hey, yeah sure, i have a PS1 file i call for the header, then in that has the code:

New-UDAppBar -Id “ElementAppBar” -Position fixed -Children {

}

Dashboard start:
New-UDDashboard -Title ‘blah’ -Pages $Pages -Stylesheets “/StyleSheet.css”

Then in StyleSheet.css file i have:
#ElementAppBar {
z-index:9999;
height:95px;
background-color: white;
}

Hope this helps!

10

Hi all,

This was fixed for me in an updated a while ago.
Today I create a list of items for the navigation bar, and then use the -loadnavigation parameter with New-UDPage:

$NavigationBar = {
    New-UDListItem -Label "Home" -OnClick { Invoke-UDRedirect "/" }
    if ($Roles -eq "Reader") {
        New-UDListItem -Label "TestGroup" -Children {
            New-UDListItem -Label "Test" -OnClick { Invoke-UDRedirect "/Test }
        }
    }
}

New-UDPage -Name "Test) -Url “/Test” -Role “Reader” -NavigationLayout permanent -LoadNavigation $NavigationBar -Content {
#WebPage
}

This creates a permanent expanded navigation bar on the left side, which, for example, can show items based on $Roles.

11

Thanks @alexsmid and @neo - I worked out a similar solution, see: Menus and pages - #3 by pharnos

Basically what you did, @neo but I’ve hidden the appbar that -NavigationLayout / -LoadNavigation creates, and shown my custom appbar…

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;
}

Setting the z-index may be a better solution though! Thanks!

12

That is a lot cleaner than my version! seems there are many ways to skin this cat!

13

Hi all,

I’ve been trying to use the -LoadNavigation to make it dynamic but for some reason I’m getting the following error below. All I’m trying to accomplish here is to display current logged in user from session variable.

Startup: Cannot process argument transformation on parameter 'LoadNavigation'. Cannot convert the "System.Object[]" value of type "System.Object[]" to type "UniversalDashboard.Models.Endpoint". 
Jun 21, 2021 5:06 PM Startup: at <ScriptBlock>, C:\ProgramData\UniversalAutomation\Repository\NOC.ps1: line 34
at <ScriptBlock>, <No file>: line 1 
Jun 21, 2021 5:06 PM Startup:    at System.Management.Automation.ParameterBinderBase.BindParameter(CommandParameterInternal parameter, CompiledCommandParameter parameterMetadata, ParameterBindingFlags flags)
   at System.Management.Automation.CmdletParameterBinderController.BindParameter(CommandParameterInternal argument, MergedCompiledCommandParameter parameter, ParameterBindingFlags flags)
   at System.Management.Automation.CmdletParameterBinderController.BindParameter(UInt32 parameterSets, CommandParameterInternal argument, MergedCompiledCommandParameter parameter, ParameterBindingFlags flags)
   at System.Management.Automation.CmdletParameterBinderController.BindNamedParameter(UInt32 parameterSets, CommandParameterInternal argument, MergedCompiledCommandParameter parameter)
   at System.Management.Automation.ParameterBinderController.BindNamedParameters(UInt32 parameterSets, Collection`1 arguments)
   at System.Management.Automation.CmdletParameterBinderController.BindCommandLineParametersNoValidation(Collection`1 arguments)
   at System.Management.Automation.CmdletParameterBinderController.BindCommandLineParameters(Collection`1 arguments)
   at System.Management.Automation.CommandProcessor.BindCommandLineParameters()
   at System.Management.Automation.CommandProcessor.Prepare(IDictionary psDefaultParameterValues)
   at System.Management.Automation.CommandProcessorBase.DoPrepare(IDictionary psDefaultParameterValues)
   at System.Management.Automation.Internal.PipelineProcessor.Start(Boolean incomingStream)
   at System.Management.Automation.Internal.PipelineProcessor.SynchronousExecuteEnumerate(Object input)
--- End of stack trace from previous location ---
   at System.Management.Automation.Internal.PipelineProcessor.SynchronousExecuteEnumerate(Object input)
   at System.Management.Automation.PipelineOps.InvokePipeline(Object input, Boolean ignoreInput, CommandParameterInternal[][] pipeElements, CommandBaseAst[] pipeElementAsts, CommandRedirection[][] commandRedirections, FunctionContext funcContext)
   at System.Management.Automation.Interpreter.ActionCallInstruction`6.Run(InterpretedFrame frame)
   at System.Management.Automation.Interpreter.EnterTryCatchFinallyInstruction.Run(InterpretedFrame frame)
   at System.Management.Automation.Interpreter.EnterTryCatchFinallyInstruction.Run(InterpretedFrame frame)

This is my Dashboard snip

$PageFile = "C:\ProgramData\UniversalAutomation\Repository"

$NavList = @(
    if ([string]::IsNullOrEmpty($Session:currentuser)) {
        New-UDListItem -Label 'Hi Guest!' -Icon (New-UDIcon -Icon user -Size 2x)
    }
    else {
        New-UDListItem -Label "Hi $Session:currentuser!" -Children {
            New-UDListItem -Label "Log Out!" -OnClick {
                $Session:currentuser = $null
                $Session:upn = $null
                $Session:img = $null
                Show-UDToast -Message 'Logged out!'
                Invoke-UDRedirect http://localhost:5000/noc/login
            }
        }
    }
    
    New-UDListItem -Label "Office" -Children {
        New-UDListItem -Label "Live Dashboard" -OnClick {Invoke-UDRedirect -Url './live'}
        New-UDListItem -Label "Historical Dashboard" -OnClick {Invoke-UDRedirect -Url './history'}
    }
    New-UDListItem -Label "Cloud" -Children {
        New-UDListItem -Label "Live Dashboard" -OnClick {Invoke-UDRedirect -Url './cloud-live'}
        New-UDListItem -Label "Historical Dashboard" -OnClick {Invoke-UDRedirect -Url './cloud-history'}
    }
    New-UDListItem -Label "Cloud Performance" -OnClick {Invoke-UDRedirect -Url './cloud-perf'}
    New-UDListItem -Label "Web Deployer" -OnClick {Invoke-UDRedirect -Url './deployer'}
    New-UDListItem -Label "Login" -OnClick {Invoke-UDRedirect -Url './login'}
)

$Pages = @()
$Pages += New-UDPage -Name 'Live Dashboard' -Url "live" -Content {
    . "$PageFile\Office.ps1"
} -NavigationLayout permanent -LoadNavigation $NavList

New-UDDashboard -Title 'NOC Dash' -Pages $Pages -Theme (. "$($PageFile)\Styling\Theme.ps1")
14

Hi,

Can you try to change your $NavList array to a ScriptBlock instead?:

Change it to:

$NavList = {
    if ([string]::IsNullOrEmpty($Session:currentuser)) {
        New-UDListItem -Label 'Hi Guest!' -Icon (New-UDIcon -Icon user -Size 2x)
    }
    else {
        New-UDListItem -Label "Hi $Session:currentuser!" -Children {
            New-UDListItem -Label "Log Out!" -OnClick {
                $Session:currentuser = $null
                $Session:upn = $null
                $Session:img = $null
                Show-UDToast -Message 'Logged out!'
                Invoke-UDRedirect http://localhost:5000/noc/login
            }
        }
    }
    
    New-UDListItem -Label "Office" -Children {
        New-UDListItem -Label "Live Dashboard" -OnClick {Invoke-UDRedirect -Url './live'}
        New-UDListItem -Label "Historical Dashboard" -OnClick {Invoke-UDRedirect -Url './history'}
    }
    New-UDListItem -Label "Cloud" -Children {
        New-UDListItem -Label "Live Dashboard" -OnClick {Invoke-UDRedirect -Url './cloud-live'}
        New-UDListItem -Label "Historical Dashboard" -OnClick {Invoke-UDRedirect -Url './cloud-history'}
    }
    New-UDListItem -Label "Cloud Performance" -OnClick {Invoke-UDRedirect -Url './cloud-perf'}
    New-UDListItem -Label "Web Deployer" -OnClick {Invoke-UDRedirect -Url './deployer'}
    New-UDListItem -Label "Login" -OnClick {Invoke-UDRedirect -Url './login'}
}
15

Oh wow!! The simple little things is what always gets me lol :slight_smile:

Thanks so much @alexsmid !!