Custom ribbon button

[Alexander Bautz]

Hi,
I got a request for a code example to insert a custom button in the ribbon. Here is an example – tested in SP 2013 so you might need to change some parts for SP 2010 support.

function addCustomRibbonButton(){
	if($("#customRibbonButton").length===0){		
		var b = [];
		b.push("<li id='customRibbonButton' class=ms-cui-group unselectable='on'>");
		b.push("<SPAN class='ms-cui-groupContainer' unselectable='on'>");
		b.push("<SPAN class='ms-cui-groupBody' unselectable='on'>");
		b.push("<SPAN class='ms-cui-layout' unselectable='on'>");
		b.push("<SPAN class=ms-cui-section unselectable='on'>");
		// Approve		
			b.push("<SPAN class=ms-cui-row-onerow unselectable='on'>");
			b.push("<A id='approveAllButton' class='ms-cui-ctl-large' role=button onclick='customButtonClickFunc();return false;' href='javascript:;' unselectable='on' mscui:controltype='Button'>");
			b.push("<SPAN class='ms-cui-ctl-largeIconContainer' unselectable='on'>");
			b.push("<SPAN class=' ms-cui-img-32by32 ms-cui-img-cont-float' unselectable='on'>");
			b.push("<IMG style='TOP: -129px; LEFT: -255px' alt='' src='/_layouts/1033/images/formatmap32x32.png' unselectable='on'>");
			b.push("</SPAN>");
			b.push("</SPAN>");
			b.push("<SPAN class=ms-cui-ctl-largelabel unselectable='on'>BUTTON NAME</SPAN>");
			b.push("</A>");
		// Reject	
		b.push("</SPAN>");
		b.push("</SPAN>");
		b.push("</SPAN>");
		b.push("</SPAN>");
		b.push("<SPAN class='ms-cui-groupTitle' unselectable='on'>GROUP LABEL</SPAN>");
		b.push("</SPAN>");
		b.push("<SPAN class='ms-cui-groupSeparator' unselectable='on'></SPAN>");
		b.push("</li>");
		setTimeout(function(){
			$("ul.ms-cui-tabBody").append(b.join(''));

		},100);
	}
}
setInterval(function(){
	addCustomRibbonButton();
},1000);

function customButtonClickFunc(){
	alert("Clicked");
}

Please note that this is an example, and you will have to change the image and the button text / group label by editing the code example.

Hope this comes in handy.

Alexander

[Author]

Posts