LabelPicker

From Sense/Net Wiki
Jump to: navigation, search
  •  
  •  
  •  
  •  
  • 100%
  • 6.0.7
  • Enterprise
  • Community
  • Planned

Overview

The Label Picker is a javascript control that displays a textbox into which users can type search expressions in order to search for specific Content in the Content Repository and the selected Content are then displayed as removable labels in the box.

LabelPicker control

Details

Adding labels via searching

The label picker uses jQuery UI's autocomplete to allow searching in the Content Repository by typing parts of the content name or its field data in the search box:

Searching with LabelPicker

Selected Content are displayed as labels in the search box. Labels are links that navigate to the given Content. Labels can be removed, and the search box expands automatically with multiple labels:

Multiple labels LabelPicker

Adding custom labels

A LabelPicker can be used together with a Content Picker, or any other javascript control to allow picking and adding labels from outer source:

User selected in Content Picker
Selected user is added as a Label

Selecting Content with path

Selecting a Content is also possible by typing its path in the searchbox. Typing '/' will show all possibilities from the defined search root - if the search root is /Root/IMS, then '/' will show children of the IMS folder, otherwise it is interpreted as '/Root'. See #Usage on how to set a search root for the Label Picker.

1
2
3
4

Usage

To include a LabelPicker in your page simply create a div in the markup, all the rest will be handled by javascripts:

   <div class="mypicker"></div>

To turn this div into a LabelPicker, include SN.LabelPicker.js in your page and use the create method:

   /// <depends path="$skin/scripts/sn/SN.LabelPicker.js" />
 
   // create a label picker into the div. Search Users and Groups from under /Root/IMS, start searching after 2 chars, use builtin autocomplete func
   SN.LabelPicker.create({ 
      container: $('.mypicker'), 
      autocompleteFunc: null, 
      searchRoot: '/Root/Sites/Default_Site', 
      contentTypes: 'Car,File', 
      minLength: 2 });

The create method accepts an options parameter with the following members:

  • container: the jQuery object for the div to contain the picker.
  • autocompleteFunc: an optional parameter to define custom autocomplete func instead of the built-in one. Use this to provide your custom logic if the options don't provide you enough flexibility. The built-in function handles search with keywords and paths.
  • searchRoot: the root path for queries. Keyword search will search for Content under this path, and path search will start with this path when entering '/'.
  • contentTypes: the Content Types of pickable Content.
  • minLength: the number of characters to be entered before keyword search starts. This does not affect path search.

Once created, LabelPicker provides methods to add labels and to retrieve ids of picked Content:

   // add a custom label (parameters: container, id, displayname, path)
   SN.LabelPicker.addLabel($('.mypicker'), 1111, 'displayname', 'path');
 
   // get results
   var labelIds = SN.LabelPicker.getLabelIds($('.mypicker'));

Example/Tutorials

Related links

References