Typeahead Control - Consistent Look and Feel

[mikeblum]

There is now a typeahead plugin at /common/typeahead that has standardized styling/look & feel. This was used in the Wizard in an attempt to standardize our twitter/typeahead.js instantiations.

@dgrumieaux

[gsteimer]

@mikeblum - what do you mean by the search sidebar?

@dgrumieaux @zkeller - thoughts? It would be nice to standardize the typeahead controls across HPI and AW. Is this the direction we should go?

[zkeller]

If the module is robust enough to handle what we need for formsupport, continuity is always a good thing. I assume it should be able to handle the other places we use typeahead in hpi, those are pretty basic use cases.

[zkeller]

@mikeblum by typeahead, do you mean a text input, or the formsupport autocomplete - input with dropdown button?

[dgrumieaux]

I think this is the right direction to go in - my only caution would be to not underestimate the effort of integrating this into formsupport. @zkeller has a better perspective than I on what this might take.

[mikeblum]

I mean an input box (typeahead) with an adjoining dropdown. Maybe we should make it configurable to hide/show the dropdown?

[gsteimer]

All of the typeaheads in HPI/AW should have typeahead ability as well as a "view all" button. I don't think it needs to be configurable. I've seen some inconsistency with how this looks in HPI / AW, It would be nice to make these all look the same.

Form Support - click arrow

Form Support - start typing

Create AW Form - click arrow

Create AW form - start typing

AW HTML5 Form - click arrow

AW HTML5 Form - start typing

[mikeblum]

The Wizard is the typeahead module instantiated. Is that the correct look and feel?

[gsteimer]

That one looks best to me, although I know some people don't like the lines.

@zkeller @dgrumieaux @cmlewis @mbowen000 - thoughts?

[cmlewis]

I don't think the lines are necessary with the spacing there. Would make it cleaner to remove, IMO.

[gsteimer]

Updated the title of this. We need to make sure the typeahead control has a consistent look and feel for:

• [x] Form Support
• [x] Actions (Ex: Create Wizard Form, Email form, etc)
• [x] ActiveForm select box questions

[cmlewis]

So are we just trying to make the two different typeaheads look the same, or do we want to switch form support to the AW typeahead? Was this decided yet?

[gsteimer]

I think it would be nice if the two used the same codebase, but I think at a minimum they should be using the same control and look/behave the same way. As for which (AW or form support) uses the best typeahead control, I'm not sure.

@mikeblum @zkeller @dgrumieaux - thoughts?

[mikeblum]

I think form support is fine as is, i just added in the templates so it looks the same. There's nothing stopping us from just swapping in the typeahead plugin for actions like createWizardForm.

[eric-gottschalk]

ACTION CREATEWIZARDFORM OC Commit #10560 Changed parameter PAGE_SET_NAME_PARAM to PAGE_SET_TYPE_PARAM to have a better naming convention.

HPI Commit #11546 createwizardform.js Replaced typeahead with the typeahead from typeahead.js. Removed all knockout. Added model to store values for unit testing. Changed naming of 'Action' to 'CreateWizardForm'.

createwizardform.html Removed knockout.

createwizardformSpec.js Updated unit tests to not use old knockout.

CR: Mike Blum for both.

[gsteimer]

@eric-gottschalk - be sure to also test the wizard's delegate and reassign tasks. The lists are currently unstyled on edge.

[eric-gottschalk]

Commit #11590 typeahead.js Added typeahead-item class to remove bordering for typeahead results.

typeahead.html Added typeahead-item class to remove bordering for typeahead drop down results. Added typeahead-item class in the parent container for the results to add an outline border and shadowing.

hpi.styl Removed !important for background color to stop the highlighted color only being orange in drop downs. Added case to remove border for typeahead results. Added case for typeahead results containers to add a border and shadowing. Added case to add styling to typeahead dropdowns.

CR: Mike Blum

[eric-gottschalk]

Commit #11591 formsupport.js Added typeahead-item class to the typeahead results styling to remove the borders of the result items. Added jquery to change the width of the drop down menu to be the same size as the parents width to mimic how the drop down looks from typeahead.js.

formsupport.html Changed the dropdown icon. Added typeahead classes to get the same look as the typeahead styling in typeahead.js.

CR: Christy Lewis

[gsteimer]

@eric-gottschalk - correct me if I'm wrong, but I believe this issue should be fixed except for two places:

• [x] Delegate Wizard Task
• [x] Reassign Wizard Task

[cmlewis]

@eric-gottschalk Please also see the Send Notification typeahead:

[AubreyZielinski]

OC Commit 10813 and HPI Commit 11708: Queryable typeahead has been added and integrated into the reassign wizard workflow task, delegate wizard workflow task, and send notification actions. Knockout was removed from these actions for allow this new typeahead to be added.

[gsteimer]

I'm going to roll back the HPI changes for this one. It looks like something with the Tomcat build is causing this to fail on edge1 and edge2:

[gsteimer]

Reverted in HPI Rev 11715. Whoever picks this one up - work with @AubreyZielinski to fix this on her feature branch before re-merging.

[mikeblum]

Revision: 11729 Author: mblum Date: 2015-02-12 17:18:32.473545 TYPEAHEAD: fix for issue where no value attribute is used, clicking an option failed. unit tests respect a pre-existing value attr or populate it with whats specified at ['searchOn'] and defaults to what is at ['displayValue']

M /trunk/code/test/tests/common/typeaheadSpec.js M /trunk/code/app/modules/common/typeahead.js

Revision: 11727 Author: mblum Date: 2015-02-12 16:07:10.817295 QUERYABLE TYPEAHEAD: cleaned out some legacy code and removed starting / from template path for queryable typeahead. Closing 0900000280033622

M /trunk/code/app/modules/common/queryabletypeahead.js M /trunk/code/project/aep-cook/app/modules/actions/aepcompletewizardapprovalroute.js M /trunk/code/app/modules/wizard/models/workflow/workflowdefinitionbuilder.js M /trunk/code/app/templates/actions/delegatewizardworkflowtask.html M /trunk/code/app/templates/actions/reassignwizardworkflowtask.html M /trunk/code/app/templates/common/typeahead/queryabletypeahead.html M /trunk/code/app/modules/actions/delegatewizardworkflowtask.js M /trunk/code/app/modules/actions/reassignwizardworkflowtask.js M /trunk/code/app M /trunk/code M /trunk/code/app/templates/actions/sendnotification.html M /trunk/code/app/modules/actions/sendnotification.js A /trunk/code/app/templates/actions/sendnotificationrecipients.html (Copied from 11726) M /trunk/code/assets/css/styles/hpi.styl

[gsteimer]

The wizard actions and send notification look good, but it looks like we forgot the send email action:

[cmlewis]

Also:

• [ ] Start Workflow action
• [ ] Delegate Task action

[dhartman25]

Send Email action now uses the new typeahead and removed all knockout. With the refactored action, attaching from collections functionality is limited to a user's private collections. Ability to attach from public collections will be on client request.

SVN revision 12099

[gsteimer]

@dhartman25 - we can't close this one because the start workflow and delegate task items are still outstanding.