Using the uComponents CheckBoxTree in Umbraco

The uComponents suite for Umbraco is great but there is little in the way of documentation for a lot of the controls. 

The CheckBoxTree is one such control and at a recent job, I needed to implement this functionality to give the user the ability to add their own Accomodation Types and then select them in a content page.

This was performed on Umbraco 4.7.2 with uComponents installed direct from the Package Repository:

  1. Create a couple of Document Types, one called Settings (or similar), another called Accomodation Types and a third called Types.
  2. In the content tree, setup the content area to have a structure similar to the following, using the Document Types you just created
  3. You will see here the Settings/Accomodation Types/Type structure. Create as many types as you need. Make a note of the nodeID of the Accomodation Type as you will need this for the DataType.
  4. Now create a new data type, select uComponemts:CheckBoxTree and click the save icon on the toolbar.
  5. Once it's saved, set the properties as follows (replace 1116 with the nodeID you took in step 2) The key here is the XPATH Start Node which in our case is //*[@isDoc and @id = '1121']. We then use the xPath Filter to restrict the types we need to see.
  6. Now add a new Document Type Property to your homepage or other content page where this will be used. For the type of control, select the Accomodation Datatype we just created. When you click on your page, you should now see something like the following

Thats it, simple - you can now use XSLT or Razor or whatever you fancy to retrieve your property values and process in the normal way

Need an Umbraco Master?

Here at Simon Antony, we have an in house certified Umbraco Grand Master available for hire. Got a problem with your site, need architecture advice, give us a call to speak to Simon directly and see how we can help

Contact Simon Today!