Allow InputList component to be localizable and support multiple instances on a page. Implement icon localization in Page Add/Edit using IconResources.resx

[sbwalker]

No description provided.

[sbwalker]

@leigh-pointer please test these enhancements. Note that I only added 1 localization key to the IconResources.resx - the other icons would need to be added to this file and would need to use keys of Icon.{Name}. Note that the implementation relies on the ResourceType property which is defined in Page Add/Edit. Other use cases for this component could store their list values in the module's resource file, sharedresources, or whereever they choose.

[sbwalker]

@leigh-pointer the one thing which I am still pondering is whether we are using this Dictionary incorrectly. What I mean is that a Dictionary is comprised of key/value pairs. Keys must be unique but Values do not. In the InputList it is creating a datalist which contains options. Option values in a datalist must be unique whereas the option names do not. So it would seem that the Dictionary Keys should map to the option values and the Dictionary Values should map to the option names - correct? This is opposite of how it is implemented currently.

[leigh-pointer]

@sbwalker i would agree, although it sounds wrong it is in fact correct in a localization stand point!

[sbwalker]

@leigh-pointer if we swapped the keys and values in the Dictionary we could base the localization lookups on the Dictionary Values. To provide more context, I am suggesting:

Icon Dictionary
Key = "oi oi-home"
Value = "Home"

DataList
< option value="oi oi-home" > Home < /option >

RESX file
Key = "Home"
Value = "Translated Value"

[leigh-pointer]

@sbwalker that would work.

[vnetonline]

So can this control, be used for other lists like for example a page list

[leigh-pointer]

@vnetonline it can be use for anything with a key value pair!

[sbwalker]

@leigh-pointer I reversed the Dictionary usage and fixed the Icon loader on the server (#3181)

One other item I added is that if you have a one dimensional list of items, you can populate the Dictionary with the keys but simply set the values to "". In this scenario the InputList will use the keys for both the option value and name.

Dictionary:
{ Key = "Option1", Value = ""},
{ Key = "Option2", Value = ""}

DataList
< option value="Option1" > Option1 < /option >
< option value="Option2" > Option2 < /option >

(you could obviously accomplish the same thing by populating both the key and value with the same string)

[leigh-pointer]

@sbwalker pretty cool. I will populate the IconResources File with the Icon data.

[sbwalker]

@leigh-pointer I included an example in the RESX file for Account Login to demonstrate how the icon names can be translated into "friendly" names using localization.

This new component fills a gap between a standard Select element and the AutoComplete component. There are distinct use cases for each of them:

Select - for a smaller list of items, user must select an item from the list
InputList - for a smaller list of items, user can select an item from the list or enter a custom value
AutoComplete - for a large list of items, user can filter list based on input, they must choose an item from the list