2 votes

Cogworks Multi Node Tree Picker Style Field Type for Contour

Intro:

An approximation of the uComponents Multi Node Tree picker for Contour using Patrick Filler’s excellent jquery plugin Chosen. See the “Multiple select” example here http://harvesthq.github.com/chosen/ for an idea of what the plugin does in this context.

You can specify:

  • Placeholder Text. Appears as a placeholder when nothing is selected
  • Minimum items. The minimum number of items allowed. Leave blank for 0 and make sure mandatory is not ticked.
  • Maximum items. The maximum number of items allowed. Leave blank for 99999999 items which is the (theoretical!) maximum.
  • Invalid Message. Message to display when max or min is exceeded. Leave blank for “Number of items selected should be between {min} and {max}."
  • DefaultValue. The field type supports standard umbraco placeholders. e.g. {member.someuComponentsCSVType}

It works with:
  • “Umbraco Documents” Contour prevalue sources (i.e. the pickable nodes for Multi Node Tree Picker style functionality)
  • CSV uComponents Datatypes. If saving the form as an umbraco document, or umbraco member (using the excellent Contour Member Tools http://www.nibble.be/?p=107 ). It can be used to populate existing uComponents datatypes as long as they are in CSV mode

How to install:
  1. Install the package
  2. Include “<link rel="stylesheet" type="text/css" href="/css/chosen.css" />” somewhere on your master page.
  3. Include “<script src="/scripts/chosen.jquery.min.js" type="text/javascript"></script>” somewhere on your master page
  4. (Optional) add “span.multiple-select-validator {color:#ff0000; display:block; clear:both;}” to your css for better formatting of the validator

How to use as a Multi Node Tree Picker
  1. Create an “Umbraco Documents” Contour prevalue source. These serve as the nodes the user can pick from
  2. Add a “Cogworks Multiple Chosen Select” field type to your form.
  3. Set the prevalue type to whatever you created above
  4. Fill in other options as desired (see above)

Known issues.
  • Validation is server side only. Validation messages will only come up after the form is posted. Chosen has a client side events API so I might look at extending this at some point if it’s an issue.

  • Will only work if there is only one server side form validation group on the page. If this is a big issue, let me know and I'll see what I can do,

Version History
  • 1.2: Fixed parsing error when no default value was supplied. Added missing Chosen icons
  • 1.1 Fixed validation error that appeared after two or more postbacks


Enjoy :)

 

Screenshots

Package owner

Tom Smith

Tom Smith

Tom has 172 karma points

Package Compatibility

This package is compatible with the following versions as reported by community members who have downloaded this package:
Untested or doesn't work on Umbraco Cloud
Version 8.18.x (untested)

You must login before you can report on package compatibility.

Previously reported to work on versions:

Package Information

  • Package owner: Tom Smith
  • Created: 27/06/2012
  • Current version 1.2
  • License MIT
  • Downloads on Our: 615

External resources