How to: Create a very basic cutomized Ribbon Control element in SharePoint 2010

Hi all,

SharePoint 2010 sports a brand new fluent user interface and most evident part is the "Ribbon" interface. Ribbon is highly flexible and contextual. When we try to home page, we can view the "Browse" and "Page" tabs.

Developers can leverage the ribbon control and extend to great extent. In this post, I will show a very basic customized ribbon control.

Step1: We first create a New Project in Visual Studio 2010  Beta 2/RC >> Choose "SharePoint 2010" as base template >> select "Empty SharePoint Project" >> Name "NewUIRibbonControl" and click OK.

Step2: Right click on "NewUIRibbonControl" >> Add >> New Item >> Under SharePoint 2010 template create a empty element named "NewUIRibbonControl"

Step3. We add a CustomAction which is root of server ribbon control. ID, RegistrationList, RegistrationID and Location has to be set. Location is appears on the CommandUI.Ribbon.

Later we deal with CommandUIExtension, CommandUIDefinitions where specifically define the location of the commad. (Location=Ribbon.Documents.New.Controls._children)

We create a simple button under "CommandUIDefinition" with its properties such as Alt, Command, LabelText etc. We also define the "CommanUIHandlers" where we define a "CommandAction". The action is simple javascript call to an external web site.

Step4: Deploy the solution. 

Step5: Navigate to "Shared Documents" >> click on "Document" tab. We can see the help button. We can have more advanced scenarios as well.

Cheers,

--aaroh

Download the source.