Update an Icon dynamically

PowerShell Universal
1 
Product: PowerShell Universal
Version: 5.5.0

I’m trying to see if I can do some dynamic icons for processing/complete states. As a basic idea: click the button, show a spinner; then once code is processed, change spinner to a checkmark. I’ve attempted two variants of this problem.

First - using style to show/hide based on CSS display. This doesn’t throw any errors but also doesn’t actually do anything.

New-UDDashboard -Title "Icon Test" -Content {
    New-UDCard -Content {
        New-UDGrid -Container -Children {
            New-UDGrid -Item -Children {
                New-UDButton -Text "Test" -OnClick {
                    try {
                        # Show spinner
                        Set-UDElement -Id "testSpinner" -Properties @{
                            Style = @{display = "block"}
                        }
                        Set-UDElement -Id "testCheckmark" -Properties @{
                            Style = @{display = "none"}
                        }

                        # Simulate work
                        Start-Sleep -Seconds 2

                        # Show checkmark
                        Set-UDElement -Id "testSpinner" -Properties @{
                            Style = @{display = "none"}
                        }
                        Set-UDElement -Id "testCheckmark" -Properties @{
                            Style = @{display = "block"}
                        }
                    }
                    catch {
                        Show-UDToast -Message "Error: $($_.Exception.Message)" -Duration 5000 -Position "topRight" -MessageColor "red"
                    }
                }
            }
            New-UDGrid -Item -Children {
                New-UDIcon -Icon 'Spinner' -Spin -Size 'lg' -Id 'testSpinner' -Style @{display = "none"}
                New-UDIcon -Icon 'CheckCircle' -Size 'lg' -Id 'testCheckmark' -Style @{display = "none"; color = "green"}
            }
        }
    }
}

Second, I tried doing it via “state management”, which throws parameter errors at me, because i’m sure i’m missing something.

New-UDDashboard -Title "Icon Test (State)" -Content {
    New-UDCard -Content {
        New-UDGrid -Container -Children {
            New-UDGrid -Item -Children {
                New-UDButton -Text "Test" -OnClick {
                    try {
                        # Set state to spinning
                        Set-UDElement -Id "iconState" -Content {
                            New-UDTypography -Id 'State' -Text "spinning"
                        }

                        # Simulate work
                        Start-Sleep -Seconds 2

                        # Set state to complete
                        Set-UDElement -Id "iconState" -Content {
                            New-UDTypography -Id 'State' -Text "complete"
                        }
                    }
                    catch {
                        Show-UDToast -Message "Error: $($_.Exception.Message)" -Duration 5000 -Position "topRight" -MessageColor "red"
                    }
                }
            }
            New-UDGrid -Item -Children {
                New-UDHidden -Content {
                    New-UDElement -Id 'iconState' -Content {
                        New-UDTypography -Id 'State' -Text "none"
                    }
                }
                New-UDDynamic -Content {
                    $state = Get-UDElement -Id "iconState"
                    if ($state.Value -eq "spinning") {
                        New-UDIcon -Icon 'Spinner' -Spin -Size 'lg'
                    }
                    elseif ($state.Value -eq "complete") {
                        New-UDIcon -Icon 'CheckCircle' -Size 'lg' -Color 'green'
                    }
                } -Id "iconDisplay" -AutoRefresh -AutoRefreshInterval 3 
            }
        }
    }
}

At any rate, has anyone gotten this to work? Any suggestions? Thanks in advance!

2

I guess I needed a break, because after lunch i tried it slightly different and was able to get something to work.

New-UDDashboard -Title "Icon Test" -Content {
    New-UDCard -Content {
        New-UDGrid -Container -Children {
            New-UDGrid -Item -Children {
                New-UDButton -Text "Test" -OnClick {
                    try {
                        # Show spinner
                        Set-UDElement -Id "progressUpdate" -Content {
                            New-UDIcon -Icon 'Spinner' -Spin -Size 'lg' -Id 'progress'
                        }

                        # Simulate work
                        Start-Sleep -Seconds 2

                        # Show checkmark
                        Set-UDElement -Id "progressUpdate" -Content {
                            New-UDIcon -Icon 'circle-check' -Size 'lg' -Id 'progress' -Color 'green'
                        }
                    }
                    catch {
                        Show-UDToast -Message "Error: $($_.Exception.Message)" -Duration 5000 -Position "topRight" -MessageColor "red"
                    }
                }
            }
            New-UDGrid -Item -Children {
                New-UDElement -Tag 'div' -Id 'progressUpdate' -Content {
                }
            }
        }
    }
}
1 Like
3

I’m going to put this here for future searchers. I made an extended test with the icon updates. Test1 is for an icon on its own. Test2 is for an icon in a button.

New-UDDashboard -Title "Icon Test" -Content {
    New-UDCard -Content {
        New-UDGrid -Container -Children {
            New-UDGrid -Item -Children {
                New-UDButton -Text "Test" -OnClick {
                    try {
                        # Show spinner
                        Set-UDElement -Id "progressUpdate" -Content {
                            New-UDIcon -Icon 'Spinner' -Spin -Size '2x' -Id 'progress'
                        }

                        # Simulate work
                        Start-Sleep -Seconds 2

                        # Show checkmark
                        Set-UDElement -Id "progressUpdate" -Content {
                            New-UDIcon -Icon 'circle-check' -Size '2x' -Id 'progress' -Color 'green'
                        }
                    }
                    catch {
                        Show-UDToast -Message "Error: $($_.Exception.Message)" -Duration 5000 -Position "topRight" -MessageColor "red"
                    }
                }
            }
            New-UDGrid -Item -Children {
                New-UDElement -Tag 'div' -Id 'progressUpdate' -Content {
                }
            }
        }
    }
    New-UDCard -Content {
        New-UDGrid -Container -Children {
            New-UDGrid -Item -Children {
                New-UDButton -Id "test2" -Text "Test2" -OnClick {
                    try {
                        # Show spinner
                        Set-UDElement -Id "test2" -Attributes @{
                            Icon = (New-UDIcon -Icon 'spinner' -Spin)
                        }

                        # Simulate work
                        Start-Sleep -Seconds 2

                        # Show checkmark
                        Set-UDElement -Id "test2" -Attributes @{
                            Icon = (New-UDIcon -Icon 'circle-check' -Color 'green')
                        }

                        # After Completed
                        Start-Sleep -Seconds 3

                        #Remove Icon
                        Set-UDElement -Id "test2" -Attributes @{
                            Icon = $null
                        }
                    }
                    catch {
                        Show-UDToast -Message "Error: $($_.Exception.Message)" -Duration 5000 -Position "topRight" -MessageColor "red"
                    }
                }
            }
        }
    }
}