Dynamically Adding/Removing Fields

[IvanDrag0]

I'm looking to use Pode.Web to create a page that would allow me to dynamically add/remove fields (similar to these projects: OpenControl-Editor/example and JSON Editor/example). Based on reading the documentation, I'm pretty sure that I need to use the Pode.Web Events functionality with the "Click" event. But I'm having trouble getting it to work. Since the objects don't have IDs or references, how can I tell Pode.Web to add a field or a collection of fields as a child to a specific field/object and/or remove those fields when an even happens?

[Badgerati]

Hi @IvanDrag0,

The type of dynamically adding layouts/elements you're talking about doesn't exist yet in Pode.Web, but I am working on it.

You can "mimic" the behaviour by adding the layouts/elements you need upfront, and then use Hide-PodeWebComponent and Show-PodeWebComponent to simply hide/show the objects. You can register a Load page event via Register-PodeWebPageEvent to hide any initial objects, and then use Register-PodeWebEvent and the Click event - or event just a New-PodeWebButton - to then show/hide objects afterwards. You'll need to give all layouts/elements an -Id for this to work.

[eugen257]

Hi @Badgerati, Could you elaborate a bit or give an example. I would like to show/hide the password input line by checkbox. thanks a lot in advance.

New-PodeWebTextbox -id "pass_id" -Name 'Password' -Type Password -PrependIcon Lock New-PodeWebCheckbox -Name 'Eigenes Password' -Inline | Register-PodeWebEvent -Type Click -ScriptBlock { Show-PodeWebComponent -Id "pass_id" }

[Badgerati]

Hi @eugen257,

Off the top of my head I believe it should be something like the following:

New-PodeWebTextbox -id "pass_id" -Name 'Password' -Type Password -PrependIcon Lock

New-PodeWebCheckbox -Name 'Eigenes Password' -Inline |
    Register-PodeWebEvent -Type Changed -ScriptBlock {
        if ($WebEvent.Data['Eigenes Password'] -ieq 'true') {
            Show-PodeWebComponent -Id "pass_id"
        }
        else {
            Hide-PodeWebComponent -Id "pass_id"
        }
    }

You can check the value of the checkbox when it's changed, and run either Hide or Show accordingly.

Hope that helps! :)

[eugen257]

Hi @Badgerati,

it is working. Thanks a lot . Is there a way to hide (not show) the password string on boot?

[Badgerati]

Hi @eugen257,

Do you mean hide the whole textbox on page load, or just the contents of the textbox?

If it's the former, then you can pipe Add-PodeWebPage into Register-PodeWebPageEvent:

$page = Add-PodeWebPage -Name PageName -ScriptBlock {}

$page | Register-PodeWebPageEvent -Type Load -ScriptBlock {
    Hide-PodeWebComponent -Id "pass_id"
}

This will hide the textbox on page load.

[eugen257]

Hi @Badgerati,

I am getting the following error. What I don't understand.

Register-PodeWebPageEventInternal : The argument for the "Page" parameter cannot be validated. The argument is NULL. Provide a valid value for the argument and rerun the command out.
In C:\Program Files\WindowsPowerShell\Modules\Pode.Web\0.8.1\Public\Events.ps1:126 characters:19
 -Page $Page 

I did a little bit differently so the question seems to be removed. Thank you.

[Badgerati]

Hi @eugen257,

Sorry, I missed a parameter on Add-PodePage, you'll need to pass it -PassThru so it returns the page for you to use.

[eugen257]

Hi @Badgerati, Thank you, everything is working

[eugen257]

Hi @Badgerati,

I hurried))) not everything works as it should.

When "Textbox" is hidden, title, Helptext, Icon, PrependText are not hidden. The "Credential" form doesn't work either, it doesn't have an "Update" option.

What can you advise?

[eugen257]

I have used Textbox in a Container and hide the Container completely. Problem solved. Thanks

[Badgerati]

• The initial question asked in this issue will be resolved by #440.
• The above question about hiding elements on creation was resolved by #467 (once released).
• The last question about Update functions for Credentials will be resolved by #415.

Closing this issue in favour of the above 3.