Universal Dashboard is a highly extensible solution for web-development using PowerShell. Controls can be added to your websites without having to be a part of the Universal Dashboard module. Controls can be published to the PowerShell Gallery as modules which then can be installed and used within Universal Dashboard websites. Any available controls are sync’d to the Universal Dashboard Marketplace so they are easy to find.

In this blog post, we will go over some of the new controls that are available for Universal Dashboard. These controls do not ship with Universal Dashboard and are found on the PowerShell Gallery.

UDHelmet

Marketplace

Helmet is a React component for working with the head section of the HTML page. Typically, React components live within the body and do not manipulate the head section of the document. Helmet provides the ability to add script tags, CSS link refs and updating of the document title. Here are some examples.

This script will load Twitter’s widgets.js as a script tag in the head of the Universal Dashboard document. The UDHtml element creates the tag required to display tweets by @adamdriscoll.

This script will set the title of the page to ‘Hello’.

You can place UDHelmet components wherever you like. For example, you could put on per page in order to change the document’s title for that page.

UDMoment

Marketplace

Moment is a JavaScript library for formatting dates and times. UDMoment wraps this functionality so that you can easily format dates and times in your UD websites. Here are some of the examples of what UDMoment can do.

UDKnob

Marketplace

The knob control allows you to display values on a dial. You can color the dial and display the value in the center of it.

Dud-Search

Marketplace

Dud-Search is a custom search bar component for UD. It allows you to define an OnEnter scriptblock that is executed whenever the user presses enter. Additionally, you can provide an OnChange if you would like the search box to update when the text is changed. From there, you can then filter any items based on what was entered. For a full example, check out the GitHub Repository.

ps1

UDCodeEditor

Marketplace

The Code Editor component allows you to integrate the same code editor used by Azure DevOps directly into your UD websites. You can select the language along with a ton of other options to configure the editor experience. The editor supports read-only mode as well as diff support. The editor also supports dynamic interaction. You can get and set the content of the editor. This allows you to create a website capable of running scripts directly from the browser.

This component requires a Premium (e.g. Enterprise) license of Universal Dashboard.

UDDiagrams

Marketplace

Diagrams is a component for displaying interconnected nodes. You can define any number of nodes and link them together. They also support multiple input and output ports. This is helpful if you wish to display something like a network diagram or flow chart. Diagrams can react to an OnSelected event so you can make them interactive.

This component requires a Premium (e.g. Enterprise) license of Universal Dashboard.