Mimic SharePoint's "New Item" Split Button

Feb 13, 2012 at 6:42 PM
Edited Feb 13, 2012 at 6:42 PM

I'm trying to mimic SharePoint 2010's "New Item" as seen in this screenshot:

http://dl.dropbox.com/u/93604/img/new-item.png

 

I tried using a SplitButtonDefinition with a ButtonDefinition inside its Controls property, but I can't find a way to set the descriptive text for the buttons (like "Create a new list item." or "Create a new Person" in the above screenshot).

 

The code pasted below creates the split button in this screenshot: http://dl.dropbox.com/u/93604/img/foo-button.png

 

 

new SplitButtonDefinition()
{
	Id = "SplitButton" + ID,
	Title = "Split Button",
	Image = new ImageDefinition() { Url32 = "/_layouts/eqd2/images/ribbon/add.png" },
	CommandJavaScript = "alert('split!')",
	Controls = new ControlDefinition[]
	{
		new ButtonDefinition()
		{
			Id = "FooButton" + ID,
			Title = "Foo",
			ToolTip = new ToolTipDefinition()
			{
				Title = "This is a tooltip title.",
				Description = "This is a tooltip description."
			},
			Image = ImageLibrary.GetStandardImage(12, 7),
			CommandJavaScript = "alert('foo!')"
		}
	}
},

How do I get some descriptive text to show up under "Foo" in that screenshot? I've tried setting the Description property on the ButtonDefinition, but that's marked as obsolete and does nothing.
Coordinator
Feb 16, 2012 at 2:47 PM
Edited Feb 16, 2012 at 2:49 PM

Hmm, very curious! I've fiddled around this a bit and found out that the "New item" split button's menu is populated dynamically by the following javascript methods:

    getNewMenuXml: function(commandId, controlName) {ULSMg8:;
        var $v_0 = new CUI.JsonXmlElement('Menu', { Id: controlName });
        var $v_1 = $v_0.appendChild('MenuSection', { DisplayMode: 'Menu32', Id: controlName + '.Menu.ContentTypes' }).appendChild('Controls', { Id: controlName + '.Menu.ContentTypes.Controls' });
        for (var $v_2 = 0; $v_2 < this.get_newMenuData().length; $v_2++) {
            this.$4j_3(controlName + '.Menu.ContentTypes.' + $v_2.toString(), commandId, this.$d_3[$v_2].ClickScript, this.$d_3[$v_2].LabelText, this.$d_3[$v_2].Description, this.$d_3[$v_2].Image32by32, $v_1);
        }
        return $v_0;
    },
    
    $4j_3: function($p0, $p1, $p2, $p3, $p4, $p5, $p6) {
        $p6.appendChild('Button', { Id: $p0, Command: $p1, MenuItemId: $p2, CommandValueId: $p2, CommandType: 'OptionSelection', LabelText: $p3, Description: $p4, Image32by32: $p5 });
    },

Fluent Ribbon's button definition lacks CommandType and Description attributes. I'm going to explore further and probably make some changes to Fluent Ribbon API to allow this capability.

And yes, thanks a lot for reporting this!