Lookdown
Lookdown is a simplified way to reference data in a table in Model Driven App. The OOTB Lookup control requires users to type or click the search icon to open the dropdown list. Lookdown control saves users a click by opening a dropdown list right away. Hence it's best to use for simple reference/configuration table lookup. It also provides advanced features such as dynamic filter, grouping, and showing option icon.
- 1-click dropdown
- Clean design
- Minimal configuration
- Options grouping
- Option icon with entity icon or record image
- Dynamic filtering
- Dynamic display text
- Advanced commands
| Property | Usage | Type | Description |
|---|---|---|---|
| Lookup Field* | bound | Lookup | The lookup field that the component is bound to |
| Custom Filter | input | Single Line Text Multiple Lines Text |
Additional filter to be added to the Lookup view. Custom filter should be serialized as a FetchXML <filter> node. |
| Group By Field | input | Single Line Text | The logical name of the column form the lookup table that is used to group the options |
| Option Display Template | input | Single Line Text | Dynamic template to display option text. |
| Selected Option Display Template | input | Single Line Text | Dynamic template to display selected option text. Default to option text if not provided. |
| Show Icon | input | Enum None Use Entity Icon Use Record Image
|
Whether to show an icon in option item. Default: None |
| Icon Size | input | Enum Normal Large
|
Icon size applicable when showing icon. Default: Normal |
| Open Record Command | input | Enum No Inline Dialog
|
Show command button to open the lookup record. Default: No. |
| Quick Create Command | input | Enum Yes No
|
Show command to quick create new option. Default: No. |
| Lookup Panel Command | input | Enum Yes No
|
Show command to open the Lookup Panel. Default: No. |
| Language Pack Path | input | Single Line Text | Path to a resx web resource, relative to the environment url (eg. /webresources/new_/resx/Lookdown.1033.resx), to be used as Language Pack. Default to English if not provided. |
** is a required prop
Show options as a normal dropdown. Data is retrieved from a view selected in the lookup field properties. The view definition will be used to sort and filter the dropdown list. If no view or more than one views are selected, the OOTB Lookup view will be used to retrieve data.
📝 Note: There is no paging when loading data. The component will only load maximum 5000 records. This should be enough for most configuration/reference data table cases.
Grouping can be done by specifying a column in the lookup table to be used as group header.
📝 Note: The component does not attempt to order the groups. The groups are presented on a 'first come, first served' basis. For example if grouping by country, and the first row is for country 'Ireland', then the first displayed group will be 'Ireland'.
If showing table icon, the Modern Image (.svg) will be used preferably if exists, otherwise if icon size is set to Large, 32x32 icon will be used if exists, else 16x16 icon will be used.
The control will use the image from the Primary Image Attribute configured in the lookup table.
When you want to filter data dynamically or depend on other fields on the form, you can use templating tokens to insert data to view filter dynamically.
Templating token syntax: {{ field_logical_name_on_form }}
With complex values such as a Lookup field, you can access its id or name using {{ lookup_field.id }} or {{ lookup_field.name }}
Templating tokens can be used in both Lookup View filter and Custom Filter property
❗ Important: the fields you want to insert to the Lookup View must be available on the form, either visible or invisible
The sample filter above shows how dynamic tokens can be inserted. The view is filtered for all counties with province value matching address line 3 or address line 4 on the Student form.
It's better to create an additional view to be used in the lookdown component so it won't affect other views. Because if users open a view with templating tokens directly, it will just show an empty view as tokens are treated as normal text values.
If you don't want empty views or want to reuse existing views and want to add a custom filter, you can use Custom Filter prop below.
sample custom filter in the screenshot above:
<filter><condition attribute="storm_provincecode" operator="eq" value="{{ storm_provincecode }}"/></filter>This adds an additional condition to filter for all counties that have the same province as the province field on the form.
You can add your custom filter node with templating tokens in the custom filter property of the component as a static text.
Or you can bind the custom filter property to a hidden field on the form, then use form script to populate the hidden field with a custom filter dynamically, the filter can even contain templating tokens if you want.
Options text and selected option text can be dynamically configured using templating tokens.
Columns in the lookup table are used as templating tokens. For example, for a lookup to the Contact table, you can have different display text for options and selected options:
- Option Display Template :
{{ fullname }} ({{ emailaddress1 }}) - Selected Option Display Template :
{{ fullname }} - {{ emailaddress1 }}
If the selected option display template is not provided, option display template will be used.
If both templates are not provided, Primary Attribute of the lookup table will be used.
you can add your own language by passing a URL to a .resx web resource to the Language Pack Path property.
you can use the default English language pack here PolyLookup.1033.resx as the template to create a new resx web resource in your environment, then update the value in your language.
you can use this VS Code extension to help you edit the resx web resource in a user interface https://marketplace.visualstudio.com/items?itemName=DominicVonk.vscode-resx-editor
For example, the resx web resource looks like this
https://<org>.crm.dynamics.com/WebResources/storm_/resx/Lookdown.1066.resx
the value passed to the Language Pack Path can be relative and won't need the environment part. it looks like this:
/WebResources/storm_/resx/Lookdown.1066.resx
- ❌ No paging for large dataset
- fixed disabled style
- fixed minor bugs
- supports new look
- fixed a bug where dropdown doesn't refresh when dependent fields change
- added clear button
- added language support
- Option display text template
- Open record, quick create, lookup panel commands
- fixed control display error in form editor
- First release
- ⏹️ Permission Handling
- ⏹️ Error Handling
- ✅ Localization
- ⏹️ Unit tests