Saturday, May 12, 2012

Umbraco powered CheckBoxList or DropdownList nodes in uCommerce admin area

uCommerce is a great e-commerce engine for Umbraco and high on our list of options when evaluating new e-commerce projects at The Site Doctor.

One thing that has always bugged me however is the lack of extensibility on the admin backend. This is something I've discussed with Søren in the past and I believe is on the cards to be resolved in the upcoming v3 release but we wanted to see if there was a way we could get it working in the current release. Thanks to Dan's digging we've found it is (ish).

Skip to the downloads.

A Little Background

Before I dive into the code and overview how you should get it all wired up, I think it's worth understanding how uCommerce is structured out of the box:

• Each uCommerce section has it's own folder under the "umbraco/uCommerce" folder so if you want to extend the functionality for the "Product Catalog" area then you will need to look in the "Catalog" folder.
• The ASPX files are the main containers (e.g. EditProduct.aspx) and don't generally include any logic as they load up the various UserControls (the ASCX files) as tabs.
• Adding custom tabs can be done through the uCommerce_AdminTab table but that's outside the scope of this post but Lasse has a good introduction on his blog.

As we plan to alter the product details edit functionality, we'll need to make a few changes to EditProductBaseProperties.ascx. It's worth taking a quick look around the file if you've not before as we've re-ordered the boxes, added classes and hidden the SKU field before, all of which is often useful. You'll notice at the end of the file there's  a repeater "ProductPropertyRepeater" -this is where uCommerce outputs the various custom properties you've setup.

Why's it useful?

Have you ever felt limited by the options of Text/Boolean/Enum/Image/Number and RichText and wished you could implement your own cool control like an image cropper or checkbox list? What about driving that control with data from Umbraco or another data source? If you have, this is the blog post for you as it handles all those scenarios.

Getting Started

If you don't want to know how to do this yourself you can click here to skip to the downloads and get started straight away.

Caution: If you want a CheckBoxList or your own custom control, you need to be running v2.6 as it adds IWebControlAdapter. As of v2.6 I'm not convinced IWebControlAdapter is fully implemented as it allows you to retrieve the value from the control but we will need to override the UserControl which outputs the control which feels hacky.

Create a custom control

Unless you want a fairly standard control (TextBox, CheckBox, DropDownList or ContentPickerUCommerce) you'll need to create a control which uses the IWebControlAdapter interface. This will mean uCommerce is able to get the value from it. You will need to implement two methods:

• Adapts(Control) - allows you to specify whether it is a control you will be managing.
• GetValue(Object) - allows you to specify what value the control contains In it's entirety it could be pretty simple:

namespace TheSiteDoctor.Web.uCommerce.Admin.UI
{
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Linq;

    using UCommerce.Presentation.Web.Controls;

    public class UCommerceUmbracoDrivenCheckboxList : CheckBoxList, IWebControlAdapter
    {
        public bool Adapts(Control control)
        {
            return control is UCommerceUmbracoDrivenCheckboxList;
        }

        public object GetValue(object control)
        {
            var li = (UCommerceUmbracoDrivenCheckboxList)control;
            var values = (from ListItem listitem in li.Items where listitem.Selected select listitem.Value).ToList();
            return string.Join(",", values);
        }
    }
}

Create your own DataTypeControlFactory

uCommerce uses DataTypeControlFactory to determine what control to render in the editor so you'll need to override the default implementation because it doesn't look for IWebControlAdapters at the moment.

This is simple enough, it needs to accept a Page (the page you'll be adding the control to) and the work out what control it should output e.g.:

public class CustomDataTypeControlFactory : DataTypeControlFactory
{
    Page _page;

    public CustomDataTypeControlFactory(Page page)
        : base(page)
    {
        _page = page;
    }

    public Control CreateCustomControl(IProductProperty productProperty)
    {
        if (productProperty == null)
            throw new ArgumentNullException("productProperty");

        return CreateCustomControl(productProperty.ProductDefinitionField, productProperty.Value);
    }

    private Control CreateCustomControl(ProductDefinitionField productDefinitionField, string value)
    {
        var fieldType = productDefinitionField.DataType.TypeName;

        if (fieldType.StartsWith("Something"))
            return base.CreateControl(productDefinitionField, value);

        // Some logic to work out whether you should be creating the control
        return customControl;
    }
}

Add a custom ProductPropertyEditor.ascx

Now you'll need to create your own ProductPropertyEditor.ascx which calls your new DataTypeControlFactory:

public partial class CustomUcommerceProductPropertyEditor : ProductPropertyEditor
{
    protected new void Page_Load(object sender, EventArgs e)
    {
        InitializeControl();
    }

    public override void DataBind()
    {
        base.DataBind();
    }

    private void InitializeControl()
    {
        Controls.Clear();
        Control child = CreateControlToRender();
        Controls.Add(child);
    }

    private Control CreateControlToRender()
    {
        if (ProductProperty == null)
        {
            throw new InvalidOperationException("Cannot create control, ProductProperty not set.");
        }

        var factory = new CustomDataTypeControlFactory(Page);
        return factory.CreateCustomControl(ProductProperty);
    }
}

You may notice that we're clearing the controls in the InitializeControl which is called from Page_Load whereas uCommerce makes the same call from DataBind(); this is intentional. I've not yet figured out why but if you don't do it from Page_Load, uCommerce still outputs a TextBox.

Wire it all up

To get this all outputting, you now need to replace the call to ProductPropertyEditor in EditProductBaseProperties.ascx with a reference to your own ASCX file, you can do this by updating this line:

<%@ Register Src="~/Umbraco/UCommerce/Controls/ProductPropertyEditor.ascx" TagPrefix="commerce" TagName="ProductPropertyEditor" %>

To:

<%@ Register Src="~/Umbraco/UCommerce/Controls/[YourFileNameHere].ascx" TagPrefix="commerce" TagName="ProductPropertyEditor" %>

Edit your Presenters.config

At this point if you were to load up your uCommerce backend you'd find that it outputs as intended but when you saved the file you'd either get an error or the value doesn't save. The reason for this is although you've replaced the display aspect of the editor, uCommerce is still looking at it's old "GetValue" implementation instead of your new control.

Open /umbraco/ucommerce/configuration/presenters.config and add a reference to your control which implements the IWebControlAdapters interface:

<component id="UCommerceUmbracoDrivenCheckboxList"
			service="UCommerce.Presentation.Web.Controls.IWebControlAdapter, UCommerce.Presentation"
			type="Your.Custom.uCommerce.Namespace.ControlName, Your.Custom.uCommerce.AssemblyName" 
			lifestyle="PerWebRequest"/>

That's it, you're done, you can now add your own controls to the backend of uCommerce.

Download

To make life easier I've packaged the files up into an Umbraco package and have also added the source:

Download the source code with references (C#) - 800KB

Download the Umbraco Package - 12KB

Instructions on using the package

If you download the source code you may have noticed we're doing some funky things with the DataTypeName. The idea behind the control is that it allows us to output a DropDownList or CheckBoxList containing values based on a Document Type and start node purely from the name of the DataType.

I can go into more detail about how we're doing this if it's of interest, just leave me a comment below but to start using it straight away you will need to use the following naming convention for your DataType's name:

1. TSD_: This is the prefix we use to identify whether it's a control we should be handling
2. Control Type: Currently this can either be "ddl" for a DropDownList or "chkl" for a CheckBoxList
3. Start Node Id: This should be the id of the Umbraco parent node. You can cheat and use the root node but it's best to use the parent
4. Document Type: This is the Document Type's alias to use

Example: if you wanted a list of checkboxes for ShapeType (as above) then your name would be: TSD_chkl_1234_ShapeType and a DropDownList would be: TSD_ddl_1234_ShapeType

What next?

This is something we're using more and more in uCommerce these days as it allows us to use the power of Umbraco to power uCommerce which is allowing us to do some really interesting things. Although we'll only be developing it as we need it at the moment we do have plans to add support for:

• Radio Button Lists
• Image Cropper
• Adding nesting to the list of items (to offer better support for hierarchical data)
• Powering it by the members and media sections

Umbraco powered CheckBoxList or DropdownList nodes in uCommerce admin area

Useful Links:            Comments [2]  Trackback

Tags: ASP.Net | C# | Development | eCommerce | Hacking | The Site Doctor | uCommerce | Umbraco | Web Development

Tuesday, May 29, 2012 2:43:44 PM (GMT Daylight Time, UTC+01:00)

Awesome post!

I just wanted to add that we're expanding the support for custom data types in uCommerce 3 due out very soon.

It'll support adding entirely new data types in a much more straightforward manner: basically all you need to do is implement one or in some cases two interfaces and you're good to go.

Søren Spelling Lund

Friday, August 17, 2012 10:43:30 AM (GMT Daylight Time, UTC+01:00)

Thanks for this very helpful post!

Nina