Autofocus on Input fields and buttons

Hi,

Please advice if it’s possible to control input focus or set it statically to items like: Text fields, Buttons, Input forms? Something similar to autofocus attribute in HTML. My goal - is to automatically activate specific text input field for fast user input. I’ve tried both New-UDInput and combination of New-UDButton and New-UDTextbox without any luck.

According to github, it was added in 2.6.0

I can find nothing on how to use it on the docs though.
Calling Doctor @adam!

hi @muravsky

The new-udtextbox has the param -autofocus, which only functions on load and not on dynamically added.
I haven’t added autofocus support to any other components as of yet sadly.

If you need to add it dynamically, this needs to be done with javascript manually for now, i can get you some examples if you want?

1 Like

Thanks @BoSen29 for reply. Yes, examples is exactly what I need. Please post them, if you can.

@muravsky

Give me a couple of hourse my dude, and i’ll cook something up for you once i’m home from work :slight_smile:

You’re mostly interested in dynamically during usage, and not on load?

@BoSen29 I am also in need of setting focus dynamically. Would it be possible to provide an example of what I need to do to make the following scenario work? I am looking to do something like when
New-UDButton -OnClick is triggered jump to a UDGrid or UDCard on the same page.

I have use cases for both scenarios.
But I’d be grateful for any help :wink:

Oooo. I like this idea. Maybe a “Select-UDElement” cmdlet to focus on elements dynamically.

1 Like

Alright lads, the PR is in.

Thanks @adam for the guidance! Hope the PR looks good :slight_smile:

1 Like

Hi, guys.

How can I use updated version?

If it is approved, it’ll be avaliable in the nightly build tomorrow. It needs to be validated by @adam first :slight_smile:

Nice work man. Respect

1 Like

Looks good to me! It will be in tonight’s nightly!

1 Like

@BoSen29 That’s awesome man! I can’t wait to try it out! Thanks!

Hi @BoSen29 I’m just getting around to testing Select-UDElement in my dashboard. So far I have not been able to get it to work. I wasn’t sure if I should create a new post or reply here. If you prefer I open a new post just let me know. Anyway I was hoping you could take a look at this and let me know if I am missing anything. Thanks in advance!

Here is a snippet of code where I am calling Select-UDElement.

New-UDCard -Title "User Account Search" -BackgroundColor '#eeeeee' -Content {
    New-UDIcon -Icon search -Size 4x
    New-UDInput -Title "Search" -SubmitText "Search" -Endpoint {
        param(
            [Parameter(Mandatory=$false)]
            [ValidateCount(1,20)]
            [string]$FirstName,
            [Parameter(Mandatory=$false)]
            [ValidateCount(1,20)]
            [string]$LastName
        )
        $Session:FirstName = $FirstName
        $Session:LastName = $LastName
        $Session:RequestingUser = $user
        
        New-UDInputAction -Content {
                New-UDGrid -NoExport -Title "" -Headers @("Name", "UserName", "Enabled", "Options") -Properties @("Name", "UserName", "Enabled", "Button") -Endpoint {
                    $Cache:ADUser | Where-Object { ($_.GivenName -match $Session:FirstName) -or ($_.SurName -match $Session:LastName) } | ForEach-Object {
                        [PSCustomObject]@{
                            Name = $_.Name
                            UserName = $_.SamAccountName
                            Enabled = $_.Enabled
                            Button = New-UDButton -Text "Select User" -Icon user_edit -OnClick (New-UDEndpoint -Endpoint {
                                $Session:SelectedUserSAN = $_.SamAccountName
                                $Session:SelectedUserName = $_.Name
                                $Session:GridData = Invoke-ADUMUEGridData -SamAccountName $Session:SelectedUserSAN
                                $Session:ObjectGUID = $_.ObjectGUID
                                $Session:UsersGroupsList = (Get-ADPrincipalGroupMembership -Identity $Session:SelectedUserSAN | Select-Object -Property SamAccountName).SamAccountName
                                #Sync/update table and cards to show infor for currently selected user
                                Sync-UDElement -Id 'DivBox2'
                                
                            })#end new-udendpoint in pscustomobject
                        }#end psobject
                    } | Select-Object -Property Name, UserName, Enabled, button | sort Name | Out-UDGridData
                }#end udgrid endpoint
        }#end udinputAction content
        New-UDInputAction -Content {
            Select-UDElement -ID 'UserHealthTable'
        }
    }#end udinput endpoint
}#end udcard search

Here is my target element that is lower down on the same page.

New-UDTable -Id 'UserHealthTable' -AutoRefresh -RefreshInterval 60 -Headers @("DisplayName","UserName","EmployeeID","Email","Title","Department","AccountLocked","AccountExpired","AccountEnabled","PasswordExpired","PasswordLastSet","LastBadPasswordAttempt","LastLogonDate","AccountCreated") -Endpoint {
                if ($null -ne $Session:GridData) {
                    $Session:GridData | Out-UDTableData -Property @("DisplayName","UserName","EmployeeID","Email","Title","Department","AccountLocked","AccountExpired","AccountEnabled","PasswordExpired","PasswordLastSet","LastBadPasswordAttempt","LastLogonDate","AccountCreated")
                }#end if
            }#end udtable    

FYI this is not the full code on the page, it’s just the sections I thought are relevant. If you need the whole thing I can share the rest.

Hi @guy,

Select-UDElement is just a simple javascript to focus on the selected element. Usually utilized on buttons or textboxes for ease of access, and keyboardfriendlyness.
Are you trying to set the focus on the filterbox inside the grid, or make the grid active for a “i dont like the mouse” user trying to tab through your site?

The latter should work fine, the select-udelement however, won’t make the filter textbox active as of yet. Might be able to make it happen though.

I wasn’t necessarily trying to set focus on the filter box, or prevent users from tabbing through. I just wanted to set focus on different area of the page after a button was clicked.

Basically at the top of the page I have a card with inputs for first name and last.


After a user enters a value and submits it, I then use New-UDInputAction to display a grid with the results of searching AD based on what the user entered.

Within the grid in each row of returned results I also have buttons. The buttons are so you can select one of the AD User Objects returned from the query. After the button is clicked it sets the value of a session variable and updates a table with that value so it displays information on the AD User Object selected by clicking on the button.

Here lies the problem I was hoping to resolve using Select-UDElement. When you click the button in the grid to select an AD User Object, to the unknowingly it would appear as nothing happens because the table that gets updated by clicking the button is lower on the page and not visible. In order to see the updated table and access the tools to interact with the user object selected you have to scroll down after you select an object from the grid. This doesn’t make for a good user experience.

Hopefully I made sense in my ramblings and you can understand what I am trying to accomplish. Also I did try changing my target of Select-UDElement to a text box and it did not change.

Thanks,
Guy

Hi @guy,

As of now, the select-udelement doesn’t scroll down to the active element. I do however like the idea of this functionality, and it looks like child’s play to implement.
Could you raise an issue for this on github and i’ll get to it once im done with this CS session :slight_smile:

Awesome! Done! Thanks @BoSen29!

1 Like

Hi again @guy!

The PR is in :slight_smile:


Happy hunting

2 Likes