New-UDButton LoadingIndicator expamples

PowerShell Universal
1 
Product: PowerShell Universal
Version: 4.0.0-beta5

Hello
Since my scripts that use with Invoke-PSUScript command sometimes takes a little bit longer than expected, i wanted to make some progress bar.
First I tried with showing progress bar inside New-UDBackdrop command or Show-UDToast but they do not show at all
Then I realized that Button has a -ShowLoading switch. It is ok but visibility of this spinning wheal is a little poor especially when you change color of button (in my case button is red)
Then i realized that it has also -LoadingIndicator switch which i probably can use to make a custom big spinning wheel on New-UDBackdrop :slight_smile:
But it also shows nothing.
I searched google , forum and docs for example of this -LoadingIndicator option but there is none unfortunately.
So could some share a working example of this switch in Button. Button is a part of Modal if it has something to do with it.

2

Hello @krisr Were you able to find solution for this? I am also looking for some help on this.

3

No i havent. But dropped this idea .Now im using live output using code editor component and this suits my needs even better.

4

I tried to do something similar. For me it worked this way with putting the Backdrop into UdModal. It seems this also works in UdListitem onlclick block.
I only made some tests, but I will try use this with more complex dashoards.


    New-UDButton -Text "Click Me" -OnClick {
        Show-UDModal -Content {
            New-UDBackdrop -Id 'backdrop' -Content {
                #New-UDTypography -Text "Loading..." -Variant h2
                New-UDProgress -Circular -Color green -Size small
            } -Open
        }
        Start-Sleep -Seconds 3
        Hide-UDModal
        Show-UDToast -Message "Button clicked!"
    }
1 Like
5

I added this to my New-UDUpload button, that takes a few seconds to complete - this solved my “user-left-with-no-response” issue - thanks!

New-UDUpload -Text "Upload" -Icon (New-UDIcon -Icon FileExcel -Size 2x) -OnUpload {

    Show-UDModal -Content {
        New-UDBackdrop -Id 'backdrop' -Content {
            New-UDTypography -Text "Loading..." -Variant h2
            New-UDProgress -Circular -Color green -Size small
        } -Open
    }

    try {
        $Data = $Body | ConvertFrom-Json
        $bytes = [System.Convert]::FromBase64String($Data.Data)
        [System.IO.File]::WriteAllBytes("$env:temp\$($Data.Name)", $bytes)
    }
    catch {
        Show-UDToast -Message $_.ErrorDetails.message -Duration 5000
    }

    $session:DATA = Import-Excel -Path "$env:temp\$($Data.Name)"
    Remove-Item -Path $env:temp\$($Data.Name) -Force -Confirm:$false

    InitTabs
    Hide-UDModal

    Invoke-UDRedirect -Url '/home?id=1'
}
6

Welcome! I tried this in various places and worked well worked so far and I was able to do it a bit better. If we setup 0 width in Modal style it looks better. :slight_smile:

New-UDButton -Text "Click Me" -OnClick {
        Show-UDModal -Content {
            New-UDBackdrop -Id 'backdrop' -Content {
                #New-UDTypography -Text "Loading..." -Variant h2
                New-UDProgress -Circular -Color green -Size small
            } -Open
        } -Style @{
            width = '0px'
        }
        Start-Sleep -Seconds 3
        Hide-UDModal
        Show-UDToast -Message "Button clicked!"
    }