![Page 1: All about Ribbon in SharePoint 2010 - SharePoint Saturday Vietnam](https://reader036.vdocuments.site/reader036/viewer/2022062703/55531ea1b4c905a7778b4b47/html5/thumbnails/1.jpg)
Ribbon SharePoint 2010
Nguyen Tuan Hai
http://sharepointvietnam.net
http://tuan-tomy.blogspot.com
![Page 2: All about Ribbon in SharePoint 2010 - SharePoint Saturday Vietnam](https://reader036.vdocuments.site/reader036/viewer/2022062703/55531ea1b4c905a7778b4b47/html5/thumbnails/2.jpg)
Ribbon SharePoint 2010
Introducing the RibbonSharePoint Ribbon ArchitectureCustomizing the Ribbon
![Page 3: All about Ribbon in SharePoint 2010 - SharePoint Saturday Vietnam](https://reader036.vdocuments.site/reader036/viewer/2022062703/55531ea1b4c905a7778b4b47/html5/thumbnails/3.jpg)
Introducing the Ribbon
Site Actions Menu, Navigate Up and Edit page quick access buttons.
![Page 4: All about Ribbon in SharePoint 2010 - SharePoint Saturday Vietnam](https://reader036.vdocuments.site/reader036/viewer/2022062703/55531ea1b4c905a7778b4b47/html5/thumbnails/4.jpg)
Introducing the Ribbon
Page tab
Browser tab
![Page 5: All about Ribbon in SharePoint 2010 - SharePoint Saturday Vietnam](https://reader036.vdocuments.site/reader036/viewer/2022062703/55531ea1b4c905a7778b4b47/html5/thumbnails/5.jpg)
Introducing the Ribbon
Item tab
List tab
![Page 6: All about Ribbon in SharePoint 2010 - SharePoint Saturday Vietnam](https://reader036.vdocuments.site/reader036/viewer/2022062703/55531ea1b4c905a7778b4b47/html5/thumbnails/6.jpg)
Introducing the Ribbon
New form
![Page 7: All about Ribbon in SharePoint 2010 - SharePoint Saturday Vietnam](https://reader036.vdocuments.site/reader036/viewer/2022062703/55531ea1b4c905a7778b4b47/html5/thumbnails/7.jpg)
Introducing the Ribbon
On-demand
![Page 8: All about Ribbon in SharePoint 2010 - SharePoint Saturday Vietnam](https://reader036.vdocuments.site/reader036/viewer/2022062703/55531ea1b4c905a7778b4b47/html5/thumbnails/8.jpg)
Introducing the Ribbon
Context-sensitive operations with controls status
![Page 9: All about Ribbon in SharePoint 2010 - SharePoint Saturday Vietnam](https://reader036.vdocuments.site/reader036/viewer/2022062703/55531ea1b4c905a7778b4b47/html5/thumbnails/9.jpg)
SharePoint Ribbon Architecture
![Page 10: All about Ribbon in SharePoint 2010 - SharePoint Saturday Vietnam](https://reader036.vdocuments.site/reader036/viewer/2022062703/55531ea1b4c905a7778b4b47/html5/thumbnails/10.jpg)
SharePoint Ribbon Architecture
![Page 11: All about Ribbon in SharePoint 2010 - SharePoint Saturday Vietnam](https://reader036.vdocuments.site/reader036/viewer/2022062703/55531ea1b4c905a7778b4b47/html5/thumbnails/11.jpg)
SharePoint Ribbon Architecture
Tab
Group
Control
![Page 12: All about Ribbon in SharePoint 2010 - SharePoint Saturday Vietnam](https://reader036.vdocuments.site/reader036/viewer/2022062703/55531ea1b4c905a7778b4b47/html5/thumbnails/12.jpg)
SharePoint Ribbon Architecture
Example: 14\TEMPLATE\GLOBAL\XML\CMDUI.XML
![Page 13: All about Ribbon in SharePoint 2010 - SharePoint Saturday Vietnam](https://reader036.vdocuments.site/reader036/viewer/2022062703/55531ea1b4c905a7778b4b47/html5/thumbnails/13.jpg)
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
![Page 14: All about Ribbon in SharePoint 2010 - SharePoint Saturday Vietnam](https://reader036.vdocuments.site/reader036/viewer/2022062703/55531ea1b4c905a7778b4b47/html5/thumbnails/14.jpg)
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
![Page 15: All about Ribbon in SharePoint 2010 - SharePoint Saturday Vietnam](https://reader036.vdocuments.site/reader036/viewer/2022062703/55531ea1b4c905a7778b4b47/html5/thumbnails/15.jpg)
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
![Page 16: All about Ribbon in SharePoint 2010 - SharePoint Saturday Vietnam](https://reader036.vdocuments.site/reader036/viewer/2022062703/55531ea1b4c905a7778b4b47/html5/thumbnails/16.jpg)
Customizing Ribbon
- Declaring controls- Handling commands- Make a context-sensitive and associate with tabs
![Page 17: All about Ribbon in SharePoint 2010 - SharePoint Saturday Vietnam](https://reader036.vdocuments.site/reader036/viewer/2022062703/55531ea1b4c905a7778b4b47/html5/thumbnails/17.jpg)
Customizing Ribbon
LabelMenuMenu SectionMRU Split ButtonSpinnerSplit ButtonTextboxToggleButton
Controls
ButtonCheckboxColor PickerCombo BoxDrop DownFlayout AnchorInsert Table
![Page 18: All about Ribbon in SharePoint 2010 - SharePoint Saturday Vietnam](https://reader036.vdocuments.site/reader036/viewer/2022062703/55531ea1b4c905a7778b4b47/html5/thumbnails/18.jpg)
Customizing Ribbon
Example:
![Page 19: All about Ribbon in SharePoint 2010 - SharePoint Saturday Vietnam](https://reader036.vdocuments.site/reader036/viewer/2022062703/55531ea1b4c905a7778b4b47/html5/thumbnails/19.jpg)
Customizing Ribbon
Handling commands
- Declare command handlers inline in the XML.- Regist a PageComponent to hande more complex commands.
![Page 20: All about Ribbon in SharePoint 2010 - SharePoint Saturday Vietnam](https://reader036.vdocuments.site/reader036/viewer/2022062703/55531ea1b4c905a7778b4b47/html5/thumbnails/20.jpg)
Customizing Ribbon
Handling commands
![Page 21: All about Ribbon in SharePoint 2010 - SharePoint Saturday Vietnam](https://reader036.vdocuments.site/reader036/viewer/2022062703/55531ea1b4c905a7778b4b47/html5/thumbnails/21.jpg)
Customizing Ribbon
Handling commands
![Page 22: All about Ribbon in SharePoint 2010 - SharePoint Saturday Vietnam](https://reader036.vdocuments.site/reader036/viewer/2022062703/55531ea1b4c905a7778b4b47/html5/thumbnails/22.jpg)
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
![Page 23: All about Ribbon in SharePoint 2010 - SharePoint Saturday Vietnam](https://reader036.vdocuments.site/reader036/viewer/2022062703/55531ea1b4c905a7778b4b47/html5/thumbnails/23.jpg)
Customizing Ribbon
![Page 24: All about Ribbon in SharePoint 2010 - SharePoint Saturday Vietnam](https://reader036.vdocuments.site/reader036/viewer/2022062703/55531ea1b4c905a7778b4b47/html5/thumbnails/24.jpg)
Customizing Ribbon
Demo
![Page 25: All about Ribbon in SharePoint 2010 - SharePoint Saturday Vietnam](https://reader036.vdocuments.site/reader036/viewer/2022062703/55531ea1b4c905a7778b4b47/html5/thumbnails/25.jpg)
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
![Page 26: All about Ribbon in SharePoint 2010 - SharePoint Saturday Vietnam](https://reader036.vdocuments.site/reader036/viewer/2022062703/55531ea1b4c905a7778b4b47/html5/thumbnails/26.jpg)
FAQ
Q&A