Another scenario from a customer:
We want to use a lookup to another entity because we want to store additional data in the entities fields and option sets don’t provide this capability. However, we want the selection of the entity in the form to be a dropdown to minimize the # of clicks a user must go through to select the entity.
Add the lookup field to the form:
Notice that this lookup is required. This solution respects the required metadata of the field and uses it to ensure the dropdown has a value before the form is saved. Set the properties of the lookup making sure the Visible by default option is unchecked:
Insert an html web resource to the form with the following General settings configured (the code for the web resource is available further down):
Here is a longer description if the variable names aren’t clear enough:
lookupEntitySetName = Name of the entity set in the OData service for the entity.
lookupEntityIdFieldName = The id/primary key for the in the OData service.
lookupEntityDisplayFieldName = The field name from the entity that you want to display in the dropdown.
nameOfLookupFieldOnForm = The name of the actual lookup field that is hidden on the form.
webResourceName = The name of the web resource on the form. This is set in the Add Web Resource dialog and always starts with WebResource_.
Make sure you set the properties on the Formatting tab like so:
Finally, there is a little bug that I gave up on. So you will need to put a spacer next to or below the web resource:
This will prevent the dropdown for getting cut off if there is nothing to the right or bottom of it. If it already has something to the right of it or below it, then this is unnecessary. Bingo bango! You now have a lookup that’s represented on the form as a dropdown complete with required validation:
The dropdown is just UI trickery. When you save the form, the value of the lookup is saved correctly. In update scenarios, the form loads, reads the hidden lookup value, and sets the dropdown selected item appropriately.
Here’s the code for the html web resource:
Here’s the code for the dropdown.htm.js file that it references: