Thursday, 14 November 2013

3 ways of selecting from dropdown with AngularPrime 0.5

Introduction

With the newest release of AngularPrime v0.5, there are now 3 ways you can select values from a list. And they are all based on the same html element <select>.
In the figure below they are shown, from left to right, the dropdown, the listbox and the picklist.

dropdowns
These widgets have a few features in common but there are also things specific for a certain representation.

Common functionality

The first important functionality they have in common is that they can be styled according the theme you have selected. So for instance, when you hover over an element from the list, the background colour of the item changes to indicate the selection you are about to make.

Another feature they share is typical for AngularJS but require some specific code in case of these widgets.  They have the 2-way binding capabilities you are familiar with in AngularJS.  Whenever you select an option in the widget, the selected value is stored in the JavaScript variable (within the scope). But the other way around is also implemented. Whenever you change the variable ‘attached’ to the widget, the visual representation is updated.

The third feature they have in common is the possibility to assign a callback function to the selection event.  There is the possibility to assign a JavaScript function to the selection of an option event, in case you want to perform some additional processing when the user makes a selection.

And the last feature I want to mention here is that all widgets can be disabled in case the state of the screen doesn’t allow a selection at the moment.

Dropdown

This is the classic representation of the selection from a list.  But with AngularPrime you can have some extra functionality.
This is the code to have the AngularPrime dropdown in your page:
<select id="dropdown" pui-dropdown ng-model="selectedCars">
            <option value="1">Volkswagen</option>
            <option value="2">Ford</option>
            <option value="3">Mercedes</option>
            <option value="4">Audi</option>
            <option value="5">BMW</option>
            <option value="6">Honda</option>
            <option value="7">Porsche</option>
            <option value="8">Chevrolet</option>
            <option value="9">Jaguar</option>
        </select>

The additional features are
  • Possibility to filter the options which are shown. By default there are 3 filtering types supported, the start-with, contains and ends-with. But you can write your custom one and use it.
  • The dropdown field van be made editable. In this case the option list is a suggestion list but another value can be accepted.

Listbox

This alternative representation of the selection from the list, is especially handy to allow multiple selections.

This is the code to have the AngularPrime listbox in your page:
<select id="picklist" pui-listbox ng-model="selectedCars">
            <option value="1">Volkswagen</option>
            <option value="2">Ford</option>
            <option value="3">Mercedes</option>
            <option value="4">Audi</option>
            <option value="5">BMW</option>
            <option value="6">Honda</option>
            <option value="7">Porsche</option>
            <option value="8">Chevrolet</option>
            <option value="9">Jaguar</option>
        </select>

Multiple selections can be performed by pressing the Ctrl button when you select or unselect an option with the mouse.

Picklist

With this representation, you not only have the possibility to select multiple options but you can also specify the order of the selected options.

Within the code you have the following markup:
 <select id="picklist" pui-picklist ng-model="selectedCars">
            <option value="1">Volkswagen</option>
            <option value="2">Ford</option>
            <option value="3">Mercedes</option>
            <option value="4">Audi</option>
            <option value="5">BMW</option>
            <option value="6">Honda</option>
            <option value="7">Porsche</option>
            <option value="8">Chevrolet</option>
            <option value="9">Jaguar</option>
        </select>

The additional features are in this case
  • With this widget, there is also the possibility to filter the source and/or the target list of options. Again there are 3 predefined filtering types available, start-with, contains and ends-with but a custom one can also be specified.
  • The selection and de-selection of the options is not only supported with button click but can also be performed by drag and drop.  This makes the user interface very intuitive for the user.

Future

There are other features planned for these widgets in the next or future release.

PrimeUI allows you to specify a template for the ‘rendering of the options.  If you go to the showcase you can see that there is the possibility to include images in the options for example.  That feature will be integrated in the next release of AngularPrime.

For the moment it is only possible to disable the widget completely. In a future version of AngularPrime, there will be the possibility to show the options individually as disabled or enabled.

And the last thing you can expect is that the options are linked to a JavaScript variable so that you can update the list op options which are shown.

Conclusion

With the AngularPrime version 0.5, you now have 3 ways to present the user the selection from a list input type. The encoding in the HTMl is nearly identically, except the directive name. They have some nice features in common like the 2 way binding and the integration with the theme.  And each of it has its specific use case where they can be used at there best.

There are also some nice features planned that will improve the user and developer experience.

Have fun with AngularPrime.

No comments:

Post a Comment