Pode.Web
Pode.Web copied to clipboard
New-PodeWebRange text box does not bind to events, only the slider does
Describe the Change
New-PodeWebRange text box does not bind to events, only the slider does. It would be nice if when you update the text it would fire the event, not just on the slider. I was able to sort of work around this below in workaround section. The use case is to either:
- drag a slider, and have a table history of dates change
- alternatively, enter a text entry of how far to look back, and also update
Note that this is on version 0.8.3 of Pode.Web
### Example Code
New-PodeWebRange -Name 'lookBackHours' -DisplayName 'Lookback Hours' -Max $lookBackHoursMax -Value $lookBackHoursDefault -ShowValue -CssStyle @{'width' = '15%'; 'min-width' = '100px' } |
Register-PodeWebEvent -Type Change -ScriptBlock {
$lookBackHours = $WebEvent.Data['lookBackHours']
$WebEvent.Session.Data['lookBackHours'] = $lookBackHours
Show-PodeWebToast -Message "Lookback hours set to: $lookBackHours. Updating Report. This may take a few seconds"
Sync-PodeWebTable -Name "Block Results"
Sync-PodeWebChart -Name "Block Graph"
}
Rough Workaround
This works pretty well to get us a slider and a text box, but I can't update the webrange when I update the text box as far as I know. Not a huge deal, but it would be nice
New-PodeWebContainer -Content @(
New-PodeWebText -Value 'Lookback Hours (0 - 720)' -CssStyle @{ 'display' = 'inline-block'; }
New-PodeWebRange -Name 'lookBackHours' -DisplayName 'Lookback Hours' -Max $lookBackHoursMax -Value $lookBackHoursDefault 'no-form' -Noform -CssStyle @{ 'width' = '15%'; 'min-width' = '200px'; 'display' = 'inline-block'; } |
Register-PodeWebEvent -Type Change -ScriptBlock {
$lookBackHours = [int]$WebEvent.Data['lookBackHours']
$WebEvent.Session.Data['lookBackHours'] = $lookBackHours
Update-PodeWebTextbox -Name 'lookBackHoursText' -Value $lookBackHours
Show-PodeWebToast -Message "Lookback hours set to: $lookBackHours. Updating Report. This may take a few seconds"
Sync-PodeWebTable -Name 'Block Results'
Sync-PodeWebChart -Name 'Block Graph'
Show-PodeWebToast -Message "Table Updated" -Duration 1000
}
New-PodeWebTextbox -Name 'lookBackHoursText' -Type Number -Value $lookBackHoursDefault -CssClass 'no-form' -Noform -CssStyle @{ 'width' = '100px'; 'display' = 'inline-block' } |
Register-PodeWebEvent -Type Change -ScriptBlock {
$lookBackHours = [int]$WebEvent.Data['lookBackHoursText']
$WebEvent.Session.Data['lookBackHours'] = $lookBackHours
Show-PodeWebToast -Message "Lookback hours set to: $lookBackHours. Updating Report. This may take a few seconds"
Sync-PodeWebTable -Name 'Block Results'
Sync-PodeWebChart -Name 'Block Graph'
Show-PodeWebToast -Message "Table Updated" -Duration 1000
}
)
Also, Update-PodeWebRange would be helpful for this workaround. It would be nice to fire events back at the control. I couldn't find a way to do this.