Lookup Fields on Power Apps Portal

Dominic Liu, 02 July 2022

Lookup fields can define views that display different sets of values from the associated entity. We often use lookup fields in Dynamics 365 to handle the relationships between tables. However, if you have a lookup field on your table that is linked to a reference table, the view is not related as we only need to select the value. In this blog, we will first look at how to render Lookup as dropdown on Power Apps portal.

Render Lookup as Dropdown on Power Apps Portal

For both the Basic Form and Advanced Form, you can find a related entity called Metadata  . It contains additional behaviour modification logic to augment or override the functionality of form fields that is otherwise not possible with native basic/advanced form editing capabilities. Note that for Advanced   Form metadata, it can only be configured from each Advanced   Form   Steps.

To create a new Advanced Form Metadata from the step that contains your target lookup field, select ‘Attribute’ as the type and select the field logical name. Under the Control Style sub grid, select ‘Render lookup as Dropdown’ in the ‘Style’ field.

image

Save and close the record. To make sure that your changes are immediately published, login as admin and go to https://YourPortalWebsite/_services/about to clear the cache.

As a result, you will see the ‘Country’ lookup field is rendered as a dropdown.

image

Open lookup field without clicking the icon

Unlike other fields, lookup fields are unique in that you must select the lookup icon to select the value. However, to make it more user friendly, we added a method that allows user to select the value without clicking the lookup icon.

image

This is an issue from a user experience perspective, and unfortunately there are currently no out of the box solutions to fix this problem at the time of this blog’s writing. A temporary solution is to use custom JQuery like below.

image

You can then put all your lookup fields in a variable and call the PopupModalOnFocus Function.

imageBy doing this, we can also open the lookup dialog  by clicking anywhere in the input rather than only on the icon.

image