Forgot your password?
New user?
Document Actions
#124: ÜberSelectionWidget
- Proposed by
- Alexander Limi
- Proposal type
- User interface
- State
- in-progress
Motivation
We propose to add a selection widget that is flexible enough to handle these sort of selection tasks.
Assumptions
Several other approaches were considered, benchmarked and rejected as possible approaches:
- The traditional forms-based search approach
- This approach is simple, its main disadvantage is that you leave the page when doing a search, and you lose your contextual information.
- Pop-ups with search and selection
- This is the classic operating system file requester approach - you open an additional window on top of the current one, and select items. Then you go back to the original form. Might work, but due to the prevalent use of pop-up blockers, this approach has a few problems - and it also is not very single-page web interface-like. Most people dislike windows that pop up, there are several reasons for this, most of which comes from the contextual change, and the fact that they are somewhat slow to load.
- All elements client-side
- In this example, Sony-Ericsson loads all the items in the Javascript on initial page load (try typing "P9" in the search box), and lets the user start typing to narrow down the list. Elegant, but after some benchmarking, it is clear that this approach only works for items in the hundreds, not in the thousands/millions. The size of the dictionary you send with the page would also get prohibitively large as you approach those numbers.
- Minimal space usage before and after use (important in complex forms)
- Scales to an arbitrary amount of items because the elements are on the server, not client-side
- Nice to the server, saves both bandwidth and server CPU
- Avoids page reloads and "losing track of where you were"
- Selecting three users from a user base of a million users
- Selecting a single software package from 20 000 packages
- The search button should be overloaded with a JS onlick event, so if you have JS turned off, it does a normal form submit, loads a separate page with search results, and returns you back to the form you were at when you select an entry. All the existing form values tag along with the forms as hidden inputs, and re-populate the form when you return. This way, it will work even for browsers without Javascript.
Proposal
The widget is modeled on the use case of selection X users out of a large, large set of Y users, and adding them in a particular order to a group.
The approach outlined below fulfills the following criteria:
Solves the selection problem in several typical use cases
Other approaches / Alternative widgets
When the total set of objects is in the 20-200 range, an approach with all the nodes loaded up front and no communication with the server will be faster and more convenient.
Implementation
Below follows a rough HTML mock-up that demonstrates the functionality. The way it looks is probably going to be different, though.
Selection Widget - initial stage
Initially, it looks like a normal search field. It works in the same way as LiveSearch currently does.
Selection Widget after search terms are entered
When you search for "Mozilla", the widget is sends an async request to the server, and gets the results - and expands the list below without leaving the page. Also notice the navigation for previous/next if there are more than X items matching the search terms.
Selection Widget after entry is selected
When you select an item, the search field + result view disappear (again, no page reloads), and the item is selected. If you click the button to remove your selection, they re-appear.
MultiSelection Widget after search terms are entered
This is a slight variation - if you need to select multiple items for a form field, you can do multiple searches, and add things to the collection one by one. Already selected entries should be excluded from the search results.
Risks
Progress log
This PLIP is highly dependant on the AJAX framework being chosen, and as such will not have an implementation ready before the initial review bundle deadline.
A proof of concept from the Archipelago sprint resides at:
https://svn.plone.org/svn/plone/CMFPlone/branches/plip124-ueberselection-widget/
