Badgerati / Pode.Web

Web template framework for use with the Pode PowerShell web server
MIT License
194 stars 26 forks source link

Access textbox value in scriptblock from a modal #570

Open solipsist01 opened 6 months ago

solipsist01 commented 6 months ago

I'm running Pode.Web 0.8.3, with Pode 2.6.0 I have a table, which has a button which enables a modal. in this modal i have a textbox Is there a way to access the data of the textbox in the modal scriptblock, instead of only the data of the table?

The following copy-pasteable code showcases the issue i have.

Import-Module Pode.Web

Start-PodeServer {
    Add-PodeEndpoint -Address 0.0.0.0 -Port 9999 -Protocol Http
    Use-PodeWebTemplates -Title 'test' -Theme Dark
    Add-PodeWebPage -Name 'test'  -ScriptBlock {
        New-PodeWebCard -Content @(
            New-PodeWebForm -Name 'page' -ArgumentList @(, $psa) -ScriptBlock {
            } -Content @(
                New-PodeWebTable -Name 'table' -DataColumn test -ScriptBlock {
                    $arr = 'test', 'test2'

                    foreach ($record in $arr) {
                        [ordered]@{
                            test   = $record
                            Action = @(
                                New-PodeWebButton -Name 'submit' -Icon 'Play-Circle' -IconOnly -ScriptBlock {
                                    Show-PodeWebModal -Name 'process' -DataValue $($WebEvent.Data.Value) -Actions @(
                                        Update-PodeWebText -Id 'modalTest' -Value $WebEvent.Data.Value
                                    )
                                }
                            )
                        }
                    }
                }

                New-PodeWebModal -Name 'process' -AsForm -Content @(

                    New-PodeWebText -Id 'modalTest'
                    #i'd like to fill in some value in the inputbox below, and use that in the scriptblock
                    New-PodeWebTextbox -Name 'inputbox' -width 60 -Value "some value i want to process"

                ) -ScriptBlock {
                    #the line below, displays either test, or test2 which it inherited from the -datavalue
                    $WebEvent.Data.value | Out-Default
                    #the line below is empty. is there any way around, how i can access the value of the textbox above?
                    $WebEvent.Data.inputbox | Out-Default
                    Hide-PodeWebModal -Name 'process'
                }
            )
        )
    }
}
solipsist01 commented 6 months ago

i found a workaround with adding another button. would it be possible to disable the default modal buttons somehow ?

 New-PodeWebModal -Name 'process' -AsForm -Content @(

                    New-PodeWebText -Id 'modalTest'
                    #i'd like to fill in some value in the inputbox below, and use that in the scriptblock
                    New-PodeWebTextbox -Name 'inputbox' -width 60 -Value "some value i want to process"

                    New-PodeWebButton -Name 'input' -Colour Green -ScriptBlock {
                        Show-PodeWebToast -Message $webevent.data.inputbox
                    }

                ) -ScriptBlock {
                    #the line below, displays either test, or test2 which it inherited from the -datavalue
                    $WebEvent.Data.value | Out-Default
                    #the line below is empty. is there any way around, how i can access the value of the textbox above?
                    $WebEvent.Data.inputbox | Out-Default
                    Hide-PodeWebModal -Name 'process'
                }
Badgerati commented 5 months ago

Your first example should be valid actually, as that's the way it should work. I'll have to test and see if it's broken somehow however, the fix will likely be in v1.0.0.

The modal buttons aren't currently togglable, but I can look into making it so!