Pages
Information about Universal Dashboard pages.
A dashboard can consist of one or more pages. A page can have a particular name and URL. You can define a URL that accepts one or more variables in the URL to define a dynamic page.

Basic Page

A basic page can be defined using the New-UDPage cmdlet. You could navigate to this page by visiting the /dashboard URL of your dashboard.
1
$Pages = @()
2
$Pages += New-UDPage -Name 'Dashboard' -Content {
3
New-UDTypography -Text 'Dashboard'
4
}
5
6
New-UDDashboard -Title 'Pages' -Pages $Pages
Copied!

Dashboard with Multiple Pages

Dashboards can have multiple pages and those pages can be defined by passing an array of UDPages to New-UDDashboard
1
$Pages = @()
2
$Pages += New-UDPage -Name 'Dashboard One' -Content {
3
New-UDTypography -Text 'Dashboard Two'
4
}
5
6
$Pages += New-UDPage -Name 'Dashboard Two' -Content {
7
New-UDTypography -Text 'Dashboard Two'
8
}
9
10
New-UDDashboard -Title 'Pages' -Pages $Pages
Copied!
You may want to organize your dashboard into multiple PS1 files. You can do this using pages.
1
$UDScriptRoot = $PSScriptRoot
2
$Pages = @()
3
$Pages += New-UDPage -Name 'Dashboard One' -Content {
4
. "$UDScriptRoot\db1.ps1"
5
}
6
7
$Pages += New-UDPage -Name 'Dashboard Two' -Content {
8
. "$UDScriptRoot\db2.ps1"
9
}
10
11
New-UDDashboard -Title 'Pages' -Pages $Pages
Copied!

Page with a Custom URL

A page can have a custom URL by using the -Url parameter. You could navigate to this page by visiting the /db URL of your dashboard.
1
$Pages = @()
2
$Pages += New-UDPage -Name 'Dashboard' -Url '/db' -Content {
3
New-UDTypography -Text 'Dashboard'
4
}
5
6
New-UDDashboard -Title 'Pages' -Pages $Pages
Copied!

Page with Variables in URL

You can define a page with variables in the URL to create pages that adapt based on that URL.
1
$Pages = @()
2
$Pages += New-UDPage -Name 'Dashboard' -Url '/db/:user' -Content {
3
New-UDTypography -Text 'Dashboard for user: $User'
4
}
5
6
New-UDDashboard -Title 'Pages' -Pages $Pages
Copied!

Query string parameters

Query string parameters are passed to pages and other endpoints as variables.
For example, if you visited a page with the following query string parameter: http://localhost:5000/dashboard/Page1?test=123
You would then have access to a $Test variable that contained the value 123.

Role-Based Access

This feature requires a license.
You can prevent users from accessing pages based on their role by using the -Role parameter of pages. You can configure roles and role policies on the Security page.
1
$Pages = @()
2
$Pages += New-UDPage -Name 'Administrators' -Content {
3
New-UDTypography -Text 'Dashboard for user: $User'
4
} -Role 'Administrator'
5
6
$Pages += New-UDPage -Name 'Operators' -Content {
7
New-UDTypography -Text 'Dashboard for user: $User'
8
} -Role 'Operator'
9
10
New-UDDashboard -Title 'Pages' -Pages $Pages
Copied!

Navigation

You can customize the navigation of a page using the -Navigation and -NavigationLayout parameters. Navigation is defined using the List component. Navigation layouts are either permanent or temporary.

Custom Navigation

Custom navigation can be defined with a list. List items can include children to create drop down sections in the navigation.
1
$Navigation = @(
2
New-UDListItem -Label "Home"
3
New-UDListItem -Label "Getting Started" -Children {
4
New-UDListItem -Label "Installation" -OnClick { Invoke-UDRedirect '/installation' }
5
New-UDListItem -Label "Usage" -OnClick { Invoke-UDRedirect '/usage' }
6
New-UDListItem -Label "FAQs" -OnClick { Invoke-UDRedirect '/faqs' }
7
New-UDListItem -Label "System Requirements" -OnClick { Invoke-UDRedirect '/requirements' }
8
New-UDListItem -Label "Purchasing" -OnClick { Invoke-UDRedirect '/purchasing'}
9
}
10
)
11
12
$Pages = @()
13
$Pages += New-UDPage -Name 'Test' -Content {
14
New-UDTypography -Text "Hello"
15
} -NavigationLayout permanent -Navigation $Navigation
16
17
$Pages += New-UDPage -Name 'Test2' -Content {
18
New-UDTypography -Text "Hello"
19
} -NavigationLayout permanent -Navigation $Navigation
20
21
22
New-UDDashboard -Title "Hello, World!" -Pages $Pages
Copied!
Custom navigation

Dynamic Navigation

Dynamic navigation can be used to execute scripts during page load to determine which navigation components to show based on variables like the user, IP address or roles.
You can generate dynamic navigation by using the -LoadNavigation parameter. The value of the parameter should be a script block to execute when loading the navigation.
1
$Navigation = {
2
New-UDListItem -Label "Home - $(Get-Date)"
3
New-UDListItem -Label "Getting Started" -Children {
4
New-UDListItem -Label "Installation" -OnClick { Invoke-UDRedirect '/installation' }
5
New-UDListItem -Label "Usage" -OnClick { Invoke-UDRedirect '/usage' }
6
New-UDListItem -Label "FAQs" -OnClick { Invoke-UDRedirect '/faqs' }
7
New-UDListItem -Label "System Requirements" -OnClick { Invoke-UDRedirect '/requirements' }
8
New-UDListItem -Label "Purchasing" -OnClick { Invoke-UDRedirect '/purchasing'}
9
}
10
}
11
12
$Pages = @()
13
$Pages += New-UDPage -Name 'Test' -Content {
14
New-UDTypography -Text "Hello"
15
} -NavigationLayout permanent -LoadNavigation $Navigation
16
17
$Pages += New-UDPage -Name 'Test2' -Content {
18
New-UDTypography -Text "Hello"
19
} -NavigationLayout permanent -LoadNavigation $Navigation
20
21
22
New-UDDashboard -Title "Hello, World!" -Pages $Pages
Copied!

Layouts

The permanent layout creates a static navigation drawer on the left hand side of the page. It cannot be hidden by the user.
1
$Pages = @()
2
$Pages += New-UDPage -Name 'Test' -Content {
3
New-UDTypography -Text "Hello"
4
} -NavigationLayout permanent
5
6
$Pages += New-UDPage -Name 'Test2' -Content {
7
New-UDTypography -Text "Hello"
8
} -NavigationLayout permanent
9
10
11
New-UDDashboard -Title "Hello, World!" -Pages $Pages
Copied!
Permanent navigation drawer
The temporary layout creates a navigation drawer that can be opened using a hamburger menu found in the top left corner. This is the default setting.
1
$Pages = @()
2
$Pages += New-UDPage -Name 'Test' -Content {
3
New-UDTypography -Text "Hello"
4
} -NavigationLayout temporary
5
6
$Pages += New-UDPage -Name 'Test2' -Content {
7
New-UDTypography -Text "Hello"
8
} -NavigationLayout temporary
9
10
11
New-UDDashboard -Title "Hello, World!" -Pages $Pages
Copied!
Temporary navigation drawer

Logo

You can display a logo in the navigation bar by using the -Logo parameter.
First, setup a published folder to host your logo.
Published assets folder
Now, when creating your page, you can specify the path to the logo.
1
New-UDPage -Name 'Home' -Logo '/assets/favicon.png' -Content {
2
}
Copied!
The logo will display in the top left corner.
Logo
To customize the style of your logo, you can use a cascading style sheet and target the ud-logo element ID.

API

New-UDPage

Creates a new page. Pass the results to New-UDDashboard -Pages
Name
Type
Description
Required
Name
string
The name of the page.
true
Content
ScriptBlock
The content of the page.
true
Url
string
The URL for the page. Name is used if no URL is specified.
false
DefaultHomePage
Switch
The page is the default home page.
false
Title
string
The title to display at the top of the page
false
Blank
Switch
Creates a page that has no toolbar.
false
Id
string
The ID for the page. This needs to be unique.
false
OnLoading
ScriptBlock
Return a component to show when the page is loading
false
Role
string[]
Roles that have access to this page.
false
NavigationLayout
string
Whether to popup or pin navigation.
false
Navigation
Hashtable[]
A collection of UDListItems to display for navigation
false
Logo
string
The URL to a logo to display in the toolbar.
false
LoadNavigation
ScriptBlock
Dynamically load navigation when the user loads the page.
false
Last modified 4mo ago