2011 - adding bells & whistles to the ribbon

of 38 /38
Sponsors Gold Silver Bronze Adding bells & whistles to the ribbon Chris O’Connor OBS

Upload: chris-oconnor

Post on 21-Jan-2018

366 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: 2011 - Adding bells & whistles to the ribbon

SponsorsGold

Silver

Bronze

Adding bells & whistles to the ribbon

Chris O’ConnorOBS

Page 2: 2011 - Adding bells & whistles to the ribbon

Brisbane 2011

SharePoint Ribbon

• What is it ?

Page 3: 2011 - Adding bells & whistles to the ribbon

Brisbane 2011

Page 4: 2011 - Adding bells & whistles to the ribbon

Brisbane 2011

Page 5: 2011 - Adding bells & whistles to the ribbon

Brisbane 2011

Page 6: 2011 - Adding bells & whistles to the ribbon

Brisbane 2011

Page 7: 2011 - Adding bells & whistles to the ribbon

Brisbane 2011

Page 8: 2011 - Adding bells & whistles to the ribbon

Brisbane 2011

Page 9: 2011 - Adding bells & whistles to the ribbon

Brisbane 2011

Page 10: 2011 - Adding bells & whistles to the ribbon

Brisbane 2011

Page 11: 2011 - Adding bells & whistles to the ribbon

Brisbane 2011

Page 12: 2011 - Adding bells & whistles to the ribbon

Brisbane 2011

Page 13: 2011 - Adding bells & whistles to the ribbon

Brisbane 2011

Page 14: 2011 - Adding bells & whistles to the ribbon

Brisbane 2011

Ribbon Elements

• Tabs

• Contextual Tabs

• Groups

• Controls

Page 15: 2011 - Adding bells & whistles to the ribbon

Brisbane 2011

Page 16: 2011 - Adding bells & whistles to the ribbon

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

Page 17: 2011 - Adding bells & whistles to the ribbon

Brisbane 2011

How ? Visual Studio, baby !

• Visual Studio 2010

• SharePoint project

• Feature• ELEMENTS.XML

• XML + JavaScript

Page 18: 2011 - Adding bells & whistles to the ribbon

Brisbane 2011

HELLO WORLD BUTTON

Demonstration

Page 19: 2011 - Adding bells & whistles to the ribbon

Brisbane 2011

Page 20: 2011 - Adding bells & whistles to the ribbon

Brisbane 2011

ELEMENTS.XML

• CustomAction

• CommandUIExtension

• CommandUIDefinition -> collection• Controls -> Button, CheckBox, TextBox, etc

OR

• Tab -> Groups -> Controls

• CommandUIHandlers -> collection• Do stuff !

Page 21: 2011 - Adding bells & whistles to the ribbon

Brisbane 2011

ELEMENTS.XML

• Additional XML tags

– CustomAction

• ScriptSrc – for external JavaScript file

– CommandUIHandler

• EnabledScript – turns button on/off (code logic)

Page 22: 2011 - Adding bells & whistles to the ribbon

Brisbane 2011

COPY MULTIPLES – DEMO + CODE

Demonstration

Page 23: 2011 - Adding bells & whistles to the ribbon

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

Page 24: 2011 - Adding bells & whistles to the ribbon

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

Page 25: 2011 - Adding bells & whistles to the ribbon

Brisbane 2011

ELEMENTS.XML

• CommandUIDefinition (aka Controls)• Button • CheckBox• ComboBox• DropDown• FlyoutAnchor• GalleryButton• Label • MRUSplitButton• Spinner • SplitButton• TextBox• ToggleButton

Page 26: 2011 - Adding bells & whistles to the ribbon

Brisbane 2011

ADD TAB + GROUP + CONTROLS

Demonstration

Page 27: 2011 - Adding bells & whistles to the ribbon

Brisbane 2011

ELEMENTS.XML

• New elements within XML• Scaling

– MaxSize

– Scale

• GroupTemplate– Layout -> Section -> Row -> ControlRef

• Define the size of buttons / layout

Page 28: 2011 - Adding bells & whistles to the ribbon

Brisbane 2011

ELEMENTS.XML

• Removing controls – EASY !

Page 29: 2011 - Adding bells & whistles to the ribbon

Brisbane 2011

REMOVE GROUPS + BUTTONS

Demonstration

Page 30: 2011 - Adding bells & whistles to the ribbon

Brisbane 2011

ELEMENTS.XML

• User interaction

• Notifications SP.UI.Notify.addNotification

• StatusSP.UI.Status.addStatus

Page 31: 2011 - Adding bells & whistles to the ribbon

Brisbane 2011

NOTIFICATIONS + STATUS

Demonstration

Page 32: 2011 - Adding bells & whistles to the ribbon

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 !

Page 33: 2011 - Adding bells & whistles to the ribbon

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

Page 34: 2011 - Adding bells & whistles to the ribbon

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 !

Page 35: 2011 - Adding bells & whistles to the ribbon

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 !

Page 36: 2011 - Adding bells & whistles to the ribbon

Brisbane 2011

QUESTION AND ANSWER

SharePoint Ribbon Customisations

Page 37: 2011 - Adding bells & whistles to the ribbon

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

Page 38: 2011 - Adding bells & whistles to the ribbon

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