OnChange event for New-UDTextbox (or something similar)

I’d like to update one textbox when something is entered in another. Specifically, I have a textbox “firstname” and “Lastname” and when something is entered in them, I’d like to update “DisplayName” textbox with “Firstname Lastname”. Is there a way to do this?

Thanks!

Hi @Hugepickle hopefully if you have a read of https://github.com/psDevUK/UD-Field in the example and this should give you enough inspiration on how to do this :slight_smile:
Or let me expand on that…think about the layout of the dashboard, placing the “Display Name” textbox in it’s own column that will refresh to check the length of the first name and last name and if the length is greather than “x” then set those values for the “Display Name” textbox

Thanks @psDevUK. I read though that and, if I’m understanding correctly, it uses the onclick event of a button. Is that right?

I was hoping to do something like this:

Where if one fills in the “first name” and “last name” fields, the “display name” field is immediately filled in with “first name + last name”. That lets folks edit it if they want but gives a nice default if it’s not needed. Is that doable? If I just missed the point from your post, please let me know and I’ll try again. :slight_smile:

Hey @Hugepickle if I had some decent imaging software installed I would try and highlight the picture you sent…so if you did something like putting each of these into there OWN columns but on the displayname column set it to display the results of first name and last name if the (get-udelement -id “FirstName”).value -gt 3 or something similar to then show the results on displayname…with that column having an refresh…I guess we got a big enough time difference for me to do a demo after work today. I am confident shouldn’t take too much of my time :grinning:

Doh! had to curse it, spent too much time looking into this, could only get it to work with button :frowning:if I ever come across the need to do this myself, I will invest more time but bit stumped at the moment.

@psDevUK, thanks for taking your personal time and looking into this. Even though it didn’t work the way i wanted, it makes folks like me loyal to the platform since there are experts like you willing to help. :slight_smile:

1 Like

Thanks for the kind words, I had another go at this today and was still failing, so just had a butchers on npmjs.com and saw this component:-
https://www.npmjs.com/package/react-delay-input
Which I think I could build…but ideally output should be going to a disabled textbox…? Having a quick think about this…I might just have to build this custom component which takes two field inputs and outputs them combined in a 3rd field…I did re-look at the UDField I did and think if I knew a bit more about react I could re-write that…well looks like I have new component to build.

Hey @Hugepickle I didn’t want to be a disappointment if I am highly regarded in your views…and thought I should go back to basics as I think I was over thinking this…so here is a working version:-

Import-Module -Name UniversalDashboard.Community -RequiredVersion 2.8.1
import-module -Name UniversalDashboard.UDField
$init = New-UDEndpointInitialization -Module 'UniversalDashboard.UDField'
Get-UDDashboard | Stop-UDDashboard
Start-UDDashboard -Port 10005 -Dashboard (
    New-UDDashboard -Title "Powershell UniversalDashboard" -Content {
        New-UDRow -Columns {
            New-UDColumn -id 'Column1' -size 12 -Endpoint {
                New-UDLayout -Columns 3 -Content {
                    New-UDField -Id 'FirstName' -Label "First Name" -FullWidth $false
                    New-UDField -Id 'LastName' -Label "Last Name" -FullWidth $false
                    New-UDField -Id DisplayName -Label "Display Name" -Value "$((Get-UDElement -id 'FirstName').Attributes.value) $((Get-UDElement -id 'LastName').Attributes.value)"
                }

            } -AutoRefresh -RefreshInterval 10
        }
    } -EndpointInitialization $init
)

To put my code where my mouth is here is a demo of the above code:-

Just have to work on the timing…was just thinking could possible add that timeout component to trigger the display name…but I believe from what you were asking this is a basic working version of that :grinning: which you could look to improve on if required.

1 Like