Creation mode for Midgard's chooser widget

cover image for Creation mode for Midgard's chooser widget

Midgard’s datamanager2 form handling library has a very nice jQuery-powered chooser widget which enables search-based selections. This is often used in situations where the data set user is choosing from is large, as is often the case when selecting persons from a large organization for instance.

Today we added creation support for the chooser to deal with situations when no matches were found.

Here is a quick example of adding related event from calendar into a news item. The chooser for doing this appears as a search box:

Chooser-Related-Events

Typing a query does a live search which presents the results below. Items can be chosen either by clicking or with keyboard:

Chooser-Search

If the desired result was not found, clicking the “+” icon opens a window for creating a new event:

Chooser-Creation-Iframe

Once the event has been saved the window will close and the newly created item will be placed as a chosen item in the chooser:

Chooser-Related-Events-Created
(yes, we still need to fix start and end timestamp rendering here)

Creation mode support has been added only to net.nemein.calendar so far, but we will add it to other places as the need arises.

Enabling creation mode in a chooser is relatively simple. Just point the chooser to the appropriate creation URL in the datamanager schema:

'widget' => 'chooser',
'widget_config' => array
(
  'clever_class' => 'event',
  'creation_handler' => '/event_calendar/create/chooser/event',
), 

The UI model used here closely resembles how Yahoo’s Upcoming handles addition of new event venues:

Upcoming-Add-New-Venue

Technorati Tags: ,


Read more Midgard posts.