Pode.Web icon indicating copy to clipboard operation
Pode.Web copied to clipboard

New-PodeWebRange text box does not bind to events, only the slider does

Open thoffmannaspenware opened this issue 2 weeks ago • 0 comments

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.

thoffmannaspenware avatar Dec 09 '25 02:12 thoffmannaspenware