Ribbon SharePoint 2010

Nguyen Tuan Hai

hai.nguyen@bamboosolutions.com

http://sharepointvietnam.net

http://tuan-tomy.blogspot.com

Ribbon SharePoint 2010

Introducing the RibbonSharePoint Ribbon ArchitectureCustomizing the Ribbon

Introducing the Ribbon

Site Actions Menu, Navigate Up and Edit page quick access buttons.

Introducing the Ribbon

Page tab

Browser tab

Introducing the Ribbon

Item tab

List tab

Introducing the Ribbon

New form

Introducing the Ribbon

On-demand

Introducing the Ribbon

Context-sensitive operations with controls status

SharePoint Ribbon Architecture

SharePoint Ribbon Architecture

SharePoint Ribbon Architecture

Tab

Group

Control

SharePoint Ribbon Architecture

Example: 14\TEMPLATE\GLOBAL\XML\CMDUI.XML

SharePoint Ribbon Architecture

PageManager: a single instance of every page. It’s defined in CUI.js and holds the focus manager (CUI.Page.FocusManager), command dispatcher (CUI.Page.CommandDispatcher), undo manager (CUI.Page.UndoManager) and other supporting objects.

Ribbon Communication

SharePoint Ribbon Architecture

CommandDispatcher: registers all commands for ribbon and keeps the track of PageComponent.

When command receive to PageManager, PageManager handovers the command to CommandDispatcher then CommandDispatcher routs the command to appropriate PageComponent.

Ribbon Communication

SharePoint Ribbon Architecture

PageComponent: is the one who has actual implementation of commands.

This is inherited by CUI.PageComponent.

So Custom PageComponent should always follow the same class structure as CUI.PageComponent has

Ribbon Communication

Customizing Ribbon

- Declaring controls- Handling commands- Make a context-sensitive and associate with tabs

Customizing Ribbon

LabelMenuMenu SectionMRU Split ButtonSpinnerSplit ButtonTextboxToggleButton

Controls

ButtonCheckboxColor PickerCombo BoxDrop DownFlayout AnchorInsert Table

Customizing Ribbon

Example:

Customizing Ribbon

Handling commands

- Declare command handlers inline in the XML.- Regist a PageComponent to hande more complex commands.

Customizing Ribbon

Handling commands

Customizing Ribbon

Handling commands

Customizing Ribbon

Make a context-sensitive

- Associate with a list template or content type- Use code to bring un-associated tabs to view- Associate web part with contextual group tabs

Customizing Ribbon

Customizing Ribbon

Demo

Reference

[+] SharePointVietNam Forum:http://sharepointvietnam.net/forum/forumdisplay.php/47-Ribbon

[+] MSDN:http://msdn.microsoft.com/en-us/library/ff630938.aspx

[+] SharePoint Bloghttp://blogs.msdn.com/b/jfrost/archive/2009/11/06/adding-custom-button-to-the-sharepoint-2010-ribbon.aspx

[+] SharePoint videos & e-books:http://channel9.msdn.com

FAQ

Q&A