Adventures with Power Pages: Set Focus On Load

I have a Page that is using an Dataverse Form called Game Create Form (Web).

Figure 1 – Game Create Form (Web)

The Form includes a couple of Lookups for Type and Publisher and a couple of Choices for Category and Mechanism.

In testing my Site, I navigate to the Game Create Page that contains the Game Create Form (Web).

I would expect the Name field to receive focus by default, but for some odd reason, the Mechanism column is receiving the focus.

Figure 2 – Mechanism field receives the focus

Ugh! This is a bit annoying! 😕

I spent some time seeing if it was a configuration issue or if there was some other way to fix it, unfortunately I came up with nothing, so I decided to see if I could fix it with JavaScript.

To do this, I need to know if the Name field had an id or name property that I can use in my JavaScript to set the focus on the Name control.

In Microsoft Edge, I right click on the Name field and then click Inspect which displays the Developer Tools.

Figure 3 – Inspect the Name field

For those new to the Developer Tools the Name control will be highlighted by default in the HTML code displayed.

I found the id field which had a value of bgn_name, which turned out to be the Logical name of the Name column in my Dataverse table.

Figure 4 – Control name identified in Developer Tools

Back in Power Pages Studio I navigate to the Game Create Page and click on Edit Code.

Figure 5 – Edit code on the Page

This opens up Visual Studio Code.

I open the file where I will add the JavaScript code, it’s named that same as my Page with a js extension, in my case it is called Game Create.en-US.customjs.js.

I add the following code:

Figure 6 – JavaScript code

I press CTL + S to save my changes.

I hop back over to my Page and click Sync to update my Site with the changes.

Figure 7 – Sync the changes

I click Preview and then click Desktop.

My Page now focuses the cursor on the Name field! 🎉🥳

Figure 8 – Name field has the focus

There you go, not ideal, but gets the job done! 👍


Discover more from Matt Ruma

Subscribe to get the latest posts sent to your email.

Leave a Reply

Your email address will not be published. Required fields are marked *