Add ribbon tabs to SharePoint pages, Visual Web-Part,
UserControl or ApplicationPage: C#, VB.NET

Ribbon Designer
for Microsoft® SharePoint® and Office 365

Integrating Ribbon Designer with existing SharePoint solutions

The Ribbon Designer easily integrates with your SharePoint 2010 and 2013 projects whether you develop for on-premise or Office 365. You use it as a SharePoint feature to create a central point for the Ribbon UI related logic of your project. You can use the Ribbon Designer to add custom ribbon tabs and controls to SharePoint pages, lists, document libraries and forms. You can also enable the Ribbon UI for a Visual Web Part, User Control or Application Page items.

Either way, you get the designer surface, server-side components and the JavaScript client object model at your disposal. With the designer, you get a most sophisticated Ribbon UI created in minutes. With the object model, you control all aspects of how your Ribbon looks and how it works.

Step 1. Add Ribbon Designer to your project

The Ribbon Designer fully supports farm and sandboxed solutions and is added to either project in a uniform way.

Farm or sandboxed solution: add a feature

For a farm or sandboxed solution you add a Ribbon Designer feature.

Ribbon Designer on an application page, user control or visual web part

For a farm solution only, you can add the Ribbon Designer onto an application page, user control or visual web part.

Step 2. Import existing Ribbon XML (optional)

If you have an XML file describing the Server Ribbon markup, you can import it.

This creates a set of Ribbon components representing the Ribbon UI of your SharePoint project.

Step 3. Improve the Ribbon UI of your SharePoint solution

With the Ribbon Designer you create any sleek user interface in minutes. The screenshot below demonstrates a Ribbon tab with all possible control types supported by the Server Ribbon Schema such as Button, CheckBox, ComboBox, DropDown, Menu, etc.

Step 4. Specify the context and position for your Ribbon controls

To specify the context in which your controls will be displayed, use the ItemType property of the ADXSPRibbonTab component.

You can further refine the context using the Ribbons and Context properties of the ADXSPRibbonTab component. Also, you can position your control on a built-in Ribbon tab and show contextual tabs.

Step 5. Handle events of the SharePoint Ribbon controls

The Ribbon components provide a coherent set of server and client-side events allowing handling almost any aspect of using Ribbon controls in SharePoint 2010, 2013 and SharePoint Online solutions.

Step 6. Add dynamicity to the SharePoint Ribbon UI

The flexibility of the client and server object models of the Ribbon components allows creating advanced UI solutions really easily.

			SharePointProject2.SPRibbon.prototype.CreateMenu = function (sender) {
				// Section 1
				var menuSection = sender.AddMenuSection("MySection1ID");
				menuSection.Caption = "Section 1 Caption";

				// Button 1
				var button = menuSection.AddControl("MyButton1ID", "Button");
				button.Description = "My Button 1 Description.";
				button.Caption = "My Button 1 Caption";
				button.Alt = "My Button 1 Alt.";
				button.Enabled = true;
				button.ToolTipTitle = "My Button 1 Tooltip Title";
				button.ToolTipDescription = "My Button 1 Tooltip Description";
				button.ToolTipHelpKeyWord = "My Button 1";
				button.ToolTipShortcutKey = "Ctrl+Shift+Z";
				button.OnClickEventName = "ClickEventHandler";

				// Popup 1
				var popup = menuSection.AddControl("MyPopup1ID", "FlyoutAnchor");
				popup.Caption = "My Popup 1 Caption";
				popup.PopulateDynamically = false;
					popup.OnMenuCreateEventName = "OnPopulate_DynamicHandler";

				// Section 2
				var menuSection2 = popup.AddMenuSection("MySection2ID ");
				menuSection2.Caption = "Section 2 Caption";

				var button2 = menuSection2.AddControl("MyButton2ID", "Button");
				button2.Description = "My Button 2 Description.";
				button2.Caption = "My Button 2 Caption";
				button2.Alt = "My Button 2 Alt";
				button2.OnClickEventName = "ShowId";
			}

			SPRibbonProject.SPRibbon.prototype.ShowId = function (sender) {
				alert(sender.getId());
			}
			

And this is what the above code produces:

Step 7. Deploy your SharePoint solution

Whether you deploy your solution to an on-premise or cloud-based SharePoint site such as the Office 365 site, you need to deploy only one assembly. No extra steps are required.