Tips to create custom tabs for
SharePoint 2013 and 2010 ribbons

Ribbon Designer
for Microsoft® SharePoint® and Office 365

Add-in Express Home > Ribbon Designer for SharePoint and Office 365 > Online Guide > Tips to create custom SharePoint ribbons

SharePoint Ribbon tips

Activating a SharePoint ribbon tab when the web page is loaded

As you probably know, you cannot use the .NET code similar to below in sandboxed solutions:


			SPRibbon currentRibbon = SPRibbon.GetCurrent(this.Page);
			currentRibbon.MakeTabAvailable("<Tab Id>");
			currentRibbon.InitialTabId = "<Tab Id>";

The code above doesn't work very well in farm solutions, either: the tab gets selected but it doesn't get activated. The script below allows you to bypass this limitation and activate the tab in both sandboxed and farm solutions.


			var ribbonReady = false;

			function onBodyLoaded() {
				if (!ribbonReady) {
					if ((typeof (_ribbonReadyForInit) == 'function') 
						&& _ribbonReadyForInit()) {
						ribbonReady = true;
						var control = get_SPRibbon().FindControl("AdxspRibbonTab1");
						if (control != null) {
							var tabElem = document.getElementById(control.getFullId() + 
								"-title");
							if (tabElem && tabElem.firstChild)
								tabElem.firstChild.click();
						}
					}
				}
			};

			if (_spBodyOnLoadFunctionNames != 'undefined' 
				&& _spBodyOnLoadFunctionNames != null)
				_spBodyOnLoadFunctionNames.push("onBodyLoaded");

			onBodyLoaded();

Showing a custom Ribbon tab for a given SharePoint list

Add a Ribbon tab component onto the designer surface and set the IdMsp property to List. Now you need to set the ItemType property to the ID of the list. To find out the ID, open Microsoft SharePoint Designer and navigate to your list:

Finding the list ID in Microsoft SharePoint Designer

Specifying the List ID (it's selected in the screenshot above) in the ItemTypes property of the Ribbon Tab component guarantees that the tab will be shown for that list only.

Dealing with built-in ribbon controls <<

See Also