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