2 New Particle Components on https://marketplace.universaldashboard.io/

Well I was recently looking at particle components for react, and thought these two additions would be handy.

Import-Module -Name UniversalDashboard
Import-Module UniversalDashboard.UDMouseParticle
Get-UDDashboard | Stop-UDDashboard
Start-UDDashboard -Port 10005 -Dashboard (
    New-UDDashboard -Title "Powershell UniversalDashboard" -Content {
        New-UDMouseParticle -Gravity 1 -Number 19 -Radius 100 -Angle 20 -Velocity 0.8 -Life 0.2 -Level 4 -Color @("#d62839", "#aaefdf", "#ba324f", "#175676", "#4ba3c3")



Import-Module -Name UniversalDashboard
Import-Module UniversalDashboard.UDButtonParticle
Get-UDDashboard | Stop-UDDashboard
Start-UDDashboard -Port 10005 -Dashboard (
    New-UDDashboard -Title "Powershell UniversalDashboard" -Content {
        New-UDButtonParticle -Id "Explode" -Text "Explode" -onClick {
            Set-UDElement -id "Explode" -Attributes @{
                hidden = $true
        ##Do some long activity then Set-UDElement and make it not hidden to bring it back
        New-UDButtonParticle -Text "Bring it Back" -OnClick {
            Set-UDElement -id "Explode" -Attributes @{
                hidden = $false


I thought no-one has done a cursor component yet, to my knowledge, and thought this was a bit retro, and my 2 younger daughters were fighting each other to play on my laptop, as they thought it was super cool.
The button particle will probably be more useful for everyone out there who has end-users that like to keep clicking buttons…you can make the button hidden which then makes it disappear, then make it re-appear when the data is loaded, I think this is the perfect one click solution for UD to prevent users keep clicking the button.
If anyone would like further information on using either of these components, please just ask. Thanks :smiley:


Looks fancy dude!
The cursor thing is pagespesific ? :slight_smile:

1 Like

I have not done lots of testing apart from it works and the parameters work. But yeah I believe you would have to add the mouse component per page

Interesting… i can see some meme worthy use cases :sweat_smile:

Like employee of the month :crazy_face:
Doing another component right now actually…

4 this weekend? Dude… chill :open_mouth:

1 Like


i have done some modification on your New-UDButtonParticle to make it work butter without attributes and added a background color for the button as well since the one you have posted does not have this ability.

1 Like

Thanks @wsl2001 for making the improvements. I got this on github located here:- https://github.com/psDevUK/UD-ButtonParticle
Or if you want to send/post the modified files I will then rebuild this with the modifications, and publish it as 1.0.1



import React from 'react';
import ParticleEffectButton from 'react-particle-effect-button';
import Ripples from 'react-ripples'
import UdIcon from './ud-icon';
import ButtonLoader from 'react_button_loader';

class UDButtonParticle extends React.Component {

  constructor() {
    this.state = {	
      hidden: false,
	  toggleLoader: false

  // state is for keeping control state before or after changes.

  handleClick = () => {
    if (this.handleClick){
    this.setState({hidden: true, toggleLoader: true});
  UniversalDashboard.get(`/api/internal/component/element/${this.props.id + "onClick"}`,function(json){
    if (json.error) {
            hasError: true, 
            errorMessage: json.error.message
    } else {
            hasError: false,
            hidden: false,
			toggleLoader: false

render() {
  var icon = null; 
if (this.props.icon) {
    icon = <UdIcon icon={this.props.icon} style={{marginRight: '5px'}}/>

  return (
            loaderType= 'jiggling-lines'
export default UDButtonParticle


    Sample control for UniversalDashboard.
    Sample control function for UniversalDashboard. This function must have an ID and return a hash table.
    An id for the component default value will be generated by new-guid.
    PS C:\> <example usage>
    Explanation of what the example does
    Inputs (if any)
    Output (if any)
    General notes
function New-UDButtonParticle {
        [string]$Id = (New-Guid).ToString(),
        [ValidateSet('left', 'right')]
        [String]$IconAlignment = 'left',
        [Parameter (Position = 0)]
        [int]$Duration = 1000,
        [ValidateSet("fill", "stroke")]
        [String]$Style = "fill",
        [ValidateSet("left", "right", "top", "bottom")]
        [String]$Direction = "right",
        [int]$Padding = 150,
        [int]$Amount = 3,
        [int]$Oscillation = 20


     if ($null -ne $OnClick) {
            if ($OnClick -is [scriptblock]) {
                $OnClick = New-UDEndpoint -Endpoint $OnClick -Id ($Id + "onClick")
            elseif ($OnClick -isnot [UniversalDashboard.Models.Endpoint]) {
                throw "OnClick must be a script block or UDEndpoint"
           if ($PSBoundParameters.ContainsKey("Icon")) {
            $IconName = [UniversalDashboard.Models.FontAwesomeIconsExtensions]::GetIconName($Icon)

            # The AssetID of the main JS File
            assetId                    = $AssetId
            # Tell UD this is a plugin
            isPlugin                   = $true
            # This ID must be the same as the one used in the JavaScript to register the control with UD
            type                       = "UD-ButtonParticle"
            # An ID is mandatory
            id                         = $Id

            # This is where you can put any other properties. They are passed to the React control's props
            # The keys are case-sensitive in JS.
            text                       = $Text
            icon                       = $IconName
            iconAlignment              = $IconAlignment
            onClick                    = $onClick.Name
            color                      = $Color
            duration                   = $Duration
            direction                  = $Direction
            style                      = $Style
            canvasPadding              = $Padding
            particlesAmountCoefficient = $Amount
            oscillationCoefficient     = $Oscillation
            background                 = $BackgroundColor
            isLoading                  = $isLoading
            disabled                   = $Disabled.IsPresent
            loaderType                 = $loaderType

example script

Import-Module -Name UniversalDashboard
Import-Module UniversalDashboard.UDButtonParticle
Get-UDDashboard | Stop-UDDashboard
Start-UDDashboard -Port 1000 -AutoReload -Dashboard (
    New-UDDashboard -Title "Powershell UniversalDashboard" -Content {
        New-UDButtonParticle -Id "Explode" -Text "Explode" -Color "#26a69a" -BackgroundColor "#6f42c1" -onClick {
        start-sleep -Seconds 5  

Note: if you look in my example am using start-sleep -sec 5 and this is usually for small commands since the effect takes about 4 seconds in length so when you use start sleep the button come back to its status , but for long jobs you dont need the start-sleep if the onclick command you are using takes a while to complete so when the status of your onclick command completed the button return.

1 Like

Very nice man :sunglasses: will make sure I commit these changes and add you on the authors many thanks for the improvements made to this component, great to have got someone else interested enough to contribute to this component. Want it to be as easy to use as possible, with these changes it does make it easier for people. So thanks again :+1:

you are welcome man , dont forget to add this component from https://www.npmjs.com/package/react_button_loader and the udicon from materilize module so people can use an icon as well with this button. :slight_smile:

1 Like

Also would like to mention something about version 1.0 of your code, in your version aside from background color and icons if you have to use cache and let say generating buttons for a lot of objects and out to grid, when you click on a button all of the other buttons will be affected with same effect since you are using the same id for all where in this improvement you are only targeting the button you clicked and the effect will only apply on that particular button.

1 Like

Version 1.0.1 is now on the gallery:-
Using your example and adding an icon I have the following new demo
You cool if I put your loading button on the gallery?

sure man go ahead am k with it.