This is a recording of a live streaming session that Lee did about getting started with PowerShell Universal Dashboard. He went over the UD architecture, the basic controls and how to build your first website.

Generate Windows Form Command

You can now generate Windows Forms from PowerShell functions. In Visual Studio Code, if you execute the Generate Windows Form command from a ps1 file with a function defined in it, a form will be generated based on the parameters for the function. Check out the below video to see it in action.

ConvertTo-WinForm Cmdlet

The previous functionality is also exposed as a PowerShell cmdlet in the PowerShell Pro Tools module. You can pass in files, function definition, and cmdlet definitions to generate Windows Forms.

Today, we’ve released PowerShell Universal Dashboard v2.4.0-beta1. You can download the latest from the PowerShell Gallery. There are tons of awesome features and bug fixes.

Install-Module UniversalDashboard -AllowPrerelease

Features

Universal Dashboard Designer

One of the first feature requests I received for Universal Dashboard has now started to take shape. The Universal Dashboard Designer is beginning life as a drop and drop page creator. You can select from components, edit their properties and drag and drop them on the design surface. A script is generated in the background that will run in both Enterprise and Community. There is no need to write PowerShell script by hand to layout your dashboards with the UD Designer.

There is a hosted demo version of the designer available for you to play with now.

Give it a shot and provide us with feedback. If you install the UniversalDashboard module, you can run the designer locally be using Start-UDPageDesigner.

For a more complete run down on how to use the designer, take a look at my YouTube channel.

Material UI Components

In an effort to provide even more options to Universal Dashboard users, we have decided to start to migrate from the Materialize library to the Material UI library. In addition to having many more options, the library is also built on React so it integrates much easier into Universal Dashboard. Thanks to Alon Gvili, there are now 10 of the Material UI controls available in UD.

Avatar

Button

Card

Chip

Icon Button

Link

List

Paper

PDF

Typography

For example, if you’ve been using the existing New-UDCard, you’ll be happy to find the New-UDMUCard provides many more options for creating exceedingly customizable and beautiful widgets for your dashboards.

Grid Layout

The UD designer takes advantage of the the New-UDGridLayout command to organize components on the page. Unlike New-UDRow and New-UDColumn you don’t nest the layout and controls directly. The layout is defined via Hashtables or JSON. The leads to cleaner scripts that don’t nest deeply with scriptblocks. Additionally, you can provide the ability for users to drag and drop components themselves. Their state is saved to local browser storage so, whenever they load the dashboard, they have the same layout.

Simplified Custom React Components

Due to enhancements in custom component support, the entire Material UI component library is defined with only JavaScript and PowerShell. There is no need for C# code. This PowerShell to React binding makes it extremely easy to introduce new components. UD can load webpack chunks, CSS and even source maps for custom component libraries.

If you want to see what this looks like, head over to the Universal Dashboard GitHub repository. Full documentation for this feature is in the works and you’ll see many more React controls being brought into the UD ecosystem.

Access to Authorization Policies

You can now access Authorization Policies via Get-UDAuthorizationPolicy. Rather than just limiting which page a user has access to, you can now use this cmdlet in your Endpoints to adjust how the page itself behaves based on that authorization policy. For example, you can check the authorization policy to see if a user is an admin and then hide a control based on if they are not.

Support for VS Code Portable Mode

When installing trial and full licenses in VS Code Portable Mode, the license would be installed into a directory outside of the portable data folder. You can now store your license in the data file so it transfers with the VS Code instance.

Simply place the license in the data folder.

License in data folder

Fixed a bug with running an packaged executable from a path with a space

You can now execute packaged executables from a path with a space. The issue was that the $PSScriptRoot is set for the packaged script. The setting of this variable was what was causing the issue.

Fixed an issue converting from PowerShell To C# in Visual Studio

Due to a mismatch in the Newtonsoft.Json assembly, the code conversion library would fail to load properly and code conversion would fail. The version of the assembly has been lowered to match what is used by Visual Studio.

Fixed an issue with Custom Action execution after uninstall

The sequencing was incorrect for the MSI custom action. The script would be removed before the custom action was executed so when it was executed it would fail to find the file. The sequencing has now been corrected.

In this video, I go through how to create a Windows Service using a PowerShell script. We will compile the script to a service, install the service, validate the service is running and then uninstall the service.

Fixed an issue with the Form Designer

When creating a Windows Form in the Forms Designer in VS Code, Visual Studio or PowerShell, running the form would produce an error about an invalid property name.

Fixed an issue with the certificate used to sign PoshTools

The code signing certificate for PoshTools had expired and was causing issues during installation. A new code signing certificate has been used to sign the extension.

Telemetry Data Collection PowerShell Pro Tools for VS Code

Anonymous telemetry data is now sent from the VS Code extension to Application Insights to better understand usage. To opt out of telemetry collection, you can use the poshProTools.enableTelemetry setting. This setting also honors the global telemetry.enableTelemetry setting.