2011 - Adding bells & whistles to the ribbon
-
Upload
chris-oconnor -
Category
Technology
-
view
371 -
download
0
Transcript of 2011 - Adding bells & whistles to the ribbon
SponsorsGold
Silver
Bronze
Adding bells & whistles to the ribbon
Chris O’ConnorOBS
Brisbane 2011
SharePoint Ribbon
• What is it ?
Brisbane 2011
Brisbane 2011
Brisbane 2011
Brisbane 2011
Brisbane 2011
Brisbane 2011
Brisbane 2011
Brisbane 2011
Brisbane 2011
Brisbane 2011
Brisbane 2011
Brisbane 2011
Ribbon Elements
• Tabs
• Contextual Tabs
• Groups
• Controls
Brisbane 2011
Brisbane 2011
Modifying the Ribbon
• Add groups to existing tabs
• Add buttons to existing groups
• Add new tabs
• Add contextual tabs
• Remove controls
• Remove groups
Brisbane 2011
How ? Visual Studio, baby !
• Visual Studio 2010
• SharePoint project
• Feature• ELEMENTS.XML
• XML + JavaScript
Brisbane 2011
HELLO WORLD BUTTON
Demonstration
Brisbane 2011
Brisbane 2011
ELEMENTS.XML
• CustomAction
• CommandUIExtension
• CommandUIDefinition -> collection• Controls -> Button, CheckBox, TextBox, etc
OR
• Tab -> Groups -> Controls
• CommandUIHandlers -> collection• Do stuff !
Brisbane 2011
ELEMENTS.XML
• Additional XML tags
– CustomAction
• ScriptSrc – for external JavaScript file
– CommandUIHandler
• EnabledScript – turns button on/off (code logic)
Brisbane 2011
COPY MULTIPLES – DEMO + CODE
Demonstration
Brisbane 2011
ELEMENTS.XML
• How do I work out WHERE ?• Add tabs/groups
• Check within the OOTB XML :• {SharePointRoot}\TEMPLATE\GLOBAL\XML
• Search/Find the TAB or GROUP• Eg. Ribbon.Documents.Copies
Ribbon.Documents.Copies
• Need it when removing buttons
Brisbane 2011
ELEMENTS.XML
• Contextual Tabs• More involved
• Wrap tags around YOUR tab
• Code to turn it on/off – enable
• Brian Farnhill’s session – after lunch
Brisbane 2011
ELEMENTS.XML
• CommandUIDefinition (aka Controls)• Button • CheckBox• ComboBox• DropDown• FlyoutAnchor• GalleryButton• Label • MRUSplitButton• Spinner • SplitButton• TextBox• ToggleButton
Brisbane 2011
ADD TAB + GROUP + CONTROLS
Demonstration
Brisbane 2011
ELEMENTS.XML
• New elements within XML• Scaling
– MaxSize
– Scale
• GroupTemplate– Layout -> Section -> Row -> ControlRef
• Define the size of buttons / layout
Brisbane 2011
ELEMENTS.XML
• Removing controls – EASY !
Brisbane 2011
REMOVE GROUPS + BUTTONS
Demonstration
Brisbane 2011
ELEMENTS.XML
• User interaction
• Notifications SP.UI.Notify.addNotification
• StatusSP.UI.Status.addStatus
Brisbane 2011
NOTIFICATIONS + STATUS
Demonstration
Brisbane 2011
Notifications & Status
• JavaScript – client side
• Tricky if wanting to do from Server Side
• Run C# code during PostBack
• HOW ?• Define JavaScript
• Inject in Page
• Will execute after page is loaded
• …. IT WORKS !
Brisbane 2011
What did we just see ?
1. Master Page – move controls
2. Add Button – Hello World
3. Button – Copy Multiples
4. Add Tab + Groups + Controls
5. Remove Groups & Buttons
6. Notifications & Status
Brisbane 2011
Gotcha’s
Rendered client side
Cached – need to refresh browser
Close and re-open – not just CTRL-F5
Wrong tags or invalid IDs
Can get a JavaScript error
Often just doesn’t appear – frustrating !
Brisbane 2011
Gotcha’s
Adding NEW tab
Scale, Size, TemplateLayout, etc
14 HIVE \ CMDUI.XML
NEED to refer to it – Group + Tab ID’s
*** Take a backup copy !
Brisbane 2011
QUESTION AND ANSWER
SharePoint Ribbon Customisations
Brisbane 2011
Related Links
• Styled Point – ribbon customisationhttp://bit.ly/bS7OES
• Chris O’Brien – customizing the ribbonhttp://bit.ly/4YHumz
• MSDN : ff458369http://msdn.microsoft.com/en-us/library/ff458369.aspx
• My bloghttp://www.sharepointroot.com
Thanks for listening!
Remember to submit your feedback so you can go into the raffle draw at the end of the day! And don’t forget that
you have to be at the draw to claim your prizes!
SponsorsGold
Silver
Bronze