HTML List Builder

Many web application frameworks offer developers a high-level user interface component called a List Builder. Having a standard List Builder would address an evident need (see links below). To avoid confusion with HTML list elements (OL, UL) and date pickers, the term "shuttle" is a reasonable choice. As a starting point for discussion:

<shuttle id="picklist">
  <label for="left-filter">Filter</label>
  <input type="filter" id="left-filter" for="left-shuttle" diacritics="false" case="false">
  <select id="left-shuttle" name="left-shuttle" multiple="multiple" type="source">
    <option value="1" selected="selected"><img src="icon.svg"/> One</option>
  </select>
  <button type="shuttle" arrange="left-up">
  <button type="shuttle" arrange="left-down">
  <button type="shuttle" transfer="left">
  <button type="shuttle" transfer="left-all">
  <button type="shuttle" transfer="right">
  <button type="shuttle" transfer="right-all">
  <button type="shuttle" arrange="right-up">
  <button type="shuttle" arrange="right-down">
  <select id="right-shuttle" name="right-shuttle" multiple="multiple" type="destination">
    <option value="2" type="checkbox">Two</option>
  </select>
</shuttle>

The browser would then be responsible for adding features, including drag and drop. The widget defines common cross-implementation behaviours, including:


·         A standard shuttle component

·         Consistent accessibility controls

·         Checkboxes to address UX issues with selections

·         Images in options

·         Filter none, one, or both multi-select lists

·         Ignore diacritics in filters (e.g., "acai" matches "Açaí palm")

·         Enable case-insensitive filtering

·         Sorting list elements

Numerous implementations include:


·         https://www.primefaces.org/showcase/ui/data/pickList.xhtml

·         http://openfaces.org/documentation/developersGuide/twolistselection.html

·         https://docs.jboss.org/richfaces/latest_3_3_X/en/devguide/html/rich_listShuttle.html

·         https://pypi.python.org/pypi/Select-Shuttle/

·         https://harvesthq.github.io/chosen/

·         https://docs.oracle.com/html/E12419_09/tagdoc/af_selectManyShuttle.html

·         https://github.com/nuxeo-archives/nuxeo-jsf/blob/master/nuxeo-platform-webapp-base/src/main/resources/web/nuxeo.war/widgets/shuttle_widget_template.xhtml

·         https://www.smartclient.com/smartgwt/showcase/#grid_db_dragging_featured_category

·         https://github.com/rabihkodeih/bootstrap-transfer

·         https://www.virtuosoft.eu/code/bootstrap-duallistbox/

·         https://github.com/Geodan/DualListBox

·         https://xdsoft.net/jquery-plugins/shuttle/

·         http://quasipartikel.at/multiselect/

·         http://crlcu.github.io/multiselect/

·         http://jsfiddle.net/U8Xre/

·         https://dzone.com/articles/an-html-list-builder

·         http://doejo.com/blog/solutions-for-implementing-user-friendly-multi-select/

·         https://stackoverflow.com/a/2854814/59087

Thoughts?

___
Dave Jarvis | Senior Software Developer | CGI
1405 Douglas Street, 6th Floor, Victoria BC  V8W 2G2
T: 250-220-1464 | cgi.com

CONFIDENTIALITY NOTICE: Proprietary/Confidential Information belonging to CGI Group Inc. and its affiliates may be contained in this message. If you are not a recipient indicated or intended in this message (or responsible for delivery of this message to such person), or you think for any reason that this message may have been addressed to you in error, you may not use or copy or deliver this message to anyone else. In such case, you should destroy this message and are asked to notify the sender by reply e-mail.