UI - Saleseforce - Enhance select widgets

[paoloantinori]

This is a...

[x] Feature request
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Documentation issue or request

The problem

In Salesforce component, but this might be shared by most of the one that we have, there are situations where an HTML select shows a huge number of options. The options are sorted, but manually scrolling to them feels very "old school".

Expected behavior

It would be handy to have a live filtering on the content of those select.

Screenshot

[paoloantinori]

@gashcrumb @seanforyou23 @kahboom what do you think about this? Is there a generic enough way to improve the UX for this use case? Either something when we fully control the UI code, like in a custom connector, or something that can follow generic rules, like when we add metadata to a custom connector?

[zregvart]

At a point we had either Patternfly styled Bootstrap Select or Combobox, this proved to be problematic as the data binding failed to work consistently. I think we should stay away from any widgets that substitute native DOM elements and then fail to update them. I'm not sure if we can depend on widgets in Patternfly that are based on Bootstrap widgets and change the DOM element our UI binds to.

[gashcrumb]

Yeah, what @zregvart said :-)

We also tried a regular input with a typeahead, but that required you at least have some idea of what to start typing.

Also UXD did have some designs for a better method of picking salesforce objects but that kinda got put on the back burner. But was basically kinda like a combo filter and listbox kinda deal where all the values are shown and you can either scroll the listbox or put something in the filter and it narrows what's displayed.

@dongniwang @sjcox-rh do you recall that design kinda?

[paoloantinori]

I think we should stay away from any widgets that substitute native DOM elements and then fail to update them

that implies "we can't use PatternFly", so probably not an option at all.

I think @seanforyou23 mentioned that PatternFly.next won't be based on Bootstrap, so that could ease the limits of current usage.

I was more interested into triggering a discussion about options and I'm finding your comments on bad prev experiences useful. We don't have an official requirement right now, but assisting at presentations at customers, I'm expecting that these kind of request will arrive quite soon, so I wanted to start reasoning on this.

Can you share some more details about data-binding failures? Any chance it's because of genuine bugs at PatternFly level? I remember hearing some comments in past of some sub-optimal implementation related to handling observables and such, and I wonder if this might be a case like that.

[zregvart]

We had an issue described in https://github.com/syndesisio/syndesis-rest/issues/733 code that leads to something like this:

https://github.com/syndesisio/syndesis-ui/commit/bd9335ac8e62479724b071d0281a49d2f820af5e#diff-56cdd2b9fdb691d5679fcaf1aea0ee63R11

is problematic, as we bind to values on the original <select> and that part of the code replaces the <select> (or hides it I don't know exactly) with different markup and then we loose the connection between value user selected.

[gashcrumb]

Yeah, it was more an issue trying to mix in a jquery plugin with angular's change detection, the bootstrap select implementation we had pulled in didn't really do a great job of that which lead to a bunch of difficult to solve data binding issues, i.e. the view is wrong, or the data behind the view is wrong etc.

This is the desired design, basically we need to come up with a custom type for this particular form field (and ones like it) and then add a custom form widget, much like we have for duration type fields.

[dongniwang]

Yes @gashcrumb, I think what you shared in the previous comment is the design we have. Please confirm @sjcox-rh

Actually, @sjcox-rh is working on creating a design template for Connections. Do you @zregvart @paoloantinori know if any of the new connectors that we're adding may have the same requirements? Or Salesforce is just a unique one...

cc: @amysueg @seanforyou23 @michael-coker

[paoloantinori]

A customer visited today mentioned they have a huge number of stored procedures, so that would affect the sql connector as well.

In general, the problem applies to all the technologies that are bounded to a dynamic set of configuration entries, loaded externally.

On Thu, 17 May 2018, 16:22 Dongni (Iris) Wang, notifications@github.com wrote:

Yes @gashcrumb https://github.com/gashcrumb, I think what you shared in the previous comment is the design we have. Please confirm @sjcox-rh https://github.com/sjcox-rh

Actually, @sjcox-rh https://github.com/sjcox-rh is working on creating a design template for Connections. Do you @zregvart https://github.com/zregvart @paoloantinori https://github.com/paoloantinori know if any of the new connectors that we're adding may have the same requirements? Or Salesforce is just a unique one...

cc: @amysueg https://github.com/amysueg @seanforyou23 https://github.com/seanforyou23 @michael-coker https://github.com/michael-coker

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/syndesisio/syndesis/issues/2673#issuecomment-389884246, or mute the thread https://github.com/notifications/unsubscribe-auth/ABcz2nTYaZgOcnVnemzdABt_p4visxwXks5tzYesgaJpZM4UC1li .

[gashcrumb]

yeah, ideally maybe the select control could be a bit smarter, i.e. be a normal select when there's less than 10 or 15 entries and then be a control similar to the UX design when there's more than that, so the control used is driven by the amount of data vs. the type.

This would mean though potentially this control could pop up in many spots and would not necessarily be consistent across users, so that could complicate things like documentation, screenshots etc. But I think controls that can adapt better to the data in general would be kinda nice.

[amysueg]

+1 to " I think controls that can adapt better to the data in general would be kinda nice."

[amysueg]

UXD talked about this just now and we think that a patternfly-ng implementation of the combo box control will take care of this, as it will include a search field to quickly jump to a particular item. Assigned to @seanforyou23 to investigate.

fyi @dongniwang @michael-coker @sjcox-rh

[paoloantinori]

Thinking outside of the box. A Chrome extension that allows you to apply the behavior that we want to ANY select box

https://chrome.google.com/webstore/detail/dropdown-search/kgjaddbcmpmacilgaekjfelhdebfjgib

[gashcrumb]

That wouldn't really help for firefox or edge users though. I'm sure this component would make at least a good basis, or we could look at directly using -> https://valor-software.com/ng2-select/

[paoloantinori]

yeah yeah, this was never any kind of solution I wanted to push =). I've posted just to add pressure to devs =P

On Wed, 23 May 2018 at 18:53, Stan Lewis notifications@github.com wrote:

That wouldn't really help for firefox or edge users though. I'm sure this component would make at least a good basis, or we could look at directly using -> https://valor-software.com/ng2-select/

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/syndesisio/syndesis/issues/2673#issuecomment-391421397, or mute the thread https://github.com/notifications/unsubscribe-auth/ABcz2sBggcb3Ljf6GDwhzsCxFR0J5a-Fks5t1ZQFgaJpZM4UC1li .

[stale[bot]]

This issue has been automatically marked as stale because it has not had any activity since 90 days. It will be closed if no further activity occurs within 7 days. Thank you for your contributions!

[riccardo-forina]

Good bot please don't close this yet

[stale[bot]]

This issue has been automatically marked as stale because it has not had any activity since 90 days. It will be closed if no further activity occurs within 7 days. Thank you for your contributions!

[stale[bot]]

This issue has been automatically marked as stale because it has not had any activity since 90 days. It will be closed if no further activity occurs within 7 days. Thank you for your contributions!