Enterprise: Dropdown: SOHO-8127 Template support

[clepore]

We would like to request the ability to use templates for the single select and multi-select dropdown controls.

Functionality similar to autocomplete were you can define a template and apply it to the control.

Templating the dropdown is a must have.
Templating what shows in the field would be a nice to have.

Without these features we have reverted to using the Select2 control but would prefer to be 100% soho controls.

[EdwardCoyle]

There are a handful of existing features in Dropdown that would be better served by this change, such as:

• Badge display
• Icons inside the list items
• Images inside the list items

So part of getting this ticket to 100% would involve stripping the existing features out, and replacing them with a templated version. I'd personally like to a see a Dropdown component with a single render step for list items that covers all these cases without having so many code paths. Not sure what time will allow for.

[davidcarlsonberg]

This ticket involves a major overhaul of the Dropdown Component (recreation and tear down of multiple aspects). I've rerated as an [8] and moved to Dec-Jan sprint. Happy to hear thoughts on it. I would imagine it should be broken down into smaller parts to properly plan for its execution.

[tmcconechy]

Maybe could break it down into

• adding support for template with an option
• refactoring existing functionality to use the template

[EdwardCoyle]

Trying to spec this out further so we can move on at least part of it this sprint. @tmcconechy @deep7102 @davidcarlsonberg @clepore, thoughts?

• [ ] Create one setting each for passing in HTML markup that represents:
  
  
  
  • componentTemplate - The in-page part
  
  
  • listTemplate - The open/close list
  
  
• [ ] Implement a separate render step for each
• [ ] Tie in each render step to the current event/listopen/listclosed scaffolding based on whether or not each setting is populated
• [ ] Account for the following states on each list item:
  
  
  
  • icons
  
  
  • selected (checked/unchecked)
  
  
  • disabled
  
  
  • hidden
  
  
• [ ] Account for the “data-val” attribute properly during the list render step.

As Tim said above, we punt on refactoring the existing functionality and try to get most of this stood up before we start changing what's there - that will be a second ticket. That being said, after looking at this further, I may still rate what's outlined above as an [8].

I raised #1329 for the follow-up deprecation work

[clepore]

A few thoughts:

• I do not think we should do a componentTemplate, but maybe specify a data attribute of the text they want to show up when something is "selected"
  
  
  
  • similar to autocomplete, but without using extra html (because it's stripped out anyway)
    
    <a href="#" tabindex="-1" role="option" data-display="Alex [email protected]"> <span><i>Alex</i> Mills</span> <small>[email protected]</small> </a>
  
  
• We should pre-populate the listTemplate setting with the default template rather than checking if its null
• Also need to make sure to custom templates with searching, result highlighting, and super long dropdowns will all be speedy, since it's common that dropdowns have 500-1000 results with Infor products.

[davidcarlsonberg]

I think I would change, and this is minor, selectable to selected. Selectable reads to me as disabled or not; selected as checked/unchecked.
Otherwise, looks good to me.

[EdwardCoyle]

selected also meshes better with existing IDS Enterprise API. 👍

[EdwardCoyle]

@clepore, a couple things:

• I think we need a template of some sort for the in-page part, if we allow customization of the list items -- primarily to support cases like this one:

• Agreed on defaulting the template setting for the list to our own, but my thinking on leaving it null was to allow for the continued use of the current Dropdown render method (which is not templatable in its current form), until we get to the point where the "templated" system can become the default.

Definitely agree on your last point. I predict it'll be similar to the performance we see in the Listview, which isn't too bad with that many items.

[tmcconechy]

Seems like a duplicate of https://github.com/infor-design/enterprise/issues/1329