New dynamic button for universal dashboard

image

image

image

7 Likes

Well done again @wsl2001 for accomplishing this task. Bigup! :smile:

Thank you @wsl2001 for your permission to upload this to the powershell gallery. This is now available to download right here:-

This is how you can use it in your dashboard:-

Import-Module -Name UniversalDashboard
Import-Module UniversalDashboard.UDButtonLoader
Get-UDDashboard | Stop-UDDashboard
Start-UDDashboard -Port 1000 -AutoReload -Dashboard (
    New-UDDashboard -Title "Powershell UniversalDashboard" -Content {
        New-UDButtonLoader -Id "Loading" -Text "Loading" -Color "#26a69a" -BackgroundColor "#6f42c1" -Icon fighter_jet -loaderType jiggling-lines -onClick {
            Show-UDToast -Message "You clicked the button" -Duration 5000 -Position center
            start-sleep -Seconds 5
        }
    }
)

Which would produce something like:-
loader

3 Likes

I really like this, good work however is there any chance of some tweaks?

I generally use UDMuButton -Variant outlined -FullWidth, ideally i would keep the buttons looking the same but like the idea of a loader on it while its processing… I could so something with css styles but thought i would ask if this loader function could be adapted into UDMuButton, or the other way around…?

Cheers!

Hey @neo thanks for the comments…you would really need to pose the question to @AlonGvili as he is the man behind UDMuButton as I understand…I did also do a particle button which explodes which is also pretty neat just to let the user know something is now happening…at the moment you could use the UDHelmet to style the button the same as your other buttons…Peace

Hi @psDevUK,

Im working on customising this button basically i want it to look like a MuButton -Variant outlined -FullWidth so have tried to do this with New-UDStyle but i cannot find the parameters for full width (width 100% doesn’t work) and also would like some guidance to how to customise the button once clicked…

New-UDStyle -Style '
                        .button {
                            width: 100%;
                            min-height: 35px;
                            border-color: grey;
                            border-style: solid;
                            border-radius: 2px;
                            border-width: 1px;
                            background-color: white;
                            color: black;
                        }'-Content {

Also, there seems to be a load of loadertypes that i cannot seem to find a list of…

Cheers!

Hi @neo leave this with me, and should be able to send you a theme file which should be able to do this…Or if I didn’t do it, could maybe put it’s own classname in so can easily modify the CSS. I got quite a bit of “HELP ME” at work today with things going slow, and other things…but I will look into this and update the post with a solution :crazy_face:

1 Like

@neo we can easily modify UDMubutton to include the loader, in fact any component can be modified to include other features since its all about the .jsx file code.

Damn I was thinking I didn’t really want to have to reacreate the wheel as this button has 13 dependencies listed, which doesn’t include sub-dependencies…


as I was looking at https://github.com/ironmansoftware/universal-dashboard/blob/master/src/UniversalDashboard.MaterialUI/Components/button.jsx

I am rebuilding this now but with a class name in the hope you can then add this to the theme and not have to use UDHelmet as it will not come under the generic button class

@neo the following css will give it 100% width:-
.styles_wrapper__3KXDn {
width: 100%;
}
and if you do the same for the .react-ripples give it 100% this will make button full screen that what you wanted yeah?

I try to use the “new-udbuttonloader” in “new-udtable” (every row a button for action to this row) - but it seems that “new-udbuttonloader” can’t access $EventData like “new-udbutton” does. Is this a bug or did i wrong?

@fkappen
this is not a bug but i have to update the component to work with PSU since the product has changed and the buttonloader component needs to be updated so the scriptblock on onclick{} will have access to the data.

1 Like

that would be great! :slight_smile:

Any update on this? It would be very nice if this was fixed…

As for @fkappen , if you want a workaround, not a nice one but it works :slight_smile: :

New-UDButtonLoader -Text "Click me" -loaderType jiggling-lines -OnClick [scriptblock]::create(@"
    Show-UDToast -Message "$($EventData | ConvertTo-JSON)"
    #Variables used within this scriptblock need `$Var
"@)

Thanks for the workaround… but it does not work in my script? :frowning: did i wrong?

Hi @fkappen ,

Are you able to share your code? If you use x3 ` around your code to format it better
like this
thanks

Hi @psDevUK @Skons ,

thanks for help. My code is:

New-UDButtonLoader -Icon pause -Text "PRTG" -Color "#FEFEFE" -BackgroundColor "#153FDC" -loaderType jiggling-lines -OnClick {[scriptblock]::create(@"
PRTG -kdnr $EventData.NR -action Pause
"@)
          }

it calls a function with the nr of column. the function ist not called when i use “New-UDButtonLoader”

any updates to this? :slight_smile:

Hi @fkappen really sorry i not been doing any dashboard stuff since about September 2021…due to changing jobs