Autofocus on Input fields and buttons

@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

Thanks man! I appreciate your help on this.

1 Like

I wanted to come back after I had a chance to test this and say thanks again. This works great and was exactly what I needed!

3 Likes

How do you set the autofocus param on a textbox when adding the box as a [string]param or as a New-UDInputField?

I can see the Autofocus parameter in the code for New-UDTextbox, but that doesn’t help me all that much.

This didn’t work for me, I just want to run Select-UDElement -Id <> and have the cursor land in the UDInputField I have created within my UDInput, but their isn’t an ID param for a UDInputField.