Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Define static HTML using Universal Dashboard.
You can define static HTML using New-UDHtml. This cmdlet does not create React components but rather allows you to define static HTML. Any valid HTML string is supported.
The following creates an unordered list.
New-UDHtml -Markup "<ul><li>First</li><li>Second</li><li>Third</li></ul>"A Universal Dashboard website is composed of components. In addition to the core component, you can also extend Universal Dashboard with a large set of community created components.
There are two non-framework components that are built into PSU. These include the Nivo charts library as well as the UDMap component. Additional components can be downloaded from the UD Marketplace.
External components are distributed as PowerShell modules and can be used in a dashboard by using Import-Module.
When building a dashboard, you can simply call the PowerShell cmdlets within your dashboard script to create a new component.
You can add component modules by clicking the Components button on the Dashboard page and then adding the components. This list will also include components downloaded from the Marketplace.
Each version of PowerShell Universal includes some built in components. These components are included in the local installation directory. During start up, they are deployed to the assets folder. By default, this folder is %ProgramData%\PowerShellUniversal\Dashboard\Components .
You can change the assets folder by updating appsettings.json.
You can manually install components into the assets folder by including the appropriate folder structure and files. All components need to be valid PowerShell modules.
Each component should be in a folder with the module name and an additional folder with the version.
You can also include components within the code Repository. By including them in the repository, they will be downloaded when using . This functionality is only enabled when git sync is enabled.
After a git pull is performed on the remote repository, Components will be automatically loaded and available within the Components page within PowerShell Universal. The structure and layout of the components folder is the same as the main assets folder.
Error boundary component for Universal Dashboard.
The New-UDErrorBoundary component is used for isolating portions of a dashboard to contain components that may throw an error. Many Universal Dashboard components use the error boundary component internally.
If you'd like to isolate a portion of your dashboard to prevent the entire page from failing to load, you can use the following syntax.
New-UDErrorBoundary -Content {
throw "Oh no!"
}If any error is thrown from the content, you will see an error such as thing.
Build custom components.
Components in PowerShell Universal Dashboard are exposed as functions. You can combine built in components to produce your own custom components.
The below example creates a New-UDPeoplePicker component from existing UD components. You can use the New-UDPeoplePicker component in your dashboards. This function can either be defined within your dashboard directly or within a .
Chip component for Universal Dashboard.
Chips are compact elements that represent an input, attribute, or action.
Chips allow users to enter information, make selections, filter content, or trigger actions.
While included here as a standalone component, the most common use will be in some form of input, so some of the behavior demonstrated here is not shown in context.
New-UDDashboard -Title 'Dashboard' -Content {
New-UDTypography -Text 'Hello, world!'
}Input controls for Universal Dashboard
This example users a published folder of avatars.
top, bottom, left or right.Tooltip content can contain any UD element.
Tooltips can be over various types including: "dark", "success", "warning", "error", "info", "light"
New-UDTooltip -Content {
New-UDIcon -Icon 'User'
} -TooltipContent {
"User"
}New-UDTooltip -Content {
New-UDIcon -Icon 'User'
} -TooltipContent {
"User"
} -Place 'bottom'function Get-User {
1..100 | ForEach-Object {
[PSCustomObject]@{
UserName = "User$_"
First = "Bill"
Last = $_
Avatar = (Get-ChildItem "$Repository\Avatars" | Get-Random).Name
}
}
}
function New-UDPeoplePicker {
$Session:Users = [System.Collections.Generic.List[object]]::new()
New-UDAutocomplete -OnLoadOptions {
Get-User | Where-Object { $_.UserName -like "*$UserName*" } | Select-Object -First 5 -ExpandProperty 'UserName' | ConvertTo-Json
} -OnChange {
$Session:Users.Add((Get-User | Where-Object { $_.UserName -eq $EventData })) | Out-Null
Sync-UDElement -Id 'users'
}
New-UDDynamic -Id 'users' -Content {
New-UDList -Children {
$Session:Users | ForEach-Object {
New-UDListItem -Label $_.UserName -SubTitle "$($_.First) $($_.Last)" -AvatarType 'Avatar' -SecondaryAction {
$UserName = $_.UserName
New-UDIconButton -Icon (New-UDIcon -Icon 'Trash') -OnClick {
$RemoveUser = $Session:Users | Where-Object { $_.UserName -eq $UserName }
$Session:Users.Remove($RemoveUser)
Sync-UDElement -Id 'users'
}
} -Source "/avatars/$($_.Avatar)"
}
}
}
}
New-UDDashboard -Title 'PowerShell Universal' -Content {
New-UDPeoplePicker
}New-UDTooltip -Content {
New-UDIcon -Icon 'User'
} -TooltipContent {
New-UDPaper -Children {
"User"
}
}New-UDTooltip -Content {
New-UDIcon -Icon 'User'
} -TooltipContent {
"User"
} -Type 'success'You can define an action to take when an item is clicked by using the -OnClick parameter of New-UDListItem.
New-UDList -Content {
New-UDListItem -Label 'Inbox' -Icon (New-UDIcon -Icon envelope -Size 3x) -SubTitle 'New Stuff'
New-UDListItem -Label 'Drafts' -Icon (New-UDIcon -Icon edit -Size 3x) -SubTitle "Stuff I'm working on "
New-UDListItem -Label 'Trash' -Icon (New-UDIcon -Icon trash -Size 3x) -SubTitle 'Stuff I deleted'
New-UDListItem -Label 'Spam' -Icon (New-UDIcon -Icon bug -Size 3x) -SubTitle "Stuff I didn't want"
}Shows a toast when the chip is clicked.
New-UDChip -Label 'Basic'Dynamic tree views allow you to run PowerShell whenever a node is clicked. You can then return a list of nodes that should be rendered underneath the clicked node. You can also take other actions such as opening a modal or showing a toast.
Information about UDElements.
The New-UDElement cmdlet allows you to create custom React elements within your dashboard. Similar to New-UDHtml, you can define HTML elements using New-UDElement. Unlike, New-UDHtml, you can update elements, set auto refresh and take advantage of the React component system.
You need to specify the -Tag and -Content when creating an element. The below example creates a div tag.
You can nest components within each other to create HTML structures. For example, you could create an unordered list with the following example.
You can select attributes of an element (like HTML attributes) by using the -Attributes parameter. This parameter accepts a hashtable of attribute name and values. The below example creates red text.
You can wrap any component with New-UDElement and add an event handler.
You can define the -AutoRefresh, -RefreshInterval and -Endpoint parameters to create an element the refreshes on a certain interval. The below example creates an element that refreshes every second and displays the current time.
You can use the Set-UDElement cmdlet to set element properties and content dynamically. The following example sets the content of the element to the current time.
You can also set attributes by using the -Properties parameter of Set-UDElement. The following example sets the current time and changes the color to red.
You can add child elements using Add-UDElement. The following example adds child list items to an unordered list.
You can clear the child elements of an element by using Clear-UDElement. The following example clears all the list items from an unordered list.
You can force an element to reload using Sync-UDElement. The following example causes the div to reload with the current date.
You can remove an element by using Remove-UDElement.
****
Dynamic regions allow you control the reload of data within the region.
New-UDDynamic allows you to define a dynamic region. Pages themselves are dynamic in nature. This means that every time a page is loaded, it runs the PowerShell for that page. Sometimes, you may want to reload a section of a page rather than the whole page itself. This is when you will want to use dynamic regions.
This dynamic region reloads when the button is clicked.
An array of arguments may be passed to the dynamic region.
Dynamic regions enable the ability to auto refresh components after a certain amount of time. The entire region's script block will be run when autorefreshing.
Sometimes refreshing a dynamic component may take some time. For example, if you are querying another service's REST API or a data. Dynamic regions support configuration of the component that shows when the region is reloading. By default, nothing is shown. This can be any Universal Dashboard component.
Date and time component for Universal Dashboard.
The New-UDDateTime component is used for formatting dates and times within the client's browser. By using the client's browser, you can format the time based on the local time zone and locale settings for the user.
The date and time component uses DayJS. For a full list of custom formatting options, visit the DayJS documentation.
By default, the date and time will be formatted using the LLL localized formatting template.
Resulting output: August 16, 2018 8:02 PM
You can specify custom formatting strings using the .
Resulting output: 25/01/2019
You can specify the locale to display the date and time in.
Resulting output: 13 de septiembre de 2022 7:30
Typography component for Universal Dashboard
Use typography to present your design and content as clearly and efficiently as possible.
Too many type sizes and styles at once can spoil any layout. A typographic scale has a limited set of type sizes that work well together along with the layout grid.
@("h1", "h2", "h3", "h4", "h5", "h6", "subtitle1", "subtitle2", "body1", "body2",
"caption", "button", "overline", "srOnly", "inherit",
"display4", "display3", "display2", "display1", "headline", "title", "subheading") | ForEach-Object {
New-UDTypography -Variant $_ -Text $_ -GutterBottom
New-UDElement -Tag 'p' -Content {}
}You can use the -Style parameter to define colors for your text.
You can use styling by using the -Sx parameter of New-UDTypography. For example, to apply the secondary text color, you can use the following syntax.
New-UDList -Content {
New-UDListItem -Label 'Inbox' -Icon (New-UDIcon -Icon envelope -Size 3x) -SubTitle 'New Stuff'
New-UDListItem -Label 'Drafts' -Icon (New-UDIcon -Icon edit -Size 3x) -SubTitle "Stuff I'm working on "
New-UDListItem -Label 'Trash' -Icon (New-UDIcon -Icon trash -Size 3x) -SubTitle 'Stuff I deleted'
New-UDListItem -Label 'Spam' -Icon (New-UDIcon -Icon bug -Size 3x) -SubTitle "Stuff I didn't want" -OnClick {
Show-UDToast -Message 'Clicked'
}
}New-UDChip -Label 'Basic' -Icon (New-UDIcon -Icon 'user')New-UDChip -Label 'OnClick' -OnClick {
Show-UDToast -Message 'Hello!'
}New-UDChip -Label 'OnDelete' -OnClick {
Show-UDToast -Message 'Goodbye!'
}New-UDTreeView -Node {
New-UDTreeNode -Name 'Level 1' -Children {
New-UDTreeNode -Name 'Level 2 - Item 1'
New-UDTreeNode -Name 'Level 2 - Item 2'
New-UDTreeNode -Name 'Level 2 - Item 3' -Children {
New-UDTreeNode -Name 'Level 3'
}
}
}New-UDDashboard -Title 'File System' -Content {
Get-PSDrive -PSProvider 'FileSystem' | ForEach-Object {
New-UDTreeView -Node { New-UDTreeNode -Name $_.Name -Id "$($_.Name):\" } -OnNodeClicked {
Get-ChildItem $EventData.Id | ForEach-Object {
New-UDTreeNode -Name $_.Name -Id $_.FullName -Leaf:$(-not $_.PSIsContainer)
}
}
}
} "UniversalDashboard": {
"AssetsFolder": "%ProgramData%\\PowerShellUniversal\\Dashboard",
},New-UDDashboard -Title "Hello, World!" -Content {
New-UDDynamic -Id 'date' -Content {
New-UDTypography -Text "$(Get-Date)"
}
New-UDButton -Text 'Reload Date' -OnClick { Sync-UDElement -Id 'date' }
}****Select-UDElement
Protect sections based on roles.
The Protect-UDSection cmdlet hides it's content if a user does not have the specified roles.
Protect-UDSection -Role @("Administrator") -Content {
New-UDTypography -Text 'Only Administrators see this'
}New-UDElement -Tag 'div' -Content { 'Hello' }New-UDElement -Tag 'ul' -Content {
New-UDElement -Tag 'li' -Content { 'First' }
New-UDElement -Tag 'li' -Content { 'Second' }
New-UDElement -Tag 'li' -Content { 'Third' }
}New-UDElement -Tag 'div' -Content { 'Hello' } -Attributes @{
style = @{
color = 'red'
}
}New-UDElement -Tag div -Content {
New-UDIcon -Icon "user"
} -Attributes @{
onClick = {
Show-UDToast "Nice!"
}
}New-UDElement -Tag 'div' -Endpoint {
Get-Date
} -AutoRefresh -RefreshInterval 1New-UDElement -Tag 'div' -Id 'myElement' -Content { }
New-UDButton -Text 'Click Me' -OnClick {
Set-UDElement -Id 'myElement' -Content { Get-Date }
} New-UDElement -Tag 'div' -Id 'myElement' -Content { }
New-UDButton -Text 'Click Me' -OnClick {
Set-UDElement -Id 'myElement' -Content { Get-Date } -Properties @{ Attributes = @{ style = @{ color = "red" } } }
}New-UDElement -Tag 'ul' -Content {
} -Id 'myList'
New-UDButton -Text 'Click Me' -OnClick {
Add-UDElement -ParentId 'myList' -Content {
New-UDElement -Tag 'li' -Content { Get-Date }
}
}New-UDElement -Tag 'ul' -Content {
New-UDElement -Tag 'li' -Content { 'First' }
New-UDElement -Tag 'li' -Content { 'Second' }
New-UDElement -Tag 'li' -Content { 'Third' }
} -Id 'myList'
New-UDButton -Text 'Click Me' -OnClick {
Clear-UDElement -Id 'myList'
}New-UDElement -Tag 'div' -Endpoint {
Get-Date
} -Id 'myDiv'
New-UDButton -Text 'Click Me' -OnClick {
Sync-UDElement -Id 'myDiv'
}New-UDElement -Tag 'div' -Endpoint {
Get-Date
} -Id 'myDiv'
New-UDButton -Text 'Click Me' -OnClick {
Remove-UDElement -Id 'myDiv'
}New-UDBadge -BadgeContent { 4 } -Children {
New-UDIcon -Icon Envelope -Size 2x
} -Color secondary
New-UDBadge -BadgeContent { 4 } -Children {
New-UDIcon -Icon Envelope -Size 2x
} -Color successNew-UDDateTime -InputObject (Get-Date)New-UDDateTime -InputObject (Get-Date) -Format 'DD/MM/YYYY'New-UDDateTime -InputObject (Get-Date) -Locale 'es'Alerts can contain any component and also a title.
New-UDAlert -Severity 'error' -Text 'This is an error alert — check it out!'
New-UDAlert -Severity 'warning' -Text 'This is an warning alert — check it out!'
New-UDAlert -Severity 'info' -Text 'This is an error info — check it out!'
New-UDAlert -Severity 'success' -Text 'This is an success alert — check it out!'
New-UDTypography -Text 'My Text' -Style @{ color = 'blue' }
Floating action button component for Universal Dashboard
A floating action button (FAB) performs the primary, or most common, action on a screen.
A floating action button appears in front of all screen content, typically as a circular shape with an icon in its center. FABs come in two types: regular, and extended.
Only use a FAB if it is the most suitable way to present a screen’s primary action.
Only one floating action button is recommended per screen to represent the most common action.
Backdrop component for Universal Dashboard.
The backdrop component places an overlay over the drop of the entire page. It's useful for displaying loading states.
To create a basic backdrop, you can use the New-UDBackdrop cmdlet and include content to show within the backdrop. The content will be centered on the page. To show the backdrop, use the -Open switch parameter.
A skeleton component for PowerShell Universal Dashboard.
Quickly and responsively toggle the visibility value of components and more with the hidden utilities.
Hidden works with a range of breakpoints e.g. xsUp or mdDown, or one or more breakpoints e.g. -Only 'sm' or -Only @('md', 'xl'). Ranges and individual breakpoints can be used simultaneously to achieve very customized behavior. The ranges are inclusive of the specified breakpoints.
Date Picker component for Universal Dashboard
New-UDAlert -Severity 'error' -Content { New-UDHtml 'This is an error alert — <strong>check it out!</strong>' } -Title "Error"
New-UDAlert -Severity 'warning' -Content { New-UDHtml 'This is an warning alert — <strong>check it out!</strong>' } -Title "Warning"
New-UDAlert -Severity 'info' -Content { New-UDHtml 'This is an error info — <strong>check it out!</strong>' } -Title "Info"
New-UDAlert -Severity 'success' -Content { New-UDHtml 'This is an success alert — <strong>check it out!</strong>' } -Title "Success"New-UDDynamic -Id 'dynamic_01' -Content {
New-UDTypography -Text "This is an $($ArgumentList[0])
an $($ArgumentList[1]) in a UDDynamic"
} -ArgumentList @('example of', 'arguments list') New-UDDynamic -Id 'date' -Content {
New-UDTypography -Text "$(Get-Date)" -Variant h3
New-UDTypography -Text "$(Get-Random)" -Variant h3
} -AutoRefresh -AutoRefreshInterval 1 New-UDDynamic -Content {
Start-Sleep -Seconds 3
New-UDTypography -Text "Done!"
} -LoadingComponent {
New-UDProgress -Circular
}New-UDTypography -Text 'Secondar' -Sx @{
color = 'text.secondary'
}
Change the size of the image using the -Width and -Height parameters.
Apply additional attributes to the image.
Using any breakpoint -Up parameter, the given children will be hidden at or above the breakpoint.
Using any breakpoint -Down parameter, the given children will be hidden at or below the breakpoint.
Using the breakpoint -Only parameter, the given children will be hidden at the specified breakpoint(s).
The -Only parameter can be used in two ways:
list a single breakpoint
list an array of breakpoints
New-UDImage -Url "https://ironmansoftware.com/img/ps-logo.png"New-UDImage -Path C:\users\adamr\Desktop\ps-logo.pngNew-UDImage -Url "https://ironmansoftware.com/img/ps-logo.png" -Width 250 -Height 250New-UDImage -Url "https://ironmansoftware.com/img/ps-logo.png" -Attributes @{
alt = "Ironman Software Logo"
}innerWidth |xs sm md lg xl
|--------|--------|--------|--------|-------->
width | xs | sm | md | lg | xl
smUp | show | hide
mdDown | hide | showNew-UDHidden -Up xl -Content {
New-UDTypography 'xl'
}New-UDHidden -Down xs -Content {
New-UDTypography 'xs'
}New-UDHidden -Only 'sm' -Content {
New-UDTypography 'sm'
}
New-UDHidden -Only @('sm', 'xl') -Content {
New-UDTypography 'sm,xl'
}New-UDTimeline
New-UDTimelineItem
The backdrop provides an -OnClick handler that you can use to close the backdrop when clicked. You can use Set-UDElement to open and close the backdrop.
New-UDBackdrop -Content {
New-UDTypography -Text "Loading..." -Variant h2
} -OpenNew-UDProgress -Circular -Color BlueSkeletons will use the pulsate animation by default. You can also disable animation or use a wave animation.
New-UDSkeleton
New-UDSkeleton -Variant circle -Width 40 -Height 40
New-UDSkeleton -Variant rect -Width 210 -Height 118New-UDSkeleton
New-UDSkeleton -Animation disabled
New-UDSkeleton -Animation waveOutlined buttons are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.
You can control the pixel size of a button based on pixel size by using the Style parameter
Sometimes you might want to have icons for certain button to enhance the UX of the application as we recognize logos more easily than plain text. For example, if you have a delete button you can label it with a dustbin icon.
You can specify a script block to execute when the button is clicked
Loading buttons will display a loading icon while an event handler is running. This is useful for longer running events.
Create checkboxes that use any icon and style.
Create checkboxes that fire script blocks when changed.
You can adjust where the label for the checkbox is placed.
You can use Get-UDElement to get the value of the checkbox. Get-UDElement will also return other properties of the checkbox component.
The following example shows a toast message with the value of the checkbox.
New-UDDrawer -Variant 'permanent' -Content {
New-UDList -Children {
New-UDListItem -Label "Home"
New-UDListItem -Label "Getting Started" -Children {
New-UDListItem -Label "Installation" -OnClick {}
New-UDListItem -Label "Usage" -OnClick {}
New-UDListItem -Label "FAQs" -OnClick {}
New-UDListItem -Label "System Requirements" -OnClick {}
New-UDListItem -Label "Purchasing" -OnClick {}
}
}
}Change the maximum rating.
Change the precision for ratings.
Change the size of the rating icons.
Specify the locale of the time picker.
You can use the -DisableAmPm parameter to use 24-hour time.
New-UDTimePickerNew-UDTimePicker -Locale frYou can customize how the date picker is shown. The default is the inline variant that displays the date picker popup inline with the input control. You can also use the dialog variant that pops the date picker up in the middle of the screen. Finally, the static variant displays the date picker without having to click anything.
To set the locate of the date picker, specify the -Locale parameter.
By default, the user can select any date. To specify minimum and maximum dates, using the -Minimum and -Maximum parameters.
You can employ the -Design parameter to configure the layout of yourr page. This allows dynamic drag and drop of components that you place within the content of the grid layout. As you drag and resize components, the layout will be copied to your clipboard. Note: All components must possess a statid -Id
Once you have configured the layout to fit your needs, you can paste the JSON into your script and assign it with the -Layout parameter. Remove the -Design parameter to lock elements in place.
You can allow your users to dynamically modify layouts by using the -Draggable, -Resizable and -Persist parameters. The layout changes are stored locally so the next time each user visits a page, it will be loaded with their chosen layout.
New-UDGridLayout -Content { 1..10 | ForEach-Object { New-UDPaper -Id "Paper$" -Content { New-UDTypography -Text $ } -Elevation 5 } } -DesignNew-UDGridLayout -Content { 1..10 | ForEach-Object { New-UDPaper -Id "Paper$" -Content { New-UDTypography -Text $ } -Elevation 5 } } -Draggable -Resizable -PersistNew-UDFloatingActionButton -Icon (New-UDIcon -Icon user) -Size Small
New-UDFloatingActionButton -Icon (New-UDIcon -Icon user) -Size Medium
New-UDFloatingActionButton -Icon (New-UDIcon -Icon user) -Size LargeNew-UDFloatingActionButton -Icon (New-UDIcon -Icon user) -OnClick {
Show-UDToast -Message "Hello!"
}Icon component for Universal Dashboard
FontAwesome icons to include in your dashboard. Icon names are slightly different than those shown on the FontAwesome website. For example, if you want to use the network-wired icon, you would use the following string.
We include FontAwesome v6 with PowerShell Universal. You can use Find-UDIcon to search through the list of included icons.
The UniversalDashboard.FontAwesomeIcons enum should not be used and is only included for backwards compatibility. Many of the icons are no longer a part of FontAwesome 6.
Create icons by specifying their names. You can use the icon reference below to find icons.
Set the size of the icon. Valid values are: xs, sm, lg, 2x, 3x, 4x, 5x, 6x, 7x, 8x, 9x, 10x
Rotate icons. The value represents the degrees of rotation.
Add a border to your icon.
Apply CSS styles to your icon.
You can use custom icon sets available on the page. First, install the module and then use the icon with other components.
Within your dashboard, call the icon cmdlet.
Autocomplete component for Universal Dashboard
The autocomplete is a normal text input enhanced by a panel of suggested options.
Creates a basic autocomplete with a static list of options
When text is typed, it can be filtered with OnLoadOptions. $Body will contain the current text that is typed.
This example filters the array with Where-Object.
$Body contains the currently selected item. The OnChange event will fire when the user selects one or more items.
You can place an icon before an autocomplete by using the -Icon parameter.
OnEnter is triggered when the user presses the enter key within the autocomplete.
You can use New-UDAutoCompleteOption to specify name and values.
Code editor component for Universal Dashboard.
The code editor component allows you to host the Microsoft Monaco editor within your dashboards.
You can create a new code editor with the New-UDCodeEditor cmdlet. Specifying the -Language parameter will enable syntax highlighting for that language. You will need to specify a height in pixels.
Use the -Code parameter to specify code that will be populated within the code editor when it loads.
You can retrieve code from another component using the Get-UDElement cmdlet and accessing the code property of the hashtable that is returned.
You can set code from another component using the Set-UDElement cmdlet. Specify the code value in a hashtable passed to the -Properties parameter.
The documentation is for an upcoming feature of PowerShell Universal .
The Monaco editor supports a wide range of options. If you wish to use options that aren't available on the New-UDCodeEditor cmdlet, you can use the -Options parameter and pass a hashtable of options instead.
For a full list of options, check the interface.
Tab component for Universal Dashboard
Tabs make it easy to explore and switch between different views.
Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
Dynamic tabs will refresh their content when they are selected. You will need to include the -RenderOnActive parameter to prevent all the tabs from rendering even if they are not shown.
Switch component for Universal Dashboard
Switches toggle the state of a single setting on or off.
Switches are the preferred way to adjust settings on mobile. The option that the switch controls, as well as the state it’s in, should be made clear from the corresponding inline label.
Create a basic switch.
New-UDSwitch -Checked $true
New-UDSwitch -Checked $true -DisabledRespond to when a switch value is changed. The $EventData variable will include whether or not the switch was checked or unchecked.
You can retrieve the value of the switch within another component by using Get-UDElement. Use the Checked property to determine whether the switch is checked out not.
A transfer list (or "shuttle") enables the user to move one or more list items between lists.
Create a simple transfer list.
New-UDTransferList -Item {
New-UDTransferListItem -Name 'test1' -Value 1
New-UDTransferListItem -Name 'test2' -Value 2
New-UDTransferListItem -Name 'test3' -Value 3
New-UDTransferListItem -Name 'test4' -Value 4
New-UDTransferListItem -Name 'test5' -Value 5
} Use the OnChange event handler to get the value of the selected items.
Transfer lists can be used within forms and steppers.
Slider component for Universal Dashboard.
Sliders allow users to make selections from a range of values.
Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.
Link component for Universal Dashboard.
Create a hyper link in a dashboard.
Create a basic link that goes to a web page.
New-UDLink -Text 'Ironman Software' -Url https://www.ironmansoftware.comAdjust the underline and text style.
Open the link a new window when clicked.
Execute a PowerShell script block when the link is clicked.
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.
Within the dashboard editor, expand the Pages navigation menu and click New Page.
You can edit a page by clicking the link in the menu. The code editor will switch to the page's content.
A text editor component for Universal Dashboard.
The editor component is based on . It's a block editor that accepts text, links, lists, code and images.
When working with the editor, you can receive data about the current document via the OnChange parameter. By default, data is returned in the Editor.js .
To create a basic editor, use the New-UDEditor cmdlet.
Component for uploading files in Universal Dashboard.
The UDUpload component is used to upload files to Universal Dashboard. You can process files the user uploads. You will receive the data for the file, a file name and the type of file if it can be determined by the web browser.
This component works with and .
Uploads a file and shows the contents via a toast.
The body of the OnUpload
Paper component for Universal Dashboard
New-UDTimeline -Children {
New-UDTimelineItem -Content {
'Breakfast'
} -OppositeContent {
'7:45 AM'
}
New-UDTimelineItem -Content {
'Welcome Message'
} -OppositeContent {
'9:00 AM'
}
New-UDTimelineItem -Content {
'State of the Shell'
} -OppositeContent {
'9:30 AM'
}
New-UDTimelineItem -Content {
'General Session'
} -OppositeContent {
'11:00 AM'
}
}New-UDTimeline -Children {
New-UDTimelineItem -Content {
'Breakfast'
} -OppositeContent {
'7:45 AM'
}
New-UDTimelineItem -Content {
'Welcome Message'
} -OppositeContent {
'9:00 AM'
}
New-UDTimelineItem -Content {
'State of the Shell'
} -OppositeContent {
'9:30 AM'
}
New-UDTimelineItem -Content {
'General Session'
} -OppositeContent {
'11:00 AM'
}
} -Position alternateNew-UDDashboard -Title 'PowerShell Universal' -Content {
New-UDTimeline -Children {
New-UDTimelineItem -Content {
'Breakfast'
} -OppositeContent {
'7:45 AM'
} -Color 'error'
New-UDTimelineItem -Content {
'Welcome Message'
} -OppositeContent {
'9:00 AM'
} -Color 'info'
New-UDTimelineItem -Content {
'State of the Shell'
} -OppositeContent {
'9:30 AM'
} -Color 'success'
New-UDTimelineItem -Content {
'General Session'
} -OppositeContent {
'11:00 AM'
} -Color 'grey'
} -Position alternate
}New-UDTimeline -Children {
New-UDTimelineItem -Content {
'Breakfast'
} -OppositeContent {
'7:45 AM'
} -Icon (New-UDIcon -Icon Microsoft)
New-UDTimelineItem -Content {
'Welcome Message'
} -OppositeContent {
'9:00 AM'
} -Icon (New-UDIcon -Icon Apple)
New-UDTimelineItem -Content {
'State of the Shell'
} -OppositeContent {
'9:30 AM'
} -Icon (New-UDIcon -Icon NetworkWired)
New-UDTimelineItem -Content {
'General Session'
} -OppositeContent {
'11:00 AM'
} -Icon (New-UDIcon -Icon User)
} -Position alternateNew-UDBackdrop -Id 'backdrop' -Content {
New-UDTypography -Text "Loading..." -Variant h2
} -Open -OnClick {
Set-UDElement -Id 'backdrop' -Properties @{
open = $false
}
}New-UDProgressNew-UDProgress -PercentComplete 75 New-UDButton -Variant 'contained' -Text 'Default'New-UDButton -Variant 'outlined' -Text 'Default'New-UDButton -Id "Submit" -Text "Submit" -Style @{ Width = "150px"; Height = "100px" }New-UDButton -Icon (New-UDIcon -Icon trash) -Text 'Delete'New-UDButton -Text 'Message Box' -OnClick {
Show-UDToast -Message 'Hello, world!'
}New-UDButton -Text 'Message Box' -OnClick {
Show-UDToast -Message 'Hello, world!'
Start-Sleep 10
} -ShowLoadingNew-UDCheckBox
New-UDCheckBox -Disabled
New-UDCheckBox -Checked $true
New-UDCheckBox -Checked $true -Disabled$Icon = New-UDIcon -Icon angry -Size lg -Regular
$CheckedIcon = New-UDIcon -Icon angry -Size lg
New-UDCheckBox -Icon $Icon -CheckedIcon $CheckedIcon -Style @{color = '#2196f3'}New-UDCheckBox -OnChange {
Show-UDToast -Title 'Checkbox' -Message $Body
}New-UDCheckBox -Label 'Demo' -LabelPlacement start
New-UDCheckBox -Label 'Demo' -LabelPlacement top
New-UDCheckBox -Label 'Demo' -LabelPlacement bottom
New-UDCheckBox -Label 'Demo' -LabelPlacement endNew-UDCheckbox -Id 'MyCheckbox'
New-UDButton -Text 'Get Value' -OnClick {
Show-UDToast -Message (Get-UDElement -Id 'MyCheckbox').checked
}New-UDRating New-UDRating -OnChange {
Show-UDToast $EventData
}New-UDRating -Max 10New-UDRating -Precision .5New-UDRating -Size largeNew-UDTimePicker -DisableAmPmNew-UDDatePickerNew-UDDatePicker -OnChange {
Show-UDToast -Message $body
}New-UDDatePicker -Variant staticNew-UDDatePicker -Locale frNew-UDDatePicker -Minimum ((Get-Date).AddDays(-15)) -Maximum ((Get-Date).AddDays(15))$Layout = '{"lg":[{"w":7,"h":7,"x":5,"y":0,"i":"grid-element-Paper1","moved":false,"static":false},{"w":7,"h":5,"x":5,"y":7,"i":"grid-element-Paper2","moved":false,"static":false},{"w":1,"h":1,"x":0,"y":0,"i":"grid-element-Paper3","moved":false,"static":false},{"w":1,"h":1,"x":0,"y":1,"i":"grid-element-Paper4","moved":false,"static":false},{"w":1,"h":1,"x":0,"y":2,"i":"grid-element-Paper5","moved":false,"static":false},{"w":1,"h":1,"x":0,"y":3,"i":"grid-element-Paper6","moved":false,"static":false},{"w":1,"h":1,"x":0,"y":4,"i":"grid-element-Paper7","moved":false,"static":false},{"w":1,"h":1,"x":0,"y":5,"i":"grid-element-Paper8","moved":false,"static":false},{"w":1,"h":1,"x":0,"y":6,"i":"grid-element-Paper9","moved":false,"static":false},{"w":1,"h":1,"x":0,"y":7,"i":"grid-element-Paper10","moved":false,"static":false}]}'
New-UDGridLayout -Content { 1..10 | ForEach-Object { New-UDPaper -Id "Paper$" -Content { New-UDTypography -Text $ } -Elevation 5 } } -Layout $LayoutNew-UDIcon -Icon 'NetworkWired'Find-UDIcon UserNew-UDAutocomplete -Options @('Test', 'Test2', 'Test3', 'Test4')New-UDCodeEditor -Height '500' -Language 'powershell'New-UDTabs -Tabs {
New-UDTab -Text 'Item One' -Content { New-UDTypography -Text 'Item One' -Variant 'h2' }
New-UDTab -Text 'Item Two' -Content { New-UDTypography -Text 'Item Two' -Variant 'h2' }
New-UDTab -Text 'Item Three' -Content { New-UDTypography -Text 'Item Three' -Variant 'h2' }
}New-UDSlider -Value 1
New-UDLink -Text 'Ironman Software' -Url https://www.ironmansoftware.com -Variant h2 -Underline alwaysThe $EventData is an object with the following structure.
Uploads a file as part of a UDForm.
The body of the OnSubmit script block is the same one you will see with any form and the file will be contains as one of the fields within the form.
This example allows a user to upload a file. Once the file is uploaded, it will be saved to the temporary directory.
New-UDAutocomplete -OnLoadOptions {
@('Test', 'Test2', 'Test3', 'Test4') | Where-Object { $_ -like "*$Body*" } | ConvertTo-Json
}New-UDAutocomplete -OnLoadOptions {
@('Test', 'Test2', 'Test3', 'Test4') | Where-Object { $_ -like "*$Body*" } | ConvertTo-Json
} -OnChange {
Show-UDToast $Body
}New-UDAutocomplete -Options @("Test", "No", "Yes") -Icon (New-UDIcon -Icon 'Users') New-UDAutocomplete -Options @("Test", "No", "Yes") -onEnter {
Show-UDToast ((Get-UDElement -Id 'ac').value)
} -Id 'ac'New-UDAutocomplete -Options @(
New-UDAutoCompleteOption -Name 'Adam D' -Value '1'
New-UDAutoCompleteOption -Name 'Sarah F' -Value '2'
New-UDAutoCompleteOption -Name 'Tom S' -Value '3'
)New-UDLink -Text 'Ironman Software' -Url https://www.ironmansoftware.com -OpenInNewWindowNew-UDLink -Text 'Ironman Software' -OnClick {
Show-UDToast "Hello!"
}New-UDUpload -OnUpload {
Show-UDToast $Body
} -Text 'Upload'{
data: "base64 encoded string of data",
name: "file name of the file uploaded",
type: "file type as determined by the browser"
}public class Upload
{
public string Name { get; set; }
public string FileName { get; set; }
public DateTime TimeStamp { get; set; }
public string ContentType { get; set; }
public string Type => ContentType;
}New-UDForm -Content {
New-UDUpload -Id 'myFile' -Text 'Upload File'
} -OnSubmit {
Show-UDToast $Body
}New-UDUpload -Text 'Upload Image' -OnUpload {
$Data = $Body | ConvertFrom-Json
$bytes = [System.Convert]::FromBase64String($Data.Data)
[System.IO.File]::WriteAllBytes("$env:temp\$($Data.Name)", $bytes)
}Get-UDPage. 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.
Dashboards can have multiple pages and those pages can be defined by passing an array of UDPages to New-UDDashboard
You may want to organize your dashboard into multiple PS1 files. You can do this using pages.
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.
You can define a page with variables in the URL to create pages that adapt based on that URL.
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.
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.
The following options are available for customizing the header.
Use the -HeaderPosition parameter to adjust the behavior of the header.
absolute\fixed - Remains at the top of the page, even when scrolling
relative - Remains at the top of the page. Not visible when scrolling.
You can adjust the colors of the header by specifying the -HeaderColor and -HeaderBackgroundColor parameters. These colors will override the theme colors.
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 can be defined with a list. List items can include children to create drop down sections in the 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.
The permanent layout creates a static navigation drawer on the left hand side of the page. It cannot be hidden by the user.
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.
You can use New-UDAppBar with a blank page to create horizontal navigation.
You can display a logo in the navigation bar by using the -Logo parameter.
First, setup a published folder to host your logo.
Now, when creating your page, you can specify the path to the logo.
The logo will display in the top left corner.
To customize the style of your logo, you can use a cascading style sheet and target the ud-logo element ID.
You can define custom content to include in the header by using the -HeaderContent parameter.
Page titles are static by default, but you can override this behavior by using -LoadTitle. It will be called when the page is loaded. This is useful when defining pages in multilingual dashboards.
Static pages allow for better performance by not executing PowerShell to load the content of the page. This can be useful when displaying data that does not require dynamic PowerShell execution. The page content is constructed when the dashboard is started.
Static pages do not have access to user specific data. This includes variables such as:
$Headers
$User
$Roles
You can still include dynamic regions within pages. These dynamic regions will have access to user data. Reloading the below example will update the date and time listed in the page.
Full width modals take up the full width as defined by the -MaxWidth parameter.
Persistent modals do not close when you click off of them. You will have to close it with Hide-UDModal.
You can use the Hide-UDModal button to hide a modal that is currently show.
You can style modules using the -Style, -HeaderStyle, -ContentStyle and -FooterStyle parameters. Style is applied to the entire modal itself and the individual section styles are only applied to those sections. The value for these parameters are hashtables of CSS values.
If you define a script block for the -OnChange event handler. The $EventData variable will contain the current status of the editor. By default, this returns the Editor.JS JSON block format.
You can also use the HTML render plugin by specifying the -Format parameter.
To specify the default data for the editor, use the -Data parameter. You need to specify the JSON block format.
In order to support images, you will need to provide a published folder in which to upload the images. Once a published folder is defined, images can be uploaded directly in the editor. They will be placed within the directory and then served through the request path.
Id
string
The ID of this component.
Data
Hashtable
The Editor.JS data for this component
OnChange
New-UDExpansionPanelGroup -Children {
New-UDExpansionPanel -Title "Hello" -Children {}
New-UDExpansionPanel -Title "Hello" -Id 'expContent' -Children {
New-UDElement -Tag 'div' -Content { "Hello" }
}
}To create an app bar that is pinned to the bottom of the page, you can use the -Footer parameter.
A fixed AppBar will show even when the screen is scrolled. It will remain stuck to the top. This example creates an AppBar that is fixed with a div that is 10000 pixels high.
New-UDAppBar -Children { "Hello" } -FooterVertically stacked items.
New-UDStack
By default, paper will have rounded edges. You can reduce the rounding by using a square paper.
The -Style parameter can be used to color paper. Any valid CSS can be included in the hashtable for a style.
The following example creates paper with a red background.
New-UDPaper -Elevation 0 -Content {}
New-UDPaper -Elevation 1 -Content {}
New-UDPaper -Elevation 3 -Content {}New-UDSwitch -OnChange { Show-UDToast -Message $EventData }
Transition component for Universal Dashboard.
Transitions allow you to transition components in and out of view within your dashboard using various animations. You can take advantage of interactive cmdlets like Set-UDElement to change the transition state and cause an element to move in.
In the following example, we have a card that transitions in via a Fade. Clicking the switch the toggle the card in and out.
The resulting effect looks like this.
The collapse transition will collapse a section in and out. You can specify a collapse height to only collapse a portion of the section.
A fade transition fades a component in and out as seen in the previous example. You can configure the timeout value to specify the number of seconds it takes to complete the transition.
The slide transition moves a component into position. You can determine the position of the slide by specifying the -SlideDirection parameter.
The grow transition will fade and grow a component into place.
The zoom transition will zoom a component into place.
Radio component for Universal Dashboard
Radio buttons allow the user to select one option from a set.
Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.
Radio buttons should have the most commonly used option selected by default.
An event handler that is called when the radio group is changed. the $Body variable will contain the current value.
Set the default value of the radio group.
You can use custom formatting within the radio group. The below example will place the radio buttons next to each other instead of on top of each other.
New-UDMenu component for Universal Dashboard.
The menu component can be used to provide a drop down list of options for the user to select.
Create a basic menu.
You can edit the style of the menu by adjusting the variant parameter.
You can use the value parameter to define a value that differs from the text displayed.
Use the -OnChange parameter to specify a script block to call when a new value is selected. The value of the selected item will be available in $EventData.
$Pages = @()
$Pages += New-UDPage -Name 'Dashboard' -Content {
New-UDTypography -Text 'Dashboard'
}
New-UDDashboard -Title 'Pages' -Pages $Pages$Pages = @()
$Pages += New-UDPage -Name 'Dashboard One' -Content {
New-UDTypography -Text 'Dashboard Two'
}
$Pages += New-UDPage -Name 'Dashboard Two' -Content {
New-UDTypography -Text 'Dashboard Two'
}
New-UDDashboard -Title 'Pages' -Pages $Pages$UDScriptRoot = $PSScriptRoot
$Pages = @()
$Pages += New-UDPage -Name 'Dashboard One' -Content {
. "$UDScriptRoot\db1.ps1"
}
$Pages += New-UDPage -Name 'Dashboard Two' -Content {
. "$UDScriptRoot\db2.ps1"
}
New-UDDashboard -Title 'Pages' -Pages $Pages$Pages = @()
$Pages += New-UDPage -Name 'Dashboard' -Url '/db' -Content {
New-UDTypography -Text 'Dashboard'
}
New-UDDashboard -Title 'Pages' -Pages $Pages$Pages = @()
$Pages += New-UDPage -Name 'Dashboard' -Url '/db/:user' -Content {
New-UDTypography -Text 'Dashboard for user: $User'
}
New-UDDashboard -Title 'Pages' -Pages $Pages$Pages = @()
$Pages += New-UDPage -Name 'Administrators' -Content {
New-UDTypography -Text 'Dashboard for user: $User'
} -Role 'Administrator'
$Pages += New-UDPage -Name 'Operators' -Content {
New-UDTypography -Text 'Dashboard for user: $User'
} -Role 'Operator'
New-UDDashboard -Title 'Pages' -Pages $PagesNew-UDPage -HeaderPosition fixed -Content {
New-UDElement -tag div -Attributes @{
style = @{
height = '150vh'
}
}
}New-UDPage -Name 'Home' -Content {
} -HeaderColor 'black' -HeaderBackgroundColor 'white'$Navigation = @(
New-UDListItem -Label "Home"
New-UDListItem -Label "Getting Started" -Children {
New-UDListItem -Label "Installation" -Href '/Installation'
New-UDListItem -Label "Usage" -Href '/Usage'
New-UDListItem -Label "FAQs" -Href '/faqs'
New-UDListItem -Label "System Requirements" -Href'/requirements'
New-UDListItem -Label "Purchasing" -Href '/purchasing'
}
)
$Pages = @()
$Pages += New-UDPage -Name 'Installation' -Content {
New-UDTypography -Text "Installation"
}
$Pages += New-UDPage -Name 'Usage' -Content {
New-UDTypography -Text "Usage"
}
New-UDDashboard -Title "Hello, World!" -Pages $Pages -NavigationLayout permanent -Navigation $Navigation$Navigation = {
New-UDListItem -Label "Home - $(Get-Date)"
New-UDListItem -Label "Getting Started" -Children {
New-UDListItem -Label "Installation" -Href '/installation'
New-UDListItem -Label "Usage" -Href '/usage'
New-UDListItem -Label "FAQs" -Href '/faqs'
New-UDListItem -Label "System Requirements" -Href'/requirements'
New-UDListItem -Label "Purchasing" -Href '/purchasing'
}
}
$Pages = @()
$Pages += New-UDPage -Name 'Test' -Content {
New-UDTypography -Text "Hello"
} -NavigationLayout permanent -LoadNavigation $Navigation
$Pages += New-UDPage -Name 'Test2' -Content {
New-UDTypography -Text "Hello"
} -NavigationLayout permanent -LoadNavigation $Navigation
New-UDDashboard -Title "Hello, World!" -Pages $Pages$Pages = @()
$Pages += New-UDPage -Name 'Test' -Content {
New-UDTypography -Text "Hello"
} -NavigationLayout permanent
$Pages += New-UDPage -Name 'Test2' -Content {
New-UDTypography -Text "Hello"
} -NavigationLayout permanent
New-UDDashboard -Title "Hello, World!" -Pages $Pages$Pages = @()
$Pages += New-UDPage -Name 'Test' -Content {
New-UDTypography -Text "Hello"
} -NavigationLayout temporary
$Pages += New-UDPage -Name 'Test2' -Content {
New-UDTypography -Text "Hello"
} -NavigationLayout temporary
New-UDDashboard -Title "Hello, World!" -Pages $PagesNew-UDDashboard -Title 'PowerShell Universal' -Pages @(
New-UDPage -Name 'Page' -Content {
New-UDAppBar -Children {
New-UDTypography -Text "Title" -Variant h4 -Style @{
marginRight = "50px"
}
New-UDMenu -Variant text -Text "Settings" -Children {
New-UDMenuItem -Text 'Item 1' -OnClick { Invoke-UDRedirect "/item1" }
New-UDMenuItem -Text 'Item 2' -OnClick { Invoke-UDRedirect "/item1" }
New-UDMenuItem -Text 'Item 3' -OnClick { Invoke-UDRedirect "/item1" }
}
New-UDMenu -Variant text -Text "Options" -Children {
New-UDMenuItem -Text 'Item 1' -OnClick { Invoke-UDRedirect "/item1" }
New-UDMenuItem -Text 'Item 2' -OnClick { Invoke-UDRedirect "/item1" }
New-UDMenuItem -Text 'Item 3' -OnClick { Invoke-UDRedirect "/item1" }
}
New-UDMenu -Variant text -Text "Tools" -Children {
New-UDMenuItem -Text 'Item 1' -OnClick { Invoke-UDRedirect "/item1" }
New-UDMenuItem -Text 'Item 2' -OnClick { Invoke-UDRedirect "/item1" }
New-UDMenuItem -Text 'Item 3' -OnClick { Invoke-UDRedirect "/item1" }
}
} -DisableThemeToggle
} -Blank
) New-UDPage -Name 'Home' -Logo '/assets/favicon.png' -Content {
}$Page = New-UDPage -Name 'Home' -Content {
} -HeaderContent {
New-UDButton -Icon (New-UDIcon -Icon Users) -Text 'User'
}
New-UDDashboard -Title "Dashboard" -Pages $PageNew-UDPage -Name "Home" -LoadTitle { "Current Time" + (Get-Date) } -Content { } New-UDPage -Name 'Static Page' -Content {
New-UDTypography (Get-Date)
} -StaticNew-UDPage -Name 'Static Page' -Content {
New-UDDynamic -Content {
New-UDTypography (Get-Date)
}
} -StaticNew-UDButton -Text 'Basic' -OnClick {
Show-UDModal -Content {
New-UDTypography -Text "Hello"
}
}New-UDButton -Text 'Full Screen' -OnClick {
Show-UDModal -Content {
New-UDTypography -Text "Hello"
} -Footer {
New-UDButton -Text "Close" -OnClick { Hide-UDModal }
} -FullScreen
}New-UDButton -Text 'Full Width' -OnClick {
Show-UDModal -Content {
New-UDTypography -Text "Hello"
} -FullWidth -MaxWidth 'md'
}New-UDButton -Text 'Persistent' -OnClick {
Show-UDModal -Content {
New-UDTypography -Text "Hello"
} -Footer {
New-UDButton -Text "Close" -OnClick { Hide-UDModal }
} -Persistent
}New-UDButton -Text 'Basic' -OnClick {
Show-UDModal -Content {
New-UDTypography -Text "Hello"
}
Start-Sleep 5
Hide-UDModal
}New-UDButton -Text 'Styling' -OnClick {
Show-UDModal -Content {
New-UDTypography -Text "Hello"
} -Style @{
backgroundColor = "red"
}
}New-UDEditorNew-UDEditor -OnChange {
Show-UDToast $EventData
}New-UDEditor -OnChange {
Show-UDToast $EventData
} -Format 'html'New-UDEditor -Data $DataNew-UDEditor -PublishedFolder 'MyImages'$Drawer = New-UDDrawer -Children {
New-UDList -Children {
New-UDListItem -Label "Home"
New-UDListItem -Label "Getting Started" -Children {
New-UDListItem -Label "Installation" -OnClick {}
New-UDListItem -Label "Usage" -OnClick {}
New-UDListItem -Label "FAQs" -OnClick {}
New-UDListItem -Label "System Requirements" -OnClick {}
New-UDListItem -Label "Purchasing" -OnClick {}
}
}
}
New-UDAppBar -Position relative -Children { New-UDElement -Tag 'div' -Content { "Title" } } -Drawer $DrawerNew-UDAppBar -Position fixed -Children { New-UDElement -Tag 'div' -Content { "Title" } }
New-UDElement -Tag 'div' -Content {
} -Attributes @{
style = @{
height = "10000px"
}
}New-UDStack -Content {
New-UDPaper -Content { "Item 1" } -Elevation 3
New-UDPaper -Content { "Item 2" } -Elevation 3
New-UDPaper -Content { "Item 3" } -Elevation 3
} -Spacing 2New-UDStack -Content {
New-UDPaper -Content { "Item 1" } -Elevation 3
New-UDPaper -Content { "Item 2" } -Elevation 3
New-UDPaper -Content { "Item 3" } -Elevation 3
} -Spacing 2 -Direction 'column'New-UDPaper -Square -Content {}New-UDPaper -Content { } -Style @{
backgroundColor = 'red'
}New-UDIcon -Icon 'AddressBook' New-UDIcon -Icon 'AddressBook' -Size 'sm'
New-UDIcon -Icon 'AddressBook' -Size 'lg'
New-UDIcon -Icon 'AddressBook' -Size '5x'
New-UDIcon -Icon 'AddressBook' -Size '10x'New-UDIcon -Icon 'AddressBook' -Size '5x' -Rotation 90New-UDIcon -Icon 'AddressBook' -Size '5x' -BorderNew-UDIcon -Icon 'AddressBook' -Size '5x' -Style @{
backgroundColor = "red"
}New-UDTextbox -Id 'txtIconSearch' -Label 'Search'
New-UDButton -Text 'Search' -OnClick {
Sync-UDElement -Id 'icons'
}
New-UDElement -tag 'p' -Content {}
New-UDDynamic -Id 'icons' -Content {
$IconSearch = (Get-UDElement -Id 'txtIconSearch').value
if ($null -ne $IconSearch -and $IconSearch -ne '')
{
$Icons =$Icons = Find-UDIcon -Name $IconSearch
}
foreach($icon in $icons) {
try{
New-UDChip -Label $icon -Icon (New-UDIcon -Icon $icon)
}
catch{
New-UDChip -Label "$icon Unknown"
}
}
} https://github.com/FortAwesome/Font-Awesome/blob/6.x/metadata/icons.jsonInstall-Module Universal.Icons.TablerNew-UDButton -Icon (New-UDTablerIcon -Icon "Tb3DRotate")New-UDCodeEditor -Height '500' -Language 'powershell' -Code '#Hello, world!'New-UDCodeEditor -Height '500' -Language 'powershell' -Code '#Hello, world!' -Id 'editor'
New-UDButton -Text 'Get Code' -OnClick {
Show-UDToast -Message (Get-UDElement -id 'editor').Code
}New-UDCodeEditor -Height '500' -Language 'powershell' -Code '#Hello, world!' -Id 'editor'
New-UDButton -Text 'Get Code' -OnClick {
Set-UDElement -Id 'editor' -Properties @{
code = "# Hello!"
}
}New-UDCodeEditor -Language powershell -Height 100 -Options @{ fontSize = 10 }New-UDTabs -Tabs {
New-UDTab -Text 'Item One' -Content { New-UDTypography -Text 'Item One' -Variant 'h2' }
New-UDTab -Text 'Item Two' -Content { New-UDTypography -Text 'Item Two' -Variant 'h2' }
New-UDTab -Text 'Item Three' -Content { New-UDTypography -Text 'Item Three' -Variant 'h2' }
} -Orientation verticalNew-UDTabs -Tabs {
New-UDTab -Text 'Item One' -Content { Get-Date } -Dynamic
New-UDTab -Text 'Item Two' -Content { Get-Date } -Dynamic
New-UDTab -Text 'Item Three' -Content { Get-Date } -Dynamic
} -RenderOnActiveNew-UDTabs -Tabs {
New-UDTab -Text 'Item One' -Content { New-UDTypography -Text 'Item One' -Variant 'h2' } -Icon (New-UDIcon -Icon Users)
New-UDTab -Text 'Item Two' -Content { New-UDTypography -Text 'Item Two' -Variant 'h2' } -Icon (New-UDIcon -Icon Desktop)
New-UDTab -Text 'Item Three' -Content { New-UDTypography -Text 'Item Three' -Variant 'h2' } -Icon (New-UDIcon -Icon Exclamation)
}New-UDSwitch -Id 'switch'
New-UDButton -Text 'Click' -OnClick {
Show-UDToast -Message (Get-UDElement -Id 'switch').checked
}New-UDTransferList -Item {
New-UDTransferListItem -Name 'test1' -Value 1
New-UDTransferListItem -Name 'test2' -Value 2
New-UDTransferListItem -Name 'test3' -Value 3
New-UDTransferListItem -Name 'test4' -Value 4
New-UDTransferListItem -Name 'test5' -Value 5
} -OnChange {
Show-UDToast ($EventData | ConvertTo-Json)
}New-UDForm -Content {
New-UDTransferList -Item {
New-UDTransferListItem -Name 'test1' -Value 1
New-UDTransferListItem -Name 'test2' -Value 2
New-UDTransferListItem -Name 'test3' -Value 3
New-UDTransferListItem -Name 'test4' -Value 4
New-UDTransferListItem -Name 'test5' -Value 5
}
} -OnSubmit {
Show-UDToast ($EventData | ConvertTo-Json)
}New-UDSlider -Min 10 -Max 1000New-UDSlider -DisabledNew-UDSlider -Min 10 -Max 1000 -Step 100New-UDSlider -MarksNew-UDSlider -Value @(1, 10)New-UDSlider -OnChange {
Show-UDToast -Message $Body
Set-TestData $Body
}New-UDTransition -Id 'test' -Content {
New-UDCard -Text "Hey"
} -In -Fade -Timeout 1000
New-UDSwitch -OnChange {
Set-UDElement -Id 'test' -Properties @{
in = $EventData -eq 'True'
}
} -Checked $trueNew-UDRadioGroup -Label "Day" -Content {
New-UDRadio -Label Monday -Value 'monday'
New-UDRadio -Label Tuesday -Value 'tuesday'
New-UDRadio -Label Wednesday -Value 'wednesday'
New-UDRadio -Label Thursday -Value 'thursday'
New-UDRadio -Label Friday -Value 'friday'
New-UDRadio -Label Saturday -Value 'saturday'
New-UDRadio -Label Sunday -Value 'sunday'
}
Create a select with groups of selections.
Execute a PowerShell event handler when the value of the select is changed. $EventData[0] for the single item that was selected.
Execute a PowerShell event handler when the more than one value of the select is changed. $EventData is an array of the selected items.
Retrieve the value of the select from another component.
ScriptBlock
The script block event handler to call when the editor data changes.
Format
string
Whether to return either json or html in the OnChange script block.
This document outlines how to build custom Universal Dashboard components.
Universal Dashboard is extensible and you can build custom JavaScript components and frameworks. This document will cover how to build custom components that integrate with the Universal Dashboard platform.
This is an advanced topic and not required if you simply want to use Universal Dashboard. There are a lot of existing custom components available on the Universal Dashboard Marketplace.
Below is a list of some of the technologies used when building Universal Dashboard components. You will not need to be an expert to produce a component but should be aware of what to search when you encounter a problem.
Universal Dashboard's client-side application is built using the . React makes it easy to build components that update the DOM only when necessary and has a pretty robust ecosystem of users. It's one of the most popular JavaScript frameworks at the time of this writing.
is a transcompiler for JavaScript. It works well with React and allows you to use modern constructs while compiling for backwards compatibility of browsers. Universal Dashboard uses Babel for it's core component frameworks.
is an asset bundler. It's extremely customizable and is responsible for turning your JSX files into a bundle that can then be distributed with Universal Dashboard components.
There are some basic parts to a Universal Dashboard component. You will need to understand the structure in order to successfully build your own.
Universal Dashboard custom components are PowerShell modules. They export functions that can be used to create the component when run within a dashboard. The PowerShell module is also responsible for registering the JavaScript assets with Universal Dashboard.
The JavaScript bundle is produced by the Webpack bundling process. It consists of one or more JS files that you will need to register with UD.
The most basic structure for a UD component module will include a single JavaScript file, a PSM1 file to export a function and register the JavaScript and a PSD1 module manifest.
This following section will take you step-by-step through the different aspects of building a UD component. This assumes you are running PowerShell Universal 1.2 or later and using the PowerShell Universal Dashboard v3 framework.
For a full example of a component, .
You will need to install the following dependencies before creating your component.
After installing Node, you will have access to the npm command. You will need to initialize the node package to start. This will create a package.json file in your directory.
package.json that you can also use as a starting point.
You will need several JavaScript packages to build your bundle. You will first want to install the dev dependencies. These are used to build your project.
Next, you'll want to install the universal-dashboard package along with any other packages you wish to use in your component. We are using React95 in this example. We will build a control based on that library.
You will need to create a .babelrc file to configure Babel for React.
Webpack is extremely customizable and sometimes very hard to get right. Below is a basic webpack.config.js file you can use to configure Webpack. You can safely change the ud95 entry key name and library value to one that matches your library.
Now you can build your first component. You will need to export a single function component from your component.jsx file. We suggest the use of functional React components rather than class-based React components. We need to wrap the component in withComponentFeatures to ensure the component has access to the Universal Dashboard platform features.
Once your component is completed, you'll need to add it to an index.js file. The entry point for your library is the first place Webpack will look. It will discover all other components from import statements in your code. The index.js file is where you should register your components. You can use the registerComponent function to do so.
To bundle the JavaScript, run the following command to start webpack. This will output a file into the dist folder.
Now you will need to create a PowerShell script that registers and creates your component.
First, register the JavaScript with Universal Dashboard.
Next, create a function that returns a hashtable that defines which component we are creating and which props to set.
The type property of your hashtable needs to match with the first parameter of registerComponent that you called in your JavaScript.
We suggest the use of InvokeBuild to create a build script to run all the steps of packaging and staging your module. The below build script deletes the dist folder, runs an NPM install to install packages, runs an NPM build to bundle the JavaScript and then copies the PS module to the dist folder.
Props are values that are either passed from the PowerShell hashtable provided by the user or by the Universal Dashboard withComponentsFeature high-order function.
The properties that you set in your hashtable in PowerShell will automatically be sent in as props to React component.
For example, if you set the text property of the hashtable like this.
Then you will have access to that prop in React.
Endpoints are special in the way they are registered and the way that they are passed as props to your component. You will need to call Register on the endpoint in PowerShell and pass in the Id and PSCmdlet variables.
Endpoints are created from ScriptBlocks and are executed when that event happens.
Universal Dashboard will automatically wire up the endpoint to a function within JavaScript. This means that you can use the props to call that endpoint.
Notice the props.onClick function call. This will automatically call the PowerShell script block on the server.
The setState prop is used to set the state of the component. This ensures that the state is tracked and your component will work with Get-UDElement.
For example, with a text field, you'll want to call props.setState and pass in the new text value for the state.
The children prop is a standard React prop. If your component supports child items, such as a list or select box, you should use the standard props.children prop to ensure that the cmdlets Add-UDElement , Remove-UDElement and Clear-UDElement function correctly.
The is an aggregator of the PowerShell Gallery that lists Universal Dashboard components. The UD Marketplace automatically hooks into PowerShell Universal v1.3 or later where you can easily install additional components.
To publish to the Marketplace, you simply need to publish to the PowerShell Gallery but include the ud-component tag in your module manifest. The marketplace syncs with the Gallery every hour and your component will be enabled for anyone to find after that.
Textbox component for Universal Dashboard
A textbox lets users enter and edit text.
A password textbox will mask the input.
You can create a multiline textbox by using the -Multiline parameter. Pressing enter will add a new line. You can define the number of rows and the max number of rows using -Rows and -RowsMax.
You can use Get-UDElement to get the value of a textbox
You can set the icon of a textbox by using the -Icon parameter and the New-UDIcon cmdlet.
The textbox mask is accomplished using react-imask. You can specify RegEx and pattern matching.
This example creates a mask for US based phone numbers.
The default behavior of -Mask is to return the masked value in forms and Get-UDElement. You can return the unmasked value by specifying the -Unmask parameter.
The -OnEnter event handler is executed when the user presses enter in the text field. It is useful for performing other actions, like clicking a button, on enter.
The -OnBlur event handler is executed when the textbox loses focus.
Use the -OnValidate event handler to validate input typed in the textbox.
Card component for Universal Dashboard
Cards contain content and actions about a single subject.
Cards are surfaces that display content and actions on a single topic. They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.
Although cards can support multiple actions, UI controls, and an overflow menu, use restraint and remember that cards are entry points to more complex and detailed information.
New-UDCard -Title 'Simple Card' -Content {
"This is some content"
}You can use the body, header, footer and expand cmdlets to create advanced cards. The below example creates a card with various features based on a Hyper-V VM.
Grid layout component for Universal Dashboard.
The responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.
The grid creates visual consistency between layouts while allowing flexibility across a wide variety of designs. Material Design’s responsive UI is based on a 12-column grid layout.
Adjust the spacing between items in the grid
You can also use the New-UDRow and New-UDColumn functions when working with the grid.
New-UDSelect -Option {
New-UDSelectOption -Name 'One' -Value 1
New-UDSelectOption -Name 'Two' -Value 2
New-UDSelectOption -Name 'Three' -Value 3
}New-UDSelect -Option {
New-UDSelectGroup -Name 'Group One' -Option {
New-UDSelectOption -Name 'One' -Value 1
New-UDSelectOption -Name 'Two' -Value 2
New-UDSelectOption -Name 'Three' -Value 3
}
New-UDSelectGroup -Name 'Group Two' -Option {
New-UDSelectOption -Name 'Four' -Value 4
New-UDSelectOption -Name 'Five' -Value 5
New-UDSelectOption -Name 'Size' -Value 6
}
}New-UDSelect -Option {
New-UDSelectOption -Name 'One' -Value 1
New-UDSelectOption -Name 'Two' -Value 2
New-UDSelectOption -Name 'Three' -Value 3
} -OnChange { Show-UDToast -Message $EventData[0] }New-UDSelect -Multiple -Option {
New-UDSelectOption -Name 'One' -Value 1
New-UDSelectOption -Name 'Two' -Value 2
New-UDSelectOption -Name 'Three' -Value 3
} -OnChange {
Show-UDToast -Message (ConvertTo-json -InputObject $EventData)
} New-UDSelect -Option {
New-UDSelectOption -Name 'One' -Value 1
New-UDSelectOption -Name 'Two' -Value 2
New-UDSelectOption -Name 'Three' -Value 3
} -Id 'select' -DefaultValue 2
New-UDButton -Text 'OnBoard' -OnClick {
$Element = Get-UDElement -Id 'select'
if ($Element.Value)
{
Show-UDToast -Message $Element.Value
}
else
{
Show-UDToast -Message $Element.DefaultValue
}
}New-UDTransition -Id 'test' -Content {
New-UDCard -Text "Hey"
} -In -Collapse -CollapseHeight 100 -Timeout 1000
New-UDSwitch -OnChange {
Set-UDElement -Id 'test' -Properties @{
in = $EventData -eq 'True'
}
} -Checked $trueNew-UDTransition -Id 'test' -Content {
New-UDCard -Text "Hey"
} -In -Fade -Timeout 1000
New-UDSwitch -OnChange {
Set-UDElement -Id 'test' -Properties @{
in = $EventData -eq 'True'
}
} -Checked $trueNew-UDTransition -Id 'test' -Content {
New-UDCard -Text "Hey"
} -In -Slide -SlideDirection 'left' -Timeout 1000
New-UDSwitch -OnChange {
Set-UDElement -Id 'test' -Properties @{
in = $EventData -eq 'True'
}
} -Checked $trueNew-UDTransition -Id 'test' -Content {
New-UDCard -Text "Hey"
} -In -Grow -Timeout 1000
New-UDSwitch -OnChange {
Set-UDElement -Id 'test' -Properties @{
in = $EventData -eq 'True'
}
} -Checked $trueNew-UDTransition -Id 'test' -Content {
New-UDCard -Text "Hey"
} -In -Zoom -Timeout 1000
New-UDSwitch -OnChange {
Set-UDElement -Id 'test' -Properties @{
in = $EventData -eq 'True'
}
} -Checked $trueNew-UDRadioGroup -Label "Day" -Content {
New-UDRadio -Label Monday -Value 'monday'
New-UDRadio -Label Tuesday -Value 'tuesday'
New-UDRadio -Label Wednesday -Value 'wednesday'
New-UDRadio -Label Thursday -Value 'thursday'
New-UDRadio -Label Friday -Value 'friday'
New-UDRadio -Label Saturday -Value 'saturday'
New-UDRadio -Label Sunday -Value 'sunday'
} -OnChange { Show-UDToast -Message $Body }
}New-UDRadioGroup -Label "Day" -Content {
New-UDRadio -Label Monday -Value 'monday'
New-UDRadio -Label Tuesday -Value 'tuesday'
New-UDRadio -Label Wednesday -Value 'wednesday'
New-UDRadio -Label Thursday -Value 'thursday'
New-UDRadio -Label Friday -Value 'friday'
New-UDRadio -Label Saturday -Value 'saturday'
New-UDRadio -Label Sunday -Value 'sunday'
} -Value 'sunday'New-UDRadioGroup -Label "Day" -Content {
New-UDRow -Columns {
New-UDColumn -LargeSize 1 -Content {
New-UDRadio -Label Monday -Value 'monday'
}
New-UDColumn -LargeSize 1 -Content {
New-UDRadio -Label Sunday -Value 'sunday'
}
}
}New-UDMenu -Content {
New-UDMenuItem -Text 'Item 1'
New-UDMenuItem -Text 'Item 1'
New-UDMenuItem -Text 'Item 1'
}New-UDMenu -Content {
New-UDMenuItem -Text 'Item 1'
New-UDMenuItem -Text 'Item 1'
New-UDMenuItem -Text 'Item 1'
} -Variant outlinedNew-UDMenu -Content {
New-UDMenuItem -Text 'Item 1' -Value 'item1'
New-UDMenuItem -Text 'Item 1' -Value 'item2'
New-UDMenuItem -Text 'Item 1' -Value 'item3'
}New-UDMenu -Text 'Click Me' -OnChange {
Show-UDToast $EventData
} -Children {
New-UDMenuItem -Text 'Test'
New-UDMenuItem -Text 'Test2'
New-UDMenuItem -Text 'Test3'
}New-UDTextbox -Label 'Standard' -Placeholder 'Textbox'
New-UDTextbox -Label 'Disabled' -Placeholder 'Textbox' -Disabled
New-UDTextbox -Label 'Textbox' -Value 'With value'New-UDGrid -Container -Content {
New-UDGrid -Item -ExtraSmallSize 12 -Content {
New-UDPaper -Content { "xs-12" } -Elevation 2
}
New-UDGrid -Item -ExtraSmallSize 6 -Content {
New-UDPaper -Content { "xs-6" } -Elevation 2
}
New-UDGrid -Item -ExtraSmallSize 6 -Content {
New-UDPaper -Content { "xs-6" } -Elevation 2
}
New-UDGrid -Item -ExtraSmallSize 3 -Content {
New-UDPaper -Content { "xs-3" } -Elevation 2
}
New-UDGrid -Item -ExtraSmallSize 3 -Content {
New-UDPaper -Content { "xs-3" } -Elevation 2
}
New-UDGrid -Item -ExtraSmallSize 3 -Content {
New-UDPaper -Content { "xs-3" } -Elevation 2
}
New-UDGrid -Item -ExtraSmallSize 3 -Content {
New-UDPaper -Content { "xs-3" } -Elevation 2
}
}
- UniversalDashboard.95
- index.23adfdasf.js
- UniversalDashboard.95.psd1
- UniversalDashboard.95.psm1npm initnpm install @babel/core --save-dev
npm install @babel/plugin-proposal-class-properties --save-dev
npm install @babel/plugin-syntax-dynamic-import --save-dev
npm install @babel/polyfill --save-dev
npm install @babel/preset-env --save-dev
npm install @babel/preset-react --save-dev
npm install babel-loader --save-dev
npm install webpack --save-dev
npm install webpack-cli --save-devnpm install universal-dashboard --save
npm install react95 --save
npm install styled-components --save{
"presets": ["@babel/preset-react"]
}var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'dist');
module.exports = (env) => {
const isDev = env == 'development' || env == 'isolated';
return {
entry: {
'ud95' : __dirname + '/index.js'
},
output: {
library: "UD95",
libraryTarget: "var",
path: BUILD_DIR,
filename: isDev ? '[name].bundle.js' : '[name].[hash].bundle.js',
sourceMapFilename: '[name].[hash].bundle.map',
publicPath: "/"
},
module : {
rules : [
{ test: /\.(js|jsx)$/, exclude: [/node_modules/, /public/], loader: 'babel-loader'}
]
},
externals: {
UniversalDashboard: 'UniversalDashboard',
'react': 'react',
'react-dom': 'reactdom'
},
resolve: {
extensions: ['.json', '.js', '.jsx']
}
};
}import React from 'react';
import { withComponentFeatures } from 'universal-dashboard';
import { Button } from 'react95';
const UD95Button = props => {
const p = {
onClick: () => props.onClick()
}
return <Button {...p}>{props.text}</Button>
}
export default withComponentFeatures(UD95Button);import { registerComponent } from 'universal-dashboard'
import UD95Button from './component';
registerComponent("ud95-button", UD95Button);npm run build$JsFile = Get-ChildItem "$PSScriptRoot\ud95.*.js"
$AssetId = [UniversalDashboard.Services.AssetService]::Instance.RegisterAsset($JsFile.FullName)function New-UD95Button {
param(
[Parameter()]
[string]$Id = [Guid]::NewGuid(),
[Parameter()]
[string]$Text,
[Parameter()]
[Endpoint]$OnClick
)
if ($OnClick)
{
$OnClick.Register($Id, $PSCmdlet)
}
@{
type = "ud95-button"
isPlugin = $true
assetId = $AssetId
id = $Id
text = $Text
onClick = $OnClick
}
}task Clean {
Remove-Item "$PSScriptRoot\dist" -Recurse -Force
}
task NpmInstall {
& {
$ErrorActionPreference = 'SilentlyContinue'
Push-Location $PSScriptRoot
npm install
Pop-Location
}
}
task NpmBuild {
& {
$ErrorActionPreference = 'SilentlyContinue'
Push-Location $PSScriptRoot
npm run build
Pop-Location
}
}
task Stage {
Copy-Item "$PSScriptRoot\UniversalDashboard.95.*" "$PSScriptRoot\dist"
}
task . Clean, NpmInstall, NpmBuild, Stagefunction New-UDText {
param(
[Parameter()]
[string]$Text
)
@{
type = "text"
isPlugin = $true
assetId = $AssetId
text = $Text
}
}import React from 'react';
import { withComponentFeatures } from 'universal-dashboard';
const UDText = props => {
return <div>{props.text}</div>
}
export default withComponentFeatures(UDText);function New-UD95Button {
param(
[Parameter()]
[string]$Id = [Guid]::NewGuid(),
[Parameter()]
[string]$Text,
[Parameter()]
[Endpoint]$OnClick
)
if ($OnClick)
{
$OnClick.Register($Id, $PSCmdlet)
}
@{
type = "ud95-button"
isPlugin = $true
assetId = $AssetId
id = $Id
text = $Text
onClick = $OnClick
}
}New-UD95Button -Text 'Hello' -OnClick {
Show-UDToast -Message 'Test'
}import React from 'react';
import { withComponentFeatures } from 'universal-dashboard';
import { Button } from 'react95';
const UD95Button = props => {
const p = {
onClick: () => props.onClick()
}
return <Button {...p}>{props.text}</Button>
}
export default withComponentFeatures(UD95Button);const UDTextField = (props) => {
const onChange = (e) => {
props.setState({value: e.target.value})
}
return <TextField {...props} onChange={onChange} />
}
export default withComponentFeatures(UDTextField);
New-UDRow -Columns {
New-UDColumn -SmallSize 12 -Content {
New-UDPaper -Content { "xs-12" } -Elevation 2
}
New-UDColumn -SmallSize 12 -Content {
New-UDPaper -Content { "xs-12" } -Elevation 2
}
}
$Header = New-UDCardHeader -Avatar (New-UDAvatar -Content { "R" } -Sx @{ backgroundColor = "#f44336" }) -Action (New-UDIconButton -Icon (New-UDIcon -Icon 'EllipsisVertical')) -Title 'Shrimp and Chorizo Paella' -SubHeader 'September 14, 2016';
$Media = New-UDCardMedia -Image 'https://mui.com/static/images/cards/paella.jpg'
$Body = New-UDCardBody -Content {
New-UDTypography -Text ' This impressive paella is a perfect party dish and a fun meal to cook together with your guests. Add 1 cup of frozen peas along with the mussels, if you like.' -Sx @{
color = 'text.secondary'
} -Variant body2
}
$Footer = New-UDCardFooter -Content {
New-UDIconButton -Icon (New-UDIcon -Icon 'Heart')
New-UDIconButton -Icon (New-UDIcon -Icon 'ShareAlt')
}
$Expand = New-UDCardExpand -Content {
$Description = @"
Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over
medium-high heat. Add chicken, shrimp and chorizo, and cook, stirring
occasionally until lightly browned, 6 to 8 minutes. Transfer shrimp to a
large plate and set aside, leaving chicken and chorizo in the pan. Add
pimentón, bay leaves, garlic, tomatoes, onion, salt and pepper, and cook,
stirring often until thickened and fragrant, about 10 minutes. Add
saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil.
New-UDTypography -Text $Description
}
New-UDCard -Header $Header -Media $Media -Body $Body -Footer $Footer -Expand $Expand -Sx @{
maxWidth = 345
border = '2px solid #f0f2f5'
}New-UDTextbox -Label 'Password' -Type passwordNew-UDTextbox -Multiline -Rows 4 -RowsMax 10New-UDTextbox -Id 'txtExample'
New-UDButton -OnClick {
$Value = (Get-UDElement -Id 'txtExample').value
Show-UDToast -Message $Value
} -Text "Get textbox value"New-UDTextbox -Id 'txtExample' -Label 'Label' -Value 'Value'
New-UDButton -OnClick {
Set-UDElement -Id 'txtExample' -Properties @{
Value = "test123"
}
} -Text "Get textbox value"New-UDTextbox -Id "ServerGroups" -Icon (New-UDIcon -Icon 'server') -Value "This is my server"New-UDTextbox -Mask "+1 (000) 000-0000"New-UDTextbox -Mask "+1 (000) 000-0000" -UnmaskNew-UDTextbox -OnEnter {
Invoke-UDEndpoint -Id 'submit' -Session
}
New-UDButton -Id 'submit' -OnClick {
Show-UDToast -Message 'From Textbox'
}New-UDTextbox -OnBlur {
Show-UDToast "Blurred"
}New-UDTextbox -OnValidate {
if ($EventData.Length -lt 10)
{
New-UDValidationResult -ValidationError 'String needs to be longer than 10'
}
}New-UDDynamic -Id 'spacingGrid' -Content {
$Spacing = (Get-UDElement -Id 'spacingSelect').value
New-UDGrid -Spacing $Spacing -Container -Content {
New-UDGrid -Item -ExtraSmallSize 3 -Content {
New-UDPaper -Content { "xs-3" } -Elevation 2
}
New-UDGrid -Item -ExtraSmallSize 3 -Content {
New-UDPaper -Content { "xs-3" } -Elevation 2
}
New-UDGrid -Item -ExtraSmallSize 3 -Content {
New-UDPaper -Content { "xs-3" } -Elevation 2
}
New-UDGrid -Item -ExtraSmallSize 3 -Content {
New-UDPaper -Content { "xs-3" } -Elevation 2
}
}
}
New-UDSelect -Id 'spacingSelect' -Label Spacing -Option {
for($i = 0; $i -lt 10; $i++)
{
New-UDSelectOption -Name $i -Value $i
}
} -OnChange { Sync-UDElement -Id 'spacingGrid' } -DefaultValue 3
Map component for Universal Dashboard.
The UDMap component is a robust control that provides a huge set of features. You can select base layers, configure togglable layers, set markers, define vectors and interact with other Universal Dashboard components.
This basic map defines a simple base layer using the wmflabs.org tile server. You can use your own custom tile server by specifying a URL. The map is position over Hailey, Idaho.
You can enable the layer control by using the New-UDMapLayerControl cmdlet. This map defines several layers with components that you can toggle on and off. You can only have one base layer selected as a time. Map overlay layers can toggle on and off.
Markers are used to highlight particular locations.
You can specify custom icons for markers using the -Icon parameter.
You can create a popup when clicking the marker by using the -Popup parameter and the New-UDMapPopup cmdlet.
Heatmaps can be defined by creating a heatmap layer. The intesity and location of the heatmap clusters can be defined by using the New-UDMapHeatmapLayer cmdlet.
Marker clusters group together markers that are close to each other. As you zoom in or out, the clusters will either combine or explode.
Maps provide a series of interactive capabilities for add components to and manipulating the map.
New-UDMap -Endpoint {
New-UDMapRasterLayer -TileServer 'https://tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png'
} -Latitude 43.52107 -Longitude -114.31644 -Zoom 13 -Height '100vh'
Stepper component for Universal Dashboard
Steppers convey progress through numbered steps. It provides a wizard-like workflow.
Steppers display progress through a sequence of logical and numbered steps. They may also be used for navigation. Steppers may display a transient feedback message after a step is saved. The stepper supports storing input data in the stepper context. It supports the following controls.
The $Body variable will contain a JSON string that contains the current state of the stepper. You will receive information about the fields that have been defined within the stepper and info about the current step that has been completed. The $Body JSON string will have the following format.
You can validate a step in a stepper by specifying the OnValidateStep parameter. The script block will receive a $Body variable with JSON that provides information about the current state of the stepper. You will need to return a validation result using New-UDValidationResult to specify whether the current step state is valid.
The JSON payload will have the following format. Note that steps are 0 indexed. If you want to validate the first step, check to make sure the step is 0.
You will have to convert the JSON string to an object to work with in PowerShell and then return the validation result.
You can direct the user to a particular step in the OnValidateStep event handler. Use the New-UDValidationResult -ActiveStep parameter to move the user to any step after clicking next. Step indices are 0 based.
This example moves the user to the last step after completing the first step.
You can disable the previous button by using the -DisablePrevious parameter of New-UDValidationResult .
This example disables the previous step whenever the user moves forward in the stepper.
You can create a vertical stepper by setting the -Orientation parameter to vertical.
New-UDMap -Endpoint {
New-UDMapLayerControl -Content {
New-UDMapBaseLayer -Name 'Black and White' -Content {
New-UDMapRasterLayer -TileServer 'https://tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png'
} -Checked
New-UDMapBaseLayer -Name 'Color' -Content {
New-UDMapRasterLayer -TileServer 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
}
New-UDMapOverlay -Name 'Marker' -Content {
New-UDMapMarker -Latitude 51.505 -Longitude -0.09
} -Checked
New-UDMapOverlay -Name 'Marker 2' -Content {
New-UDMapMarker -Latitude 51.555 -Longitude -0.00
} -Checked
}
} -Latitude 51.505 -Longitude -0.09 -Zoom 13 -Height '100vh'New-UDMap -Endpoint {
New-UDMapRasterLayer -TileServer 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
New-UDMapMarker -Latitude "51.100" -Longitude "-0.5"
} -Latitude 51.505 -Longitude -0.09 -Zoom 13 -Height '100vh'New-UDMap -Endpoint {
New-UDMapRasterLayer -TileServer 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
New-UDMapMarker -Latitude "51.100" -Longitude "-0.5"
} -Latitude 51.505 -Longitude -0.09 -Zoom 13 -Height '100vh' -Icon (New-UDMapIcon -Url = "https://ironmansoftware.com/img/ps-logo.png")
}New-UDMapMarker -Latitude "51.$RandomLat" -Longitude "-0.$Random" -Popup (
New-UDMapPopup -Content {
New-UDAlert -Text "Hello"
} -MinWidth 200
)New-UDMap -Endpoint {
New-UDMapRasterLayer -TileServer 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
New-UDMapHeatmapLayer -Points @(
@(-37.9019339833, 175.3879181167, "625"),
@(-37.90920365, 175.4053418167, "397"),
@(-37.9057407667, 175.39478875, "540"),
@(-37.9243174333, 175.4220341833, "112"),
@(-37.8992012333, 175.3666729333, "815"),
@(-37.9110874833, 175.4102195833, "360"),
@(-37.9027096, 175.3913196333, "591"),
@(-37.9011183833, 175.38410915, "655"),
@(-37.9234701333, 175.4155696333, "181"),
@(-37.90254175, 175.3926162167, "582"),
@(-37.92450575, 175.4246711167, "90"),
@(-37.9242924167, 175.4289432833, "47"),
@(-37.8986079833, 175.3685293333, "801")
)
} -Height '100vh'New-UDMap -Endpoint {
New-UDMapRasterLayer -TileServer 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
New-UDMapMarkerClusterLayer -Id 'cluster-layer' -Markers @(
1..100 | ForEach-Object {
$Random = Get-Random -Minimum 0 -Maximum 100
$RandomLat = $Random + 400
New-UDMapMarker -Latitude "51.$RandomLat" -Longitude "-0.$Random"
}
)
} -Latitude 51.505 -Longitude -0.09 -Zoom 13 -Height '100vh'New-UDButton -Text 'Add Circle' -OnClick {
Add-UDElement -ParentId 'Feature-Group' -Content {
New-UDMapVectorLayer -Id 'Vectors' -Circle -Latitude 51.505 -Longitude -0.09 -Radius 500 -Color blue -FillColor blue -FillOpacity .5
}
}
New-UDButton -Text 'Remove Circle' -OnClick {
Remove-UDElement -Id 'Vectors'
}
New-UDButton -Text 'Add Marker' -OnClick {
Add-UDElement -ParentId 'Feature-Group' -Content {
New-UDMapMarker -Id 'marker' -Latitude 51.505 -Longitude -0.09 -Popup (
New-UDMapPopup -Content {
New-UDCard -Title "Test"
} -MaxWidth 600
)
}
}
New-UDButton -Text 'Remove Marker' -OnClick {
Remove-UDElement -Id 'marker'
}
New-UDButton -Text 'Add Layer' -OnClick {
Add-UDElement -ParentId 'layercontrol' -Content {
New-UDMapOverlay -Id 'MyNewLayer' -Name "MyNewLayer" -Content {
New-UDMapFeatureGroup -Id 'Feature-Group2' -Content {
1..100 | % {
New-UDMapVectorLayer -Id 'test' -Circle -Latitude "51.$_" -Longitude -0.09 -Radius 50 -Color red -FillColor blue -FillOpacity .5
}
}
} -Checked
}
}
New-UDButton -Text 'Remove Layer' -OnClick {
Remove-UDElement -Id 'MyNewLayer'
}
New-UDButton -Text 'Move' -OnClick {
Set-UDElement -Id 'map' -Attributes @{
latitude = 51.550
longitude = -0.09
zoom = 10
}
}
New-UDButton -Text "Add marker to cluster" -OnClick {
Add-UDElement -ParentId 'cluster-layer' -Content {
$Random = Get-Random -Minimum 0 -Maximum 100
$RandomLat = $Random + 400
New-UDMapMarker -Latitude "51.$RandomLat" -Longitude "-0.$Random"
}
}
New-UDButton -Text "Add points to heatmap" -OnClick {
Add-UDElement -ParentId 'heatmap' -Content {
@(
@(51.505, -0.09, "625"),
@(51.505234, -0.0945654, "625"),
@(51.50645, -0.098768, "625"),
@(51.5056575, -0.0945654, "625"),
@(51.505955, -0.095675, "625"),
@(51.505575, -0.09657, "625"),
@(51.505345, -0.099876, "625"),
@(51.505768, -0.0923432, "625"),
@(51.505567, -0.02349, "625"),
@(51.50545654, -0.092342, "625"),
@(51.5045645, -0.09342, "625")
)
}
}
New-UDButton -Text "Clear heatmap" -OnClick {
Clear-UDElement -Id 'heatmap'
}
New-UDMap -Id 'map' -Endpoint {
New-UDMapLayerControl -Id 'layercontrol' -Content {
New-UDMapBaseLayer -Name "Black and White" -Content {
New-UDMapRasterLayer -TileServer 'https://tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png'
}
New-UDMapBaseLayer -Name "Mapnik" -Content {
New-UDMapRasterLayer -TileServer 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
}
New-UDMapBaseLayer -Name "Bing" -Content {
New-UDMapRasterLayer -Bing -ApiKey 'asdf3rwf34afaw-sdfasdfa23feaw-23424dfsdfa' -Type Road
} -Checked
New-UDMapOverlay -Name "Markers" -Content {
New-UDMapFeatureGroup -Id 'Feature-Group' -Content {
New-UDMapMarker -Id 'marker' -Latitude 51.505 -Longitude -0.09
} -Popup (
New-UDMapPopup -Content {
New-UDCard -Title "Test123"
} -MaxWidth 600
)
} -Checked
New-UDMapOverlay -Name 'Vectors' -Content {
New-UDMapFeatureGroup -Id 'Vectors' -Content {
}
} -Checked
New-UDMapOverlay -Name "Heatmap" -Content {
New-UDMapHeatmapLayer -Id 'heatmap' -Points @()
} -Checked
New-UDMapOverlay -Name "Cluster" -Content {
New-UDMapMarkerClusterLayer -Id 'cluster-layer' -Markers @(
1..100 | ForEach-Object {
$Random = Get-Random -Minimum 0 -Maximum 100
$RandomLat = $Random + 400
New-UDMapMarker -Latitude "51.$RandomLat" -Longitude "-0.$Random"
}
)
} -Checked
}
} -Latitude 51.505 -Longitude -0.09 -Zoom 13 -Height '100vh' -AnimateForm component for Universal Dashboard
Forms provide a way to collect data from users.
Forms can include any type of control you want. This allows you to customize the look and feel and use any input controls.
Data entered via the input controls will be sent back to the the OnSubmit script block when the form is submitted. Within the OnSubmit event handler, you will access to the $EventData variable that will contain properties for each of the fields in the form.
For example, if you have two fields, you will have two properties on $EventData.
The following input controls automatically integrate with a form. The values that are set within these controls will be sent during validation and in the OnSubmit event handler.
Simple forms can use inputs like text boxes and checkboxes.
Since forms can use any component, you can use standard formatting components within the form.
When a form is submitted, you can optionally return another component to replace the form on the page. You can return any Universal Dashboard component. All you need to do is ensure that the component is written to the pipeline within the OnSubmit event handler.
Form validation can be accomplished by using the OnValidate script block parameter.
You can define an -OnCancel event handler to invoke when the cancel button is pressed. This can be used to take actions like close a modal.
Although you can return components directly from a form, you may want to retain the form so users can input data again. To do so, you can use Set-UDElement and a placeholder element that you can set the content to.
In this example, we have an empty form that, when submitted, will update the results element with a UDCard.
Instead of defining all the layout and logic for forms using cmdlets, you can also define a form based on a hashtable of schema. This version of forms is based on .
You define fields that accept string, number, integer, enum and boolean types. This changes the type of input shown.
You can use the required property to set a list of required properties.
Note that the properties need to be lower case! For example, you need to ensure the keys in your properties hashtable are lower case and the list of required properties are also lower case.
You can use the schemaUI property to modify the ordering of the fields.
You can create forms that accept 0 to many objects. The user will be able to add and remove objects to the form.
You can automatically generate forms based on scripts in your PowerShell Universal environment. Script forms will generate input components based on the param block. Script forms automatically support progress and feedback.
Script forms also support displaying the output as text or a table.
New-UDStepper -Steps {
New-UDStep -OnLoad {
New-UDElement -tag 'div' -Content { "Step 1" }
New-UDTextbox -Id 'txtStep1' -Value $EventData.Context.txtStep1
} -Label "Step 1"
New-UDStep -OnLoad {
New-UDElement -tag 'div' -Content { "Step 2" }
New-UDElement -tag 'div' -Content { "Previous data: $Body" }
New-UDTextbox -Id 'txtStep2' -Value $EventData.Context.txtStep2
} -Label "Step 2"
New-UDStep -OnLoad {
New-UDElement -tag 'div' -Content { "Step 3" }
New-UDElement -tag 'div' -Content { "Previous data: $Body" }
New-UDTextbox -Id 'txtStep3' -Value $EventData.Context.txtStep3
} -Label "Step 3"
} -OnFinish {
New-UDTypography -Text 'Nice! You did it!' -Variant h3
New-UDElement -Tag 'div' -Id 'result' -Content {$Body}
}{
context: {
txtStep1: "value1",
txtStep2: "value2",
txtStep3: "value3"
},
currentStep: 0
}{
context: {
field1: "value1"
},
currentStep: 0
}New-UDStepper -Steps {
New-UDStep -OnLoad {
New-UDElement -tag 'div' -Content { "Step 1" }
New-UDTextbox -Id 'txtStep1' -Value $EventData.Context.txtStep1
} -Label "Step 1"
New-UDStep -OnLoad {
New-UDElement -tag 'div' -Content { "Step 2" }
New-UDElement -tag 'div' -Content { "Previous data: $Body" }
New-UDTextbox -Id 'txtStep2' -Value $EventData.Context.txtStep2
} -Label "Step 2"
New-UDStep -OnLoad {
New-UDElement -tag 'div' -Content { "Step 3" }
New-UDElement -tag 'div' -Content { "Previous data: $Body" }
New-UDTextbox -Id 'txtStep3' -Value $EventData.Context.txtStep3
} -Label "Step 3"
} -OnFinish {
New-UDTypography -Text 'Nice! You did it!' -Variant h3
New-UDElement -Tag 'div' -Id 'result' -Content {$Body}
} -OnValidateStep {
$Context = $EventData
if ($Context.CurrentStep -eq 0 -and $Context.Context.txtStep1 -eq 'bad')
{
New-UDValidationResult
}
else
{
New-UDValidationResult -Valid
}
}New-UDStepper -Steps {
New-UDStep -OnLoad {
New-UDElement -tag 'div' -Content { "Step 1" }
New-UDTextbox -Id 'txtStep1' -Value $EventData.Context.txtStep1
} -Label "Step 1"
New-UDStep -OnLoad {
New-UDElement -tag 'div' -Content { "Step 2" }
New-UDElement -tag 'div' -Content { "Previous data: $Body" }
New-UDTextbox -Id 'txtStep2' -Value $EventData.Context.txtStep2
} -Label "Step 2"
New-UDStep -OnLoad {
New-UDElement -tag 'div' -Content { "Step 3" }
New-UDElement -tag 'div' -Content { "Previous data: $Body" }
New-UDTextbox -Id 'txtStep3' -Value $EventData.Context.txtStep3
} -Label "Step 3"
} -OnFinish {
New-UDTypography -Text 'Nice! You did it!' -Variant h3
New-UDElement -Tag 'div' -Id 'result' -Content {$Body}
} -OnValidateStep {
$Context = $EventData
if ($Context.CurrentStep -eq 0 -and $Context.Context.txtStep1 -eq 'bad')
{
New-UDValidationResult
}
else
{
New-UDValidationResult -Valid -ActiveStep 2
}
}New-UDStepper -Steps {
New-UDStep -OnLoad {
New-UDElement -tag 'div' -Content { "Step 1" }
New-UDTextbox -Id 'txtStep1' -Value $EventData.Context.txtStep1
} -Label "Step 1"
New-UDStep -OnLoad {
New-UDElement -tag 'div' -Content { "Step 2" }
New-UDElement -tag 'div' -Content { "Previous data: $Body" }
New-UDTextbox -Id 'txtStep2' -Value $EventData.Context.txtStep2
} -Label "Step 2"
New-UDStep -OnLoad {
New-UDElement -tag 'div' -Content { "Step 3" }
New-UDElement -tag 'div' -Content { "Previous data: $Body" }
New-UDTextbox -Id 'txtStep3' -Value $EventData.Context.txtStep3
} -Label "Step 3"
} -OnFinish {
New-UDTypography -Text 'Nice! You did it!' -Variant h3
New-UDElement -Tag 'div' -Id 'result' -Content {$Body}
} -OnValidateStep {
New-UDValidationResult -Valid -DisablePrevious
}New-UDStepper -Steps {
New-UDStep -OnLoad {
New-UDElement -tag 'div' -Content { "Step 1" }
New-UDTextbox -Id 'txtStep1' -Value $EventData.Context.txtStep1
} -Label "Step 1"
New-UDStep -OnLoad {
New-UDElement -tag 'div' -Content { "Step 2" }
New-UDElement -tag 'div' -Content { "Previous data: $Body" }
New-UDTextbox -Id 'txtStep2' -Value $EventData.Context.txtStep2
} -Label "Step 2"
New-UDStep -OnLoad {
New-UDElement -tag 'div' -Content { "Step 3" }
New-UDElement -tag 'div' -Content { "Previous data: $Body" }
New-UDTextbox -Id 'txtStep3' -Value $EventData.Context.txtStep3
} -Label "Step 3"
} -OnFinish {
New-UDTypography -Text 'Nice! You did it!' -Variant h3
New-UDElement -Tag 'div' -Id 'result' -Content {$Body}
} -Orientation 'vertical'New-UDForm -Content {
New-UDTextbox -Id 'txtTextField'
New-UDCheckbox -Id 'chkCheckbox'
} -OnSubmit {
Show-UDToast -Message $EventData.txtTextField
Show-UDToast -Message $EventData.chkCheckbox
}
New-UDForm -Content {
New-UDTextbox -Id 'txtTextfield'
New-UDCheckbox -Id 'chkCheckbox'
} -OnSubmit {
Show-UDToast -Message $EventData.txtTextfield
Show-UDToast -Message $EventData.chkCheckbox
}New-UDForm -Content {
New-UDRow -Columns {
New-UDColumn -SmallSize 6 -LargeSize 6 -Content {
New-UDTextbox -Id 'txtFirstName' -Label 'First Name'
}
New-UDColumn -SmallSize 6 -LargeSize 6 -Content {
New-UDTextbox -Id 'txtLastName' -Label 'Last Name'
}
}
New-UDTextbox -Id 'txtAddress' -Label 'Address'
New-UDRow -Columns {
New-UDColumn -SmallSize 6 -LargeSize 6 -Content {
New-UDTextbox -Id 'txtState' -Label 'State'
}
New-UDColumn -SmallSize 6 -LargeSize 6 -Content {
New-UDTextbox -Id 'txtZipCode' -Label 'ZIP Code'
}
}
} -OnSubmit {
Show-UDToast -Message $EventData.txtFirstName
Show-UDToast -Message $EventData.txtLastName
}New-UDForm -Content {
New-UDTextbox -Id 'txtTextfield'
} -OnSubmit {
New-UDTypography -Text $EventData.txtTextfield
}New-UDForm -Content {
New-UDTextbox -Id 'txtValidateForm'
} -OnValidate {
$FormContent = $EventData
if ($FormContent.txtValidateForm -eq $null -or $FormContent.txtValidateForm -eq '') {
New-UDFormValidationResult -ValidationError "txtValidateForm is required"
} else {
New-UDFormValidationResult -Valid
}
} -OnSubmit {
Show-UDToast -Message $Body
}New-UDButton -Text 'On Form' -OnClick {
Show-UDModal -Content {
New-UDForm -Content {
New-UDTextbox -Label 'Hello'
} -OnSubmit {
Show-UDToast -Message 'Submitted!'
Hide-UDModal
} -OnCancel {
Hide-UDModal
}
}
}New-UDForm -Content {
} -OnSubmit {
Set-UDElement -Id 'results' -Content {
New-UDCard -Content { "Hello " + (Get-Date) }
}
}
New-UDElement -Id 'results' -Tag 'div'New-UDForm -Schema @{
title = "Test Form"
type = "object"
properties = @{
name = @{
type = "string"
}
age = @{
type = "number"
}
}
} -OnSubmit {
# $EventData.formData.name
# $EventData.formData.age
}New-UDForm -Schema @{
title = "Test Form"
type = "object"
properties = @{
name = @{
type = "string"
}
age = @{
type = "number"
}
}
required = @('name')
} -OnSubmit {
# $EventData.formData.name
# $EventData.formData.age
}New-UDForm -Schema @{
title = "Test"
type = "object"
properties = @{
hostname = @{
title = "Hostname"
type = "string"
}
ipaddress= @{
title = "IP Address"
type = "string"
format = "ipv4"
}
description = @{
title = "Server Description"
type = "string"
}
servertype = @{
title = "Server Type"
type = "string"
enum = "App","DB"
}
environment = @{
title = "Environment"
type = "string"
enum = "Prod", "Dev" , "QA"
}
}
required = @('hostname','ipaddress','description','servertype','environment')
} -uiSchema @{
"ui:order" = @('environment','hostname','ipaddress','description')
} -OnSubmit {
Show-UDModal -Content {
New-UDTypography -Text $EventData.formData
} -Footer {
New-UDButton -Text "Close" -OnClick {Hide-UDModal}
} -Persistent
}New-UDForm -Schema @{
title = "Test Form"
type = "array"
items = @{
type = "object"
properties = @{
name = @{
type = "string"
}
age = @{
type = "number"
}
}
}
} -OnSubmit {
# $EventData[0].formData.name
# $EventData[0].formData.age
}New-UDForm -Script "Script.ps1" -OutputType 'text'
Charting components for Universal Dashboard.
Universal Dashboard provides several built-in charting solutions to help visualize your data retrieved from PowerShell.
Universal Dashboard integrates with ChartJS.
To create a chart, use New-UDChartJS and New-UDChartJSData. The below chart shows the top ten CPU using processes.
A bubble chart consists of x and y coordinates and an r value for the radius of the circles.
Colors can be defined using the various color parameters of New-UDChartJS.
By default, you do not need to define data sets manually. A single data set is created automatically when you use the -DataProperty and -LabelProperty parameters. If you want to define multiple data sets for a single chart, you can use the -Dataset property in conjunction with New-UDChartJSDataset.
You can take action when a user clicks the chart. This example shows a toast with the contents of the $Body variable. The $Body variable contains a JSON string with information about the elements that were clicked.
You can use New-UDDynamic to create charts that refresh on an interval.
Monitors are a special kind of chart that tracks data over time. Monitors are good for displaying data such as server performance stats that change frequently. You return a single value from a monitor and it is graphed automatically over time.
The New-UDChartJS cmdlet supports accepting advanced ChartJS options. You can use the -Options parameter to pass in a hashtable.
This example hides the legend.
You can include a title with the title option.
Universal Dashboard integrates with . Below you will find examples and documentation for using these charts.
All the Nivo charts can be created with New-UDNivoChart. You will specify a switch parameter for the different types of charts. Each chart type will take a well defined data format via the -Data parameter.
Nivo provides the ability to specify patterns to display over data sets. You can configure these patterns with New-UDNivoPattern and New-UDNivoFill .
Nivo charts provide responsive widths so they will resize automatically when placed on a page or the browser is resized. A height is required when using responsive widths.
Like many components in Universal Dashboard v3, Nivo charts do not define auto-refresh properties themselves. Instead, you can take advantage of New-UDDynamic to refresh the chart on an interval.
Nivo charts support OnClick event handlers. You will be provided with information about the data set that was clicked as JSON.
Data grid component for Universal Dashboard.
The UDDataGrid component is an advanced version of the table that is useful for displaying large amounts of data. It supports many of the same features as the table but also provides complex filtering, row virtualization, multi-column sort and more.
Data grids load their data via the -LoadRows event handler. You will need to return a hashtable that contains the row data and the total number of rows.
Prior to version 3.3., column field names must be in camel case. For example, the property Name would need to be name while the property FirstName would need to be firstName.
Columns are customizable using hashtables. You can find the supported properties below.
Align
How to align the data within the column.
Left, Center, Right
CellClassName
A CSS class to apply to cells in this column
string
ColSpan
The number of columns this column should span.
Integer
You can render custom components in columns by specifying render within the column hashtable. You can access the current row's data by using the $EventData or $Row variable
In this example, the number is shown in the name column with a New-UDTypography component.
Column fluidity or responsiveness can be achieved by setting the flex property of a column.
The flex property accepts a value between 0 and ∞. It works by dividing the remaining space in the grid among all flex columns in proportion to their flex value.
For example, consider a grid with a total width of 500px that has three columns: the first with width: 200; the second with flex: 1; and the third with flex: 0.5. The first column will be 200px wide, leaving 300px remaining. The column with flex: 1 is twice the size of flex: 0.5, which means that final sizes will be: 200px, 200px, 100px.
To set a minimum and maximum width for a flex column set the minWidth and the maxWidth property on the column.
The -LoadRows parameter is used to return data for the data grid. Table state will be provided to the event handler as $EventData. You will find the following properties within the $EventData object.
Filter
A filter object that you can use to construct filters against your data.
Hashtable
Page
The current page. Starts at 0.
Integer
PageSize
The number of records in a page.
Integer
To implement paging, you can access the page and pageSize properties of the $EventData variable.
The filter hashtable is included in the $EventData for the -LoadRows event handler when a filter is defined. The hashtable has a structure as follows.
The items property contains an array of columns, operators and values. You can use these to filter your data.
ColumnField
The name of the field to filter
String
OperatorValue
The type of operator to use when filtering the data.
String
Value
The value used to filter
Object
The link operator field is used to specify the link between the filters. This can be and or or.
The $EventData object will contain a Sort property when the user sorts the data grid. It contains properties for each column that is sorted. The properties will start as 0 and increment as more columns are sorted.
For example, you can access the first sorted column as follows.
You will also receive the sort direction for each column.
Field
The field to sort.
String
Sort
The direction to sort the field.
asc, desc
You can use the -LoadDetailedContent event handler to display additional information about the row you are expanding. Information about the current row is available in $EventData.row.
Tables provide editor support by specifying the -OnEdit event handler. The new row data will be provided as $EventData. You can chose to return updated row information (for example, adjusting something the user has entered) and return it from the event handler. If you do not return anything, the row will reflect what the user entered.
The $EventData has the following format.
Ensure that you provide the editable property to each column you wish for the user to edit.
To override the default export functionality, use the -OnExport event handler. $EventData will be an array of rows with their values. You should use Out-UDDataGridExport to return the data from -OnExport.
In this example, we generate an array of 10,000 records. We will create a new function, Out-UDDataGridData to manage the paging, sorting and filtering.
In this example, we'll query the PowerShell Universal database with dbatools.
New-UDDataGrid -LoadRows {
$Data = @(
@{ Name = 'Adam'; Number = Get-Random}
@{ Name = 'Tom'; Number = Get-Random}
@{ Name = 'Sarah'; Number = Get-Random}
)
@{
rows = $Data
rowCount = $Data.Length
}
} -Columns @(
@{ field = "name"}
@{ field = "number"}
) -AutoHeightNew-UDDataGrid -LoadRows {
$Rows = 1..100 | % {
@{ Name = 'Adam'; Number = Get-Random}
}
@{
rows = $Rows
rowCount = $Rows.Length
}
} -Columns @(
@{ field = "name"; render = { New-UDTypography $EventData.number }}
@{ field = "number"}
) -AutoHeightNew-UDDataGrid -LoadRows {
$Rows = 1..100 | % {
@{ Name = 'Adam'; Number = "This column is a very long string. This column is a very long string. This column is a very long string. This column is a very long string. This column is a very long string. This column is a very long string."}
}
@{
rows = $Rows
rowCount = $Rows.Length
}
} -Columns @(
@{ field = "name"; render = { New-UDTypography $EventData.number }}
@{ field = "number"; flex = 1.0}
) -AutoHeightNew-UDDataGrid -LoadRows {
$Rows = 1..100 | % {
@{ Name = 'Adam'; Number = Get-Random}
}
@{
rows = $Rows | Select-Object -First $EventData.pageSize -Skip ($EventData.page * $EventData.pageSize)
rowCount = $Rows.Length
}
} -Columns @(
@{ field = "name"; }
@{ field = "number"}
) -AutoHeight -Pagination@{
items = @(
@{
columnField = "Name"
overatorValue = "contains"
value = "test"
}
)
linkOperator = "and"
}$EventData.Sort.'0'.fieldNew-UDDataGrid -LoadRows {
$Data = @(
@{ Name = 'Adam'; Number = Get-Random }
@{ Name = 'Tom'; Number = Get-Random }
@{ Name = 'Sarah'; Number = Get-Random }
)
@{
rows = $Data
rowCount = $Data.Length
}
} -Columns @(
@{ field = "Name" }
@{ field = "number" }
) -AutoHeight -LoadDetailContent {
Show-UDToast $Body
New-UDAlert -Text $EventData.row.Name
}@{
newRow = @{}
oldRow = @{}
}New-UDDataGrid -LoadRows {
$Data = @(
@{ Name = 'Adam'; number = Get-Random }
@{ Name = 'Tom'; number = Get-Random }
@{ Name = 'Sarah'; number = Get-Random }
)
@{
rows = $Data
rowCount = $Data.Length
}
} -Columns @(
@{ field = "Name"; editable = $true }
@{ field = "number" ; editable = $true }
) -AutoHeight -OnEdit {
Show-UDToast "Editing $Body"
}New-UDDataGrid -LoadRows {
$Data = @(
@{ Name = 'Adam'; Number = Get-Random}
@{ Name = 'Tom'; Number = Get-Random}
@{ Name = 'Sarah'; Number = Get-Random}
)
@{
rows = $Data
rowCount = $Data.Length
}
} -Columns @(
@{ field = "name"}
@{ field = "number"}
) -AutoHeight -OnExport {
$Data = $EventData | Select-Object -Expand name
Out-UDDataGridExport -Data $Data -FileName 'export.txt' | Out-String
}New-UDDashboard -Title 'PowerShell Universal' -Content {
$Data = 1..10000 | % {
@{ Name = 'Adam'; Number = Get-Random }
}
New-UDDataGrid -LoadRows {
$Data | Out-UDDataGridData -Context $EventData
} -Columns @(
@{ field = "name"; render = {
New-UDButton -Icon (New-UDIcon -Icon User) -OnClick { Show-UDToast $EventData.Name } }
}
@{ field = "number" }
) -AutoHeight -Pagination
} function Out-UDSQLDataGrid {
param(
[Parameter(Mandatory)]
$Context,
[Parameter(Mandatory)]
[string]$Table,
[Parameter(Mandatory)]
[string]$SqlInstance,
[Parameter(Mandatory)]
[string]$Database
)
End {
$simpleFilter = @()
if($null -ne $Context.Filter.Items -and $Context.Filter.Items.Count -gt 0) {
$linkOperator = $Context.Filter.linkOperator #The link operator is 'AND' or 'OR'. It will always be one or the other for all properties
foreach ($item in $Context.Filter.Items) {
$simpleFilter += [PSCustomObject]@{
Property = $item.columnField
Value = $item.Value
Operator = $item.operatorValue
}
}
}
if($null -ne $simpleFilter -and $simpleFilter.Count -gt 0) {
$count = 1
foreach($filter in $simpleFilter) {
if ($count -gt 1) {
$SqlFilter += " $($linkOperator) "
} else {
$SqlFilter += " WHERE "
}
switch ($filter.Operator) {
"contains" { $SqlFilter += " $($filter.Property) LIKE '%$($filter.Value)%' " }
"equals" { $SqlFilter += " $($filter.Property) = '$($filter.Value)' " }
"startsWith" { $SqlFilter += " $($filter.Property) LIKE '$($filter.Value)%' " }
"endsWith" { $SqlFilter += " $($filter.Property) LIKE '%$($filter.Value)' " }
"isAnyOf" {
$count = 1
foreach($val in $filter.Value){
if($count -gt 1) {
$list += ", '$val'"
} else {
$list += "'$val'"
}
$count += 1
}
$SqlFilter += " $($filter.Property) IN ($($list)) "
}
"isempty" { $SqlFilter += " TRIM ($($filter.Property)) IS NULL " }
"isnotempty" { $SqlFilter += " TRIM ($($filter.Property)) IS NOT NULL " }
"notequals" { $SqlFilter += " $($filter.Property) != '$($filter.Value)' " }
"notcontains" { $SqlFilter += " $($filter.Property) NOT LIKE '%$($filter.Value)%' " }
}
$count += 1
}
} else {
$SqlFilter = $null
}
$totalCount = (Invoke-DbaQuery -SqlInstance $SqlInstance -Database $Database -Query "SELECT COUNT(*) As Count FROM $Table $SqlFilter" -SqlParameters $SqlParameters).Count
$sort = $Context.Sort.'0'
if ($sort)
{
$sqlSort = "ORDER BY $($sort.field) $($sort.Sort) "
} else {
$sqlSort = "ORDER BY (SELECT NULL)"
}
$sqlPage = "OFFSET $($Context.Page * $Context.PageSize) ROWS FETCH NEXT $($Context.PageSize) ROWS ONLY;"
if($null -ne $SqlFilter) {
$Query = "SELECT * FROM $Table $sqlFilter $sqlSort $sqlPage"
} else {
$Query = "SELECT * FROM $Table $sqlSort $sqlPage"
}
$Rows = Invoke-DbaQuery -SqlInstance $SqlInstance -Database $Database -Query $Query -As PSObject -SqlParameters $SqlParameters
@{
rows = [Array]$Rows
rowCount = $TotalCount
}
}
}
New-UDDashboard -Title 'PowerShell Universal' -Content {
New-UDDataGrid -LoadRows {
Out-UDSqlDataGrid -Context $EventData -SqlInstance "(localdb)\MSSQLLocalDb" -Database "PSU" -Table "Job"
} -Columns @(
@{ field = "id"; }
@{ field = "startTime"; }
@{ field = "status"; render = {
if ($EventData.Status -eq 2) {
New-UDAlert -Severity 'Success' -Text 'Success'
}
if ($EventData.Status -eq 3) {
New-UDAlert -Severity 'Error' -Text 'Failed'
}
} }
) -AutoHeight -Pagination
} $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10
New-UDChartJS -Type 'bar' -Data $Data -DataProperty CPU -LabelProperty ProcessName $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10
New-UDChartJS -Type 'bar' -Data $Data -DataProperty CPU -LabelProperty ProcessName $GraphPrep = @(
@{ RAM = "Server1"; AvailableRam = 128; UsedRAM = 10 }
@{ RAM = "Server2"; AvailableRam = 64; UsedRAM = 63 }
@{ RAM = "Server3"; AvailableRam = 48; UsedRAM = 40 }
@{ RAM = "Server4"; AvailableRam = 64;; UsedRAM = 26 }
@{ RAM = "Server5"; AvailableRam = 128; UsedRAM = 120 }
)
$AvailableRamDataSet = New-UDChartJSDataset -DataProperty AvailableRAM -Label 'Available' -BackgroundColor blue
$UsedRamDataset = New-UDChartJSDataset -DataProperty UsedRAM -Label 'Used' -BackgroundColor red
$Options = @{
Type = 'bar'
Data = $GraphPrep
Dataset = @($AvailableRamDataSet, $UsedRamDataset)
LabelProperty = "RAM"
Options = @{
scales = @{
xAxes =
@{
stacked = $true
}
yAxes =
@{
stacked = $true
}
}
}
}
New-UDChartJS @Options $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10
New-UDChartJS -Type 'bar' -Data $Data -DataProperty CPU -LabelProperty ProcessName -Options @{
indexAxis = "y"
plugins = @{
legend = @{
position = "right"
}
}
}p$Data = @(
@{ x = 1; y = 10; r = 15 }
@{ x = 12; y = 25; r = 35 }
@{ x = 8; y = 10; r = 95 }
@{ x = 6; y = 95; r = 25 }
)
New-UDChartJS -Type 'bubble' -Data $Data $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10
New-UDChartJS -Type 'line' -Data $Data -DataProperty CPU -LabelProperty ProcessName $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10
New-UDChartJS -Type 'doughnut' -Data $Data -DataProperty CPU -LabelProperty ProcessName $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10
New-UDChartJS -Type 'pie' -Data $Data -DataProperty CPU -LabelProperty ProcessName $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10
New-UDChartJS -Type 'radar' -Data $Data -DataProperty CPU -LabelProperty ProcessName $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10
$Options = @{
Type = 'bar'
Data = $Data
BackgroundColor = 'Red'
BorderColor = '#c61d4a'
HoverBackgroundColor = 'Blue'
HoverBorderColor = '#451dc6'
DataProperty = 'CPU'
LabelProperty = 'ProcessName'
}
New-UDChartJS @Options$Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10
$CPUDataset = New-UDChartJSDataset -DataProperty CPU -Label CPU -BackgroundColor '#126f8c'
$MemoryDataset = New-UDChartJSDataset -DataProperty HandleCount -Label 'Handle Count' -BackgroundColor '#8da322'
$Options = @{
Type = 'bar'
Data = $Data
Dataset = @($CPUDataset, $MemoryDataset)
LabelProperty = "ProcessName"
}
New-UDChartJS @Options $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10
$Options = @{
Type = 'bar'
Data = $Data
DataProperty = 'CPU'
LabelProperty = "ProcessName"
OnClick = {
Show-UDToast -Message $Body
}
}
New-UDChartJS @OptionsNew-UDDynamic -Content {
$Data = 1..10 | % {
[PSCustomObject]@{ Name = $_; value = get-random }
}
New-UDChartJS -Type 'bar' -Data $Data -DataProperty Value -Id 'test' -LabelProperty Name -BackgroundColor Blue
} -AutoRefresh -AutoRefreshInterval 1New-UDChartJSMonitor -LoadData {
Get-Random -Max 100 | Out-UDChartJSMonitorData
} -Labels "Random" -ChartBackgroundColor "#297741" -RefreshInterval 1 $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10
New-UDChartJS -Type 'bar' -Data $Data -DataProperty CPU -LabelProperty ProcessName -Options @{
legend = @{
display = $false
}
}$Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10
New-UDChartJS -Type 'bar' -Data $Data -DataProperty CPU -LabelProperty ProcessName -Options @{
plugins = @{
legend = @{
title = @{
display = $true
text = 'Bar Chart'
}
}
}
}$Data = 1..10 | ForEach-Object {
$item = Get-Random -Max 1000
[PSCustomObject]@{
Name = "Test$item"
Value = $item
}
}
New-UDNivoChart -Id 'autoRefreshingNivoBar' -Bar -Keys "value" -IndexBy 'name' -Data $Data -Height 500 -Width 1000$Data = @(
@{
country = 'USA'
burgers = (Get-Random -Minimum 10 -Maximum 100)
fries = (Get-Random -Minimum 10 -Maximum 100)
sandwich = (Get-Random -Minimum 10 -Maximum 100)
}
@{
country = 'Germany'
burgers = (Get-Random -Minimum 10 -Maximum 100)
fries = (Get-Random -Minimum 10 -Maximum 100)
sandwich = (Get-Random -Minimum 10 -Maximum 100)
}
@{
country = 'Japan'
burgers = (Get-Random -Minimum 10 -Maximum 100)
fries = (Get-Random -Minimum 10 -Maximum 100)
sandwich = (Get-Random -Minimum 10 -Maximum 100)
}
)
$Pattern = New-UDNivoPattern -Dots -Id 'dots' -Background "inherit" -Color "#38bcb2" -Size 4 -Padding 1 -Stagger
$Fill = New-UDNivoFill -ElementId "fries" -PatternId 'dots'
New-UDNivoChart -Definitions $Pattern -Fill $Fill -Bar -Data $Data -Height 400 -Width 900 -Keys @('burgers', 'fries', 'sandwich') -IndexBy 'country'New-UDDynamic -Content {
$Data = 1..10 | ForEach-Object {
$item = Get-Random -Max 1000
[PSCustomObject]@{
Name = "Test$item"
Value = $item
}
}
New-UDNivoChart -Id 'autoRefreshingNivoBar' -Bar -Keys "Value" -IndexBy 'name' -Data $Data -Height 500 -Width 1000
} -AutoRefresh$Data = @(
@{
country = 'USA'
burgers = (Get-Random -Minimum 10 -Maximum 100)
fries = (Get-Random -Minimum 10 -Maximum 100)
sandwich = (Get-Random -Minimum 10 -Maximum 100)
}
@{
country = 'Germany'
burgers = (Get-Random -Minimum 10 -Maximum 100)
fries = (Get-Random -Minimum 10 -Maximum 100)
sandwich = (Get-Random -Minimum 10 -Maximum 100)
}
@{
country = 'Japan'
burgers = (Get-Random -Minimum 10 -Maximum 100)
fries = (Get-Random -Minimum 10 -Maximum 100)
sandwich = (Get-Random -Minimum 10 -Maximum 100)
}
)
New-UDNivoChart -Bar -Data $Data -Height 400 -Width 900 -Keys @('burgers', 'fries', 'sandwich') -IndexBy 'country' -OnClick {
Show-UDToast -Message $EventData -Position topLeft
}New-Example -Title 'Bar' -Description '' -Example {
$Data = 1..10 | ForEach-Object {
$item = Get-Random -Max 1000
[PSCustomObject]@{
Name = "Test$item"
Value = $item
}
}
New-UDNivoChart -Bar -Keys "Value" -IndexBy 'name' -Data $Data -Height 500 -Width 1000
}$TreeData = @{
Name = "root"
children = @(
@{
Name = "first"
children = @(
@{
Name = "first-first"
Count = 7
}
@{
Name = "first-second"
Count = 8
}
)
},
@{
Name = "second"
Count = 21
}
)
}
New-UDNivoChart -Bubble -Data $TreeData -Value "count" -Identity "name" -Height 500 -Width 800$Data = @()
for($i = 365; $i -gt 0; $i--) {
$Data += @{
day = (Get-Date).AddDays($i * -1).ToString("yyyy-MM-dd")
value = Get-Random
}
}
$From = (Get-Date).AddDays(-365)
$To = Get-Date
New-UDNivoChart -Calendar -Data $Data -From $From -To $To -Height 500 -Width 1000 -MarginTop 50 -MarginRight 130 -MarginBottom 50 -MarginLeft 60$Data = @(
@{
state = "idaho"
cats = 72307
dogs = 23429
moose = 23423
bears = 784
}
@{
state = "wisconsin"
cats = 2343342
dogs = 3453623
moose = 1
bears = 23423
}
@{
state = "montana"
cats = 9234
dogs = 3973457
moose = 23472
bears = 347303
}
@{
state = "colorado"
cats = 345973789
dogs = 0237234
moose = 2302
bears = 2349772
}
)
New-UDNivoChart -Heatmap -Data $Data -IndexBy 'state' -keys @('cats', 'dogs', 'moose', 'bears') -Height 500 -Width 1000 -MarginTop 50 -MarginRight 130 -MarginBottom 50 -MarginLeft 60[array]$Data = [PSCustomObject]@{
id = "DataSet"
data = (1..20 | ForEach-Object {
$item = Get-Random -Max 500
[PSCustomObject]@{
x = "Test$item"
y = $item
}
})
}
New-UDNivoChart -Line -Data $Data -Height 500 -Width 1000 -LineWidth 1$Data = 1..10 | ForEach-Object {
@{
"Adam" = Get-Random
"Alon" = Get-Random
"Lee" = Get-Random
"Frank" = Get-Random
"Bill" = Get-Random
}
}
New-UDNivoChart -Stream -Data $Data -Height 500 -Width 1000 -Keys @("adam", "alon", "lee", "frank", "bill")$TreeData = @{
Name = "root"
children = @(
@{
Name = "first"
children = @(
@{
Name = "first-first"
Count = 7
}
@{
Name = "first-second"
Count = 8
}
)
},
@{
Name = "second"
Count = 21
}
)
}
New-UDNivoChart -Treemap -Data $TreeData -Value "count" -Identity "name" -Height 500 -Width 800Description
A tooltip description of the column
string
DisableColumnMenu
Disable the column menu for this column
boolean
DisableExport
Disable exporting of the data in this column
boolean
Editable
Whether or not this column can be edited
boolean
Field
The field (property) to use when displaying the value in the column.
String
Filterable
Whether this column can be used in filters.
boolean
Flex
The flex property accepts a value between 0 and ∞. It works by dividing the remaining space in the grid among all flex columns in proportion to their flex value.
float
HeaderAlign
How to align header text.
left, center, right
HeaderName
The title to display in the header.
String
Hide
Whether to hide the column
boolean
Hideable
Whether a column can be hidden by the user.
boolean
HideSortIcon
Whether to hide the sort icon for the column
boolean
MaxWidth
The maximum width of the column
integer
MinWidth
The minimum width of the column
integer
Pinnable
Whether the column can be pinned.
boolean
Render
A script block to render components in the column
ScriptBlock
Resizable
Whether the column can be resized
boolean
Sortable
Whether the column can be sorted.
boolean
Type
The type of data within the column
string, number, date, dateTime, boolean, actions
Width
How wide the column should be in pixels.
Integer
Sort
The sort options for the table
Hashtable
Table component for Universal Dashboard
Tables display sets of data. They can be fully customized.
Tables display information in a way that’s easy to scan, so that users can look for patterns and insights. They can be embedded in primary content, such as cards.
A simple example with no frills. Table columns are defined from the data.
Define custom columns for your table.
Define column rendering. Sorting and exporting still work for the table.
Column width can be defined using the -Width parameter. You can also decide to truncate columns that extend past that width.
You can configure custom filters per column. The table supports text, select, fuzzy , slider, range, date , number, and autocomplete filters.
To enable search, use the -ShowSearch parameter on New-UDTable.
When using custom columns, you will need to add the -IncludeInSearch parameter to the columns you'd like to include in the search.
Process data on the server so you can perform paging, filtering, sorting and searching in systems like SQL. To implement a server-side table, you will use the -LoadData parameter. This parameter accepts a ScriptBlock. The $EventData variable includes information about the state of the table. You can use cmdlets to process the data based on this information.
The $EventData object contains the following properties.
You may want to allow the user to take action on the current set of displayed data. To do so, use Get-UDElement in the input object you want to retrieve the data from and get the table by Id. Once you have the element, you can use the CurrentData property of the element to get an array of currently displayed rows.
By default, paging is disable and tables will grow based on how many rows of data you provide. You can enable paging by using the -ShowPagination cmdlet (alias -Paging). You can configure the page size using the -PageSize cmdlet.
By default, the page size selector provides an option to show all rows. If you want to prevent users from doing this, use the -DisablePageSizeAll cmdlet.
You can change the location of the pagination control by using the -PaginationLocation parameter. It accepts top, bottom and both.
To enable sorting for a table, use the -ShowSort parameter. When you enable sorting, you will be able to click the table headers to sort the table by clicking the headers. By default, multi-sort is enabled. To multi-hold shift and click a column header.
You can control which columns can be sorted by using New-UDTableColumn and -ShowSort parameter.
By default, the sorting of a table has 3 states. Unsorted, ascending and descending. If you would like to disable the unsorted state, use the -DisableSortRemove parameter of New-UDTable.
Tables support selection of rows. You can create an event handler for the OnRowSelected parameter to receive when a new row is selected or unselected or you can use Get-UDElement to retrieve the current set of selected rows.
The following example creates a table with row selection enabled. A toast is show when clicking the row or when clicking the GET Rows button.
The $EventData variable for the -OnRowSelected event will include all the columns as properties and a selected property as to whether the row was selected or unselected.
For example, the service table data would look like this.
You can include additional information within the table by using the -OnRowExpand parameter of New-UDTable. It accepts a ScriptBlock that you can use to return additional components.
Tables support exporting the data within the table. You can export as CSV, XLSX, JSON or PDF. You can define which columns to include in an export and choose to export just the current page or all the data within the table.
Hidden columns allow you to include data that is not displayed in the table but is included in the exported data.
The following hides the StartType column from the user but includes it in the export.
You can control the export functionality with a PowerShell script block. This is useful when exporting from server-side sources like SQL server tables.
In this example, I have a SQL table that contains podcasts. When exporting, you will receive information about the current state of the table to allow you to customize what data is exported.
You can decide which export options to present to your users using the -ExportOption cmdlet. The following example would only show the CSV export option.
You can use the -TextOption parameter along with the New-UDTableTextOption cmdlet to set text fields within the table.
You can externally refresh a table by putting the table within a dynamic region and using Sync-UDElement.
This example creates a button to refresh the table.
If you use the -LoadData parameter, you can sync the table directly. This has the benefit of maintaining the table state, such as the page and filtering, after the refresh.
You can use the -ShowRefresh parameter to provide a refresh button for server-side tables.
You can use a theme to create a table with alternating row colors.
$Data = @(
@{Dessert = 'Frozen yoghurt'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Ice cream sandwich'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Eclair'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Cupcake'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Gingerbread'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
)
New-UDTable -Data $Data
int
The current page (starting with 0).
PageSize
int
The selected page size.
Properties
string[]
An array of properties being shown in the table.
Search
string
A search string provided by the user.
TotalCount
int
The total number of records before filtering or paging.
Filters
Hashtable[] @{ id = 'fieldName'
value = 'filterValue' }
A list of filter values. Each hashtable has an Id and a Value property.
OrderBy
Hashtable @{ field = "fieldName" }
Property name to sort by.
OrderDirection
string
asc or desc depending on the sort order.
Page
$Data = @(
@{Dessert = 'Frozen yoghurt'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Ice cream sandwich'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Eclair'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Cupcake'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Gingerbread'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
)
$Columns = @(
New-UDTableColumn -Property Dessert -Title "A Dessert"
New-UDTableColumn -Property Calories -Title Calories
New-UDTableColumn -Property Fat -Title Fat
New-UDTableColumn -Property Carbs -Title Carbs
New-UDTableColumn -Property Protein -Title Protein
)
New-UDTable -Id 'customColumnsTable' -Data $Data -Columns $Columns$Data = @(
@{Dessert = 'Frozen yoghurt'; Calories = 1; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Ice cream sandwich'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Eclair'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Cupcake'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Gingerbread'; Calories = 200; Fat = 6.0; Carbs = 24; Protein = 4.0}
)
$Columns = @(
New-UDTableColumn -Property Dessert -Title Dessert -Render {
New-UDButton -Id "btn$($EventData.Dessert)" -Text "Click for Dessert!" -OnClick { Show-UDToast -Message $EventData.Dessert }
}
New-UDTableColumn -Property Calories -Title Calories
New-UDTableColumn -Property Fat -Title Fat
New-UDTableColumn -Property Carbs -Title Carbs
New-UDTableColumn -Property Protein -Title Protein
)
New-UDTable -Data $Data -Columns $Columns -Sort -Export$Data = @(
@{Dessert = 'Frozen yoghurt'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Ice cream sandwich'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Eclair'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Cupcake'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Gingerbread'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
)
$Columns = @(
New-UDTableColumn -Property Dessert -Title Dessert -Render {
New-UDButton -Id "btn$($EventData.Dessert)" -Text "Click for Dessert!" -OnClick { Show-UDToast -Message $EventData.Dessert }
}
New-UDTableColumn -Property Calories -Title Calories -Width 5 -Truncate
New-UDTableColumn -Property Fat -Title Fat
New-UDTableColumn -Property Carbs -Title Carbs
New-UDTableColumn -Property Protein -Title Protein
)
New-UDTable -Data $Data -Columns $Columns -Sort$Data = @(
@{Dessert = 'Frozen yoghurt'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Ice cream sandwich'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Eclair'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Cupcake'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Gingerbread'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
)
$Columns = @(
New-UDTableColumn -Property Dessert -Title "A Dessert" -Filter -FilterType AutoComplete
New-UDTableColumn -Property Calories -Title Calories -Filter -FilterType Range
New-UDTableColumn -Property Fat -Title Fat -Filter -FilterType Range
New-UDTableColumn -Property Carbs -Title Carbs -Filter -FilterType Range
New-UDTableColumn -Property Protein -Title Protein -Filter -FilterType Range
)
New-UDTable -Id 'customColumnsTable' -Data $Data -Columns $Columns -ShowFilter$Data = @(
@{Dessert = 'Frozen yoghurt'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Ice cream sandwich'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Eclair'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Cupcake'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Gingerbread'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
)
New-UDTable -Data $Data -ShowSearch$Data = @(
@{Dessert = 'Frozen yoghurt'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Ice cream sandwich'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Eclair'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Cupcake'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Gingerbread'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
)
$Columns = @(
New-UDTableColumn -Property Dessert -Title "A Dessert" -IncludeInSearch
New-UDTableColumn -Property Calories -Title Calories
New-UDTableColumn -Property Fat -Title Fat
New-UDTableColumn -Property Carbs -Title Carbs
New-UDTableColumn -Property Protein -Title Protein
)
New-UDTable -Id 'customColumnsTable' -Data $Data -Columns $Columns -ShowSearch$Columns = @(
New-UDTableColumn -Property Name -Title "Name" -ShowFilter
New-UDTableColumn -Property Value -Title "Value" -ShowFilter
)
$Data = 1..1000 | ForEach-Object {
[PSCustomObject]@{
Name = "Record-$_"
Value = $_
}
}
New-UDTable -Columns $Columns -LoadData {
foreach($Filter in $EventData.Filters)
{
$Data = $Data | Where-Object -Property $Filter.Id -Match -Value $Filter.Value
}
$TotalCount = $Data.Count
if (-not [string]::IsNullOrEmpty($EventData.OrderBy.Field))
{
$Descending = $EventData.OrderDirection -ne 'asc'
$Data = $Data | Sort-Object -Property ($EventData.orderBy.Field) -Descending:$Descending
}
$Data = $Data | Select-Object -First $EventData.PageSize -Skip ($EventData.Page * $EventData.PageSize)
$Data | Out-UDTableData -Page $EventData.Page -TotalCount $TotalCount -Properties $EventData.Properties
} -ShowFilter -ShowSort -ShowPagination$Columns = @(
New-UDTableColumn -Property Name -Title "Name" -ShowFilter
New-UDTableColumn -Property Value -Title "Value" -ShowFilter
)
$Data = 1..1000 | ForEach-Object {
@{
Name = "Record-$_"
Value = $_
}
}
New-UDButton -Text 'Get Filtered Data' -OnClick {
$Element = Get-UDElement -Id 'filteredTable'
Show-UDModal -Content {
New-UDElement -Tag 'pre' -Content {
$Element | ConvertTo-Json
}
}
}
New-UDTable -Id 'filteredTable' -Columns $Columns -LoadData {
foreach($Filter in $EventData.Filters)
{
$Data = $Data | Where-Object -Property $Filter.Id -Match -Value $Filter.Value
}
$TotalCount = $Data.Count
if (-not [string]::IsNullOrEmpty($EventData.OrderBy))
{
$Descending = $EventData.OrderDirection -ne 'asc'
$Data = $Data | Sort-Object -Property $EventData.orderBy -Descending:$Descending
}
$Data = $Data | Select-Object -First $EventData.PageSize -Skip ($EventData.Page * $EventData.PageSize)
$Data | Out-UDTableData -Page $EventData.Page -TotalCount $TotalCount -Properties $EventData.Properties
} -ShowFilter -ShowSort -ShowPagination$Data = @(
@{Dessert = 'Frozen yoghurt'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Ice cream sandwich'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Eclair'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Cupcake'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Gingerbread'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
)
New-UDTable -Data $Data -Paging -PageSize 2$Data = @(
@{Dessert = 'Frozen yoghurt'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Ice cream sandwich'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Eclair'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Cupcake'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Gingerbread'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
)
New-UDTable -Data $Data -ShowSort @{Dessert = 'Eclair'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Cupcake'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Gingerbread'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
)
$Columns = @(
New-UDTableColumn -Property Dessert -Title "A Dessert" -ShowSort
New-UDTableColumn -Property Calories -Title Calories
New-UDTableColumn -Property Fat -Title Fat
New-UDTableColumn -Property Carbs -Title Carbs -ShowSort
New-UDTableColumn -Property Protein -Title Protein -ShowSort
)
New-UDTable -Id 'customColumnsTable' -Data $Data -Columns $Columns$Data = @(
@{Dessert = 'Frozen yoghurt'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Ice cream sandwich'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Eclair'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Cupcake'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Gingerbread'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
)
New-UDTable -Data $Data -ShowSort -DisableSortRemove$Data = try { get-service -ea Stop | select Name,@{n = "Status";e={ $_.Status.ToString()}},@{n = "StartupType";e={ $_.StartupType.ToString()}},@{n = "StartType";e={ $_.StartType.ToString()}} } catch {}
$Columns = @(
New-UDTableColumn -Property Name -Title "Service Name" -ShowSort -IncludeInExport -IncludeInSearch -ShowFilter -FilterType text
New-UDTableColumn -Property Status -Title Status -ShowSort -DefaultSortColumn -IncludeInExport -IncludeInSearch -ShowFilter -FilterType select
New-UDTableColumn -Property StartupType -Title StartupType -IncludeInExport -ShowFilter -FilterType select
New-UDTableColumn -Property StartType -Title StartType -IncludeInExport -ShowFilter -FilterType select
)
New-UDTable -Id 'service_table' -Data $Data -Columns $Columns -Title 'Services' -ShowSearch -ShowPagination -ShowSelection -Dense -OnRowSelection {
$Item = $EventData
Show-UDToast -Message "$($Item | out-string)"
}
New-UDButton -Text "GET Rows" -OnClick {
$value = Get-UDElement -Id "service_table"
Show-UDToast -Message "$( $value.selectedRows | Out-String )"
}@{
Id = 0
Name = 'AESMService',
Status = 'Running'
StartupType = 'AutomaticDelayedStart'
StartType = 'Automation'
selected = $true
}New-UDTable -Data (Get-Service) -OnRowExpand {
New-UDAlert -Text $EventData.DisplayName
} -Columns @(
New-UDTableColumn -Title 'Name' -Property 'Name'
New-UDTableColumn -Title 'Status' -Property 'Status'
)$Data = try { get-service -ea Stop | select Name,@{n = "Status";e={ $_.Status.ToString()}},@{n = "StartupType";e={ $_.StartupType.ToString()}},@{n = "StartType";e={ $_.StartType.ToString()}} } catch {}
$Columns = @(
New-UDTableColumn -Property Name -Title "Service Name" -IncludeInExport
New-UDTableColumn -Property Status -Title Status
New-UDTableColumn -Property StartupType
New-UDTableColumn -Property StartType -IncludeInExport
)
New-UDTable -Id 'service_table' -Data $Data -Columns $Columns -Title 'Services' -ShowSearch -ShowPagination -Dense -Export$Data = try { get-service -ea Stop | select Name,@{n = "Status";e={ $_.Status.ToString()}},@{n = "StartupType";e={ $_.StartupType.ToString()}},@{n = "StartType";e={ $_.StartType.ToString()}} } catch {}
$Columns = @(
New-UDTableColumn -Property Name -Title "Service Name" -IncludeInExport
New-UDTableColumn -Property Status -Title Status
New-UDTableColumn -Property StartupType
New-UDTableColumn -Property StartType -IncludeInExport -Hidden
)
New-UDTable -Id 'service_table' -Data $Data -Columns $Columns -Title 'Services' -ShowSearch -ShowPagination -Dense -Export$Columns = @(
New-UDTableColumn -Property Name -Title "Name" -ShowFilter -IncludeInExport
New-UDTableColumn -Property Value -Title "Value" -ShowFilter -IncludeInExport
)
$Data = 1..1000 | ForEach-Object {
[PSCustomObject]@{
Name = "Record-$_"
Value = $_
}
}
New-UDTable -Columns $Columns -LoadData {
foreach($Filter in $EventData.Filters)
{
$Data = $Data | Where-Object -Property $Filter.Id -Match -Value $Filter.Value
}
$TotalCount = $Data.Count
if (-not [string]::IsNullOrEmpty($EventData.OrderBy.Field))
{
$Descending = $EventData.OrderDirection -ne 'asc'
$Data = $Data | Sort-Object -Property ($EventData.orderBy.Field) -Descending:$Descending
}
$Data = $Data | Select-Object -First $EventData.PageSize -Skip ($EventData.Page * $EventData.PageSize)
$Data | Out-UDTableData -Page $EventData.Page -TotalCount $TotalCount -Properties $EventData.Properties
} -ShowFilter -ShowSort -ShowPagination -Export -OnExport {
$Query = $Body | ConvertFrom-Json
<# Query will contain
filters: []
orderBy: undefined
orderDirection: ""
page: 0
pageSize: 5
properties: (5) ["dessert", "calories", "fat", "carbs", "protein"]
search: ""
totalCount: 0
allRows: true
#>
$Data | ConvertTo-Json
}$Data = try { get-service -ea Stop | select Name,@{n = "Status";e={ $_.Status.ToString()}},@{n = "StartupType";e={ $_.StartupType.ToString()}},@{n = "StartType";e={ $_.StartType.ToString()}} } catch {}
$Columns = @(
New-UDTableColumn -Property Name -Title "Service Name" -IncludeInExport
New-UDTableColumn -Property Status -Title Status
New-UDTableColumn -Property StartupType
New-UDTableColumn -Property StartType -IncludeInExport
)
New-UDTable -Id 'service_table' -Data $Data -Columns $Columns -Title 'Services' -ShowSearch -ShowPagination -Dense -Export -ExportOption "csv"$Data = @(
@{Dessert = 'Frozen yoghurt'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Ice cream sandwich'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Eclair'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Cupcake'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Gingerbread'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0}
)
$Option = New-UDTableTextOption -Search "Search all these records"
New-UDTable -Data $Data -TextOption $Option -ShowSearchNew-UDDynamic -Id 'table' -Content {
$Data = Get-Service
New-UDTable -Data $Data -Paging
} -LoadingComponent {
"Loading"
}
New-UDButton -Text 'Refresh Table' -OnClick {
Sync-UDElement -Id 'table'
}New-UDButton -Text 'Table1' -OnClick { Sync-UDElement -Id 'Table1' }
$Columns = @(
New-UDTableColumn -Property Name -Title "Name" -ShowFilter -Render { $EventData.Name }
New-UDTableColumn -Property Value -Title "Value" -ShowFilter
)
New-UDTable -Columns $Columns -LoadData {
$Data = 1..1000 | ForEach-Object {
@{
Name = "Record-$_"
Value = $_
}
}
foreach($Filter in $EventData.Filters)
{
$Data = $Data | Where-Object -Property $Filter.Id -Match -Value $Filter.Value
}
$TotalCount = $Data.Count
if (-not [string]::IsNullOrEmpty($EventData.OrderBy))
{
$Descending = $EventData.OrderDirection -ne 'asc'
$Data = $Data | Sort-Object -Property $EventData.orderBy -Descending:$Descending
}
$Data = $Data | Select-Object -First $EventData.PageSize -Skip ($EventData.Page * $EventData.PageSize)
$Data | Out-UDTableData -Page $EventData.Page -TotalCount $TotalCount -Properties $EventData.Properties
} -ShowFilter -ShowSort -ShowPagination -Id 'Table1'$Columns = @(
New-UDTableColumn -Property Dessert -Title "A Dessert"
New-UDTableColumn -Property Calories -Title Calories
New-UDTableColumn -Property Fat -Title Fat
New-UDTableColumn -Property Carbs -Title Carbs
New-UDTableColumn -Property Protein -Title Protein
)
New-UDTable -ShowRefresh -Columns $Columns -LoadData {
$Query = $Body | ConvertFrom-Json
<# Query will contain
filters: []
orderBy: undefined
orderDirection: ""
page: 0
pageSize: 5
properties: (5) ["dessert", "calories", "fat", "carbs", "protein"]
search: ""
totalCount: 0
#>
@(
@{Dessert = 'Frozen yoghurt'; Calories = (Get-Random); Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Ice cream sandwich'; Calories = (Get-Random); Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Eclair'; Calories = (Get-Random); Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Cupcake'; Calories = (Get-Random); Fat = 6.0; Carbs = 24; Protein = 4.0}
@{Dessert = 'Gingerbread'; Calories = (Get-Random); Fat = 6.0; Carbs = 24; Protein = 4.0}
) | Out-UDTableData -Page 0 -TotalCount 5 -Properties $Query.Properties
}$Theme = @{
overrides = @{
MuiTableRow = @{
root = @{
'&:nth-of-type(odd)' = @{
backgroundColor = "rgba(0,0,0,0.04)"
}
}
head = @{
backgroundColor = "rgb(255,255,255) !important"
}
}
}
}
New-UDDashboard -Content {
$data = 1..10 | % { [PSCustomObject]@{ Item = $_}}
New-UDTable -ShowPagination -PageSize 10 -PageSizeOptions @(10, 10) -DisablePageSizeAll -Columns @(
New-UDTableColumn -Property 'Item' -Title 'Item' -Width 180 -Truncate
) -Data $Data -Dense -ShowSearch
} -Theme $Theme
