I’m need help to change the background-color option of a new-udcard based off a new-udswitch toggle selection.
Scenario: UDcard is a Server, trying to give people the ability to place this server in maintenance mode with the New-UDSwtich Toggle, if it’s togged on, the UDCard is placed into maintenance mode, changing the background color to something like #bf5a5a if they toggle it off, it goes back to it’s normal color.
$lcard = New-UDCard -Title “LEGEND” -Id “id-legend” -TitleAlignment center -Style @{‘background-color’ = ‘#dee0e0 ’} -Content {#58D68D ’}#CD6155 ’}#8ad0ff ’}
New-UDSwitch -Id "id-legend" -OnChange {
New-UDStyle @{'background-color' = '#bf5a5a'}
Set-UDElement -id "id-legend" -Properties @{
in = $eventData -eq "True"
}
} -Checked $true
} #end of lcard
Thanks,
Product: PowerShell Universal
Version: 1.4.6
dm10169:
#bf5a5a
One way to do it…
$session:cardBGColour = "#bf5a5a"
New-UDDynamic -Id 'dynCard' -Content {
New-UDCard -Title "LEGEND" -Id "id-legend" -TitleAlignment center -Style @{'background-color' = $session:cardBGColour} -Content {
New-UDButton -Text "DNS Good" -Size small -Icon (New-UDIcon -Icon 'Smile') -style @{'background-color' = '#58D68D'}
New-UDButton -Text "ISSUE" -Size small -Icon (New-UDIcon -Icon 'times_circle') -style @{'background-color' = '#CD6155'}
New-UDButton -Text "COMPLETE" -Size small -Icon (New-UDIcon -Icon 'check') -style @{'background-color' = '#8ad0ff'}
}
}
New-UDSwitch -Id "id-legend" -OnChange {
$session:cardBGColour = "#dee0e0"
if($eventdata -eq $true) {
$session:cardBGColour = "#bf5a5a"
}
Sync-UDElement -Id 'dynCard'
} -Checked $true
If you want the switch within the dynamic section…
$session:cardBGColour = "#bf5a5a"
$session:switchChecked = $true
New-UDDynamic -Id 'dynCard' -Content {
New-UDCard -Title "LEGEND" -Id "id-legend" -TitleAlignment center -Style @{'background-color' = $session:cardBGColour} -Content {
New-UDButton -Text "DNS Good" -Size small -Icon (New-UDIcon -Icon 'Smile') -style @{'background-color' = '#58D68D'}
New-UDButton -Text "ISSUE" -Size small -Icon (New-UDIcon -Icon 'times_circle') -style @{'background-color' = '#CD6155'}
New-UDButton -Text "COMPLETE" -Size small -Icon (New-UDIcon -Icon 'check') -style @{'background-color' = '#8ad0ff'}
New-UDSwitch -Id "id-legend" -OnChange {
$session:cardBGColour = "#dee0e0"
$session:switchChecked = $false
if($eventdata -eq $true) {
$session:cardBGColour = "#bf5a5a"
$session:switchChecked = $true
}
Sync-UDElement -Id 'dynCard'
} -Checked $session:switchChecked
}
}
Might not be what you’re after, but hopefully that gives you some ideas around using a dynamic element and refreshing it.
Oh I just saw version 1.4.6 - I tested this using v2.9.3 so hopefully it works in 1.4.6 - not sure.
Cheers,
after trying this:#bf5a5a ”#58D68D ’}#CD6155 ’}#8ad0ff ’}
New-UDSwitch -Id "id-legend" -OnChange {
$session:cardBGColour = "#dee0e0"
$session:switchChecked = $false
if($eventdata -eq $true) {
$session:cardBGColour = "#bf5a5a"
$session:switchChecked = $true
}
Sync-UDElement -Id 'dynCard'
} -Checked $session:switchChecked
}
}
I was thinking about trying this way as well, but I only want the textbox to show if the toggle is on, which I can’t get that to work.
$lcard =#dee0e0 ’} -Content {#58D68D ’}#CD6155 ’}#8ad0ff ’}
New-UDElement -tag "mswitch" -Content {
New-UDTextbox -Id "mswitch" -Placeholder 'Maintenance Admin' -Icon ( New-UDIcon -Icon 'Tools' )
}
New-UDSwitch -Id "mswitch" -CheckedLabel "On" -UncheckedLabel "Off" -Label "Site Maintenance" -Color secondary -OnChange {
Set-UDElement -id 'mswitch' -Properties @{
in = $EventData -eq 'True'
}
} -Checked $true
}
hmm maybe that’s a PSU version thing?
Try changing to this for the -Checked parameter:
Sync-UDElement -Id 'dynCard'
} -Checked:$($session:switchChecked)
}
and with the maintenance textbox showing/hiding etc…
$session:cardBGColour = "#bf5a5a"
$session:switchChecked = $true
New-UDDynamic -Id 'dynCard' -Content {
New-UDCard -Title "LEGEND" -Id "id-legend" -TitleAlignment center -Style @{'background-color' = $session:cardBGColour} -Content {
New-UDButton -Text "DNS Good" -Size small -Icon (New-UDIcon -Icon 'Smile') -style @{'background-color' = '#58D68D'}
New-UDButton -Text "ISSUE" -Size small -Icon (New-UDIcon -Icon 'times_circle') -style @{'background-color' = '#CD6155'}
New-UDButton -Text "COMPLETE" -Size small -Icon (New-UDIcon -Icon 'check') -style @{'background-color' = '#8ad0ff'}
New-UDSwitch -Id "id-legend" -OnChange {
$session:cardBGColour = "#dee0e0"
$session:switchChecked = $false
if($eventdata -eq $true) {
$session:cardBGColour = "#bf5a5a"
$session:switchChecked = $true
}
Sync-UDElement -Id 'dynCard'
} -Checked:$($session:switchChecked)
if($session:switchChecked -eq $true){
New-UDTypography -Text "Site Maintenance" -Align center
New-UDElement -tag "mswitch" -Content {
New-UDTextbox -Id "mswitch" -Placeholder 'Maintenance Admin' -Icon ( New-UDIcon -Icon 'Tools' )
}
}
}
}
Oh yep, that should work then, hmm, I don’t know then - maybe it’s the environment set for the dashboard? My test dashboard is set to “Environment: Windows PowerShell 5.1”
Oh I see your error, you’ve got $lcard = New-UDDynamic..
Just copy/paste the code from my post and see how you go
I still was unable to get it to work, I ported the dashboard home to try your code out some more, I’ve gotten close, but the color is not changing correctly, and the toggle stays on, if you are available, maybe i can share my screen or something using discord/teams/skype or something. I really appreciate your help.
My Discord
Ok, I just got it to work by getting rid of the $lcard like you said and putting new-uddashboard at the top with the code in the content. So now I have to figure out how to get it to work with my existing code, where I’m adding cards to an array, and call all the cards using a variable at the end.
