Power Pages: How to Open a Lookup Field with a Click on the Input Field

On Power Pages forms, all fields can be clicked on in the input area to enter values, except for the lookup field. For the lookup field, you have to click on the small icon to open the lookup list. In this blog, I will show you how to enable users to click anywhere on the input field to open the lookup list.

function PopUpLookUpOnFocus = function (fieldNames) {
    for (var i = 0; i < fieldNames.length; i++) {
        IndividualModalFocus(fieldNames[i]);
    }
}

function IndividualModalFocus(fieldName) {
    $("input#" + fieldName + "_name").on("click", function () {
        $("div.input-group:has(input#" + fieldName + ") button.launchentitylookup").trigger("click");
        setTimeout(function () {
            var searchInput = $("div#" + fieldName + "_lookupmodal div.entitylist-search input[placeholder='Search']");
            searchInput.focus();

            searchInput.keyup(function () {
                $("div#" + fieldName + "_lookupmodal div.entitylist-search div.input-group-btn button").trigger("click");
            });
        }, 500);
    });
}

The JavaScript code above allows portal users to click anywhere on the lookup field input area to open up the lookup list. Simply add the code above to your form and call it like this:

var fieldNames = ["dom_field1", "dom_field2"];
PopUpLookUpOnFocus(fieldNames);

If you have numerous forms and wish to reuse this method, I typically create a global JS file with many useful functions, like the one above. This way, I don’t have to add this function multiple times to each individual form or Multistep Form steps.

To do that, create a new JS file and add this method above, then save your JS file as .ex extension and upload into your Web File.

Then, you can add the script tag below to your Web Template, which contains your form, making it easy to call that method.

<script type="text/javascript" src="/global.js"></script>