Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Leveraging the Ribbon API and Dialog Framework<br />Cory Peters<br />Chief SharePoint Architect<br />Eastridge Technology,...
About Me<br />Chief SharePoint Architect at Eastridge Technology, Inc.<br />Microsoft Gold Partner focused on the south ea...
Leveraging the dialog framework<br />Creating, deploying and interacting with dialogs<br />
Dialog goals<br />Understand how dialogs work<br />How to create a dialog<br />How to pass data to/from a dialog<br />What...
how it works<br />Use returnVal for further processing or display result<br />Perform any OM or Client OM functionality<br...
0 = Cancel</li></ul>returnVal (string)<br />Application Page<br />
SP.UI.ModalDialog<br />SP.UI.ModalDialog.showModalDialog(options)<br />Options parameter<br />url<br />title<br />allowMax...
creating a dialog<br />varoptions = SP.UI.$create_DialogOptions();<br />options.url = "/_layouts/Ex/CustomPage.aspx";<br /...
Getting data into a dialog<br />Creating the Dialog<br />varoptions = SP.UI.$create_DialogOptions();<br />options.url = "/...
Getting data from a dialog<br />var form = document.forms.<%SPHttpUtility.NoEncode(Form.ClientID,Response.Output);%>;<br /...
closing a dialog<br />OK Button Clicked<br />SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, ‘Return Data’...
Processing the result<br />Callback receives two parameters: dialogResult and dialogData<br />if (dialogResult === SP.UI.D...
dialog demo<br />
Customizing the ribbon<br />XML, XML and some JavaScript!<br />
Ribbon goals<br />Learn common terminology<br />Have a better understanding of the Ribbon XML<br />Know what’s involved in...
RIBBON OVERVIEW<br />Defined via XML within <CustomAction> and feature deployed<br />Tabs can be visible/hidden<br />Contr...
RIBBON XML TERMINOLOGY<br />Ribbon<br />Tab<br />Contextual Tab<br />Group<br />Section<br />Row<br />Control<br />
Targeting ribbons<br />CustomAction Location<br />
AVAILABLE CONTROLS<br />CONTAINERS<br />Tab<br />Group<br />CONTROLS<br />Button<br />CheckBox<br />Color Picker<br />Comb...
control displays<br />DisplayMode<br />Display modes listed are not available for all controls.<br />
What makes up a ribbon?<br />Ribbon XML<br />Defines the tabs, groups, controls, rendering templates<br />JavaScript<br />...
RIBBON XML<br />CommandUIExtension<br />CommandUIDefinition<br />CommandUIHandlers<br />
RIBBON XML<br />CommandUIExtension<br />CommandUIDefinition<br />
RIBBON XML<br />CommandUIExtension<br />CommandUIDefinition<br />GroupTemplate<br />Tab<br />
RIBBON XML<br />CommandUIExtension<br />CommandUIDefinition<br />Tab<br />
RIBBON XML<br />CommandUIExtension<br />GroupId<br />CommandUIDefinition<br />Tab<br />Scaling<br />Groups<br />MaxSize<br...
RIBBON XML<br />CommandUIExtension<br />CommandUIDefinition<br />GroupTemplate<br />Tab<br />
RIBBON XML<br />CommandUIExtension<br />CommandUIDefinition<br />GroupTemplate<br />
RIBBON XML<br />CommandUIExtension<br />CommandUIDefinition<br />GroupTemplate<br />Layout<br />Section<br />Row<br />Cont...
RIBBON XML<br />CommandUIExtension<br />CommandUIDefinition<br />GroupTemplate<br />Tab<br />
RIBBON XML<br />CommandUIExtension<br />Template Id<br />CommandUIDefinition<br />GroupTemplate<br />Tab<br />Layout<br />...
RIBBON XML<br />CommandUIExtension<br />CommandUIDefinition<br />CommandUIHandlers<br />
RIBBON XML<br />CommandUIExtension<br />CommandUIHandlers<br />
RIBBON XML<br />CommandUIExtension<br />CommandUIHandlers<br />Two attributes: Command, CommandAction<br />Command is a un...
RIBBON XML<br />CommandUIExtension<br />CommandUIHandlers<br />CommandUIDefinition<br />
RIBBON XML<br />CommandUIExtension<br />CommandUIHandlers<br />CommandUIDefinition<br />CommandUIHandler<br />Tab<br />Gro...
Command UI Handler<br />Maps a control to set of JavaScript<br />Very powerful when coupled with the Client OM<br />Exampl...
Page Component<br />JavaScript class that serves as the middle man between the Ribbon and your customization<br />Uses a s...
Page Component (cont)<br />Create your custom page component class<br />Register your namespace<br />Register your class t...
Delegate Control<br />Load SharePoint Prerequisites<br /><SharePoint:ScriptLinkName="SP.js" runat="server" LoadAfterUI="tr...
Getting current Context<br />Get List of Selected Items<br />// Returns a collection of item ids<br />varctx = SP.ClientCo...
ribbon demos<br />
Upcoming SlideShare
Loading in …5
×

Leveraging the Ribbon API and Dialog Framework

5,558 views

Published on

Published in: Technology
  • Be the first to comment

Leveraging the Ribbon API and Dialog Framework

  1. 1. Leveraging the Ribbon API and Dialog Framework<br />Cory Peters<br />Chief SharePoint Architect<br />Eastridge Technology, Inc.<br />
  2. 2. About Me<br />Chief SharePoint Architect at Eastridge Technology, Inc.<br />Microsoft Gold Partner focused on the south east and based out of North Carolina<br />Working with SharePoint since Portal Server 2003<br />Worked with all aspects of SharePoint including<br />Branding<br />Development<br />Administration<br />Implementation<br />Architecture<br />
  3. 3. Leveraging the dialog framework<br />Creating, deploying and interacting with dialogs<br />
  4. 4. Dialog goals<br />Understand how dialogs work<br />How to create a dialog<br />How to pass data to/from a dialog<br />What’s involved in deploying a custom dialog<br />
  5. 5. how it works<br />Use returnVal for further processing or display result<br />Perform any OM or Client OM functionality<br />Page / Web Part<br />Dialog<br />showModalDialog<br />url, callback<br />callbackFunction<br />dialogResult, returnVal<br />OK<br />Cancel<br />dialogResult (int) <br /><ul><li>1 = OK
  6. 6. 0 = Cancel</li></ul>returnVal (string)<br />Application Page<br />
  7. 7. SP.UI.ModalDialog<br />SP.UI.ModalDialog.showModalDialog(options)<br />Options parameter<br />url<br />title<br />allowMaximize<br />showClose<br />width<br />height<br />dialogReturnValueCallback<br />
  8. 8. creating a dialog<br />varoptions = SP.UI.$create_DialogOptions();<br />options.url = "/_layouts/Ex/CustomPage.aspx";<br />options.width= 400;<br />options.height= 400;<br />options.dialogReturnValueCallback= Function.createDelegate(null, customCallback);<br />SP.UI.ModalDialog.showModalDialog(options);<br />
  9. 9. Getting data into a dialog<br />Creating the Dialog<br />varoptions = SP.UI.$create_DialogOptions();<br />options.url = "/_layouts/Ex/CustomPage.aspx?p1=value&p2=v1;v2;v3";<br />…<br />Within the ApplicationPage<br />string param1 = Request.QueryString[“p1”];<br />string[] param2 = Request.QueryString[“p2”].Split(‘;’);<br />
  10. 10. Getting data from a dialog<br />var form = document.forms.<%SPHttpUtility.NoEncode(Form.ClientID,Response.Output);%>;<br />varitemTitle = form.<%SPHttpUtility.NoEncode(itemTitleTextbox .ClientID,Response.Output);%>.value; <br />
  11. 11. closing a dialog<br />OK Button Clicked<br />SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, ‘Return Data’);<br />Cancel Button Clicked<br />SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel, 'Canceled');<br />
  12. 12. Processing the result<br />Callback receives two parameters: dialogResult and dialogData<br />if (dialogResult === SP.UI.DialogResult.OK) {<br /> // use client OM for further processing<br />}<br />if (dialogResult=== SP.UI.DialogResult.cancel) {<br />SP.UI.Notify.addNotification(“Dialog was canceled. ", false);<br />}<br />
  13. 13. dialog demo<br />
  14. 14. Customizing the ribbon<br />XML, XML and some JavaScript!<br />
  15. 15. Ribbon goals<br />Learn common terminology<br />Have a better understanding of the Ribbon XML<br />Know what’s involved in a ribbon customization<br />See how all the pieces play together<br />
  16. 16. RIBBON OVERVIEW<br />Defined via XML within <CustomAction> and feature deployed<br />Tabs can be visible/hidden<br />Controls can be enabled/disabled *<br />No custom controls (.ascx)<br />Heavy JavaScript required / Client OM<br />Complex, nested, relational XML<br />
  17. 17. RIBBON XML TERMINOLOGY<br />Ribbon<br />Tab<br />Contextual Tab<br />Group<br />Section<br />Row<br />Control<br />
  18. 18. Targeting ribbons<br />CustomAction Location<br />
  19. 19. AVAILABLE CONTROLS<br />CONTAINERS<br />Tab<br />Group<br />CONTROLS<br />Button<br />CheckBox<br />Color Picker<br />Combo Box<br />Drop Down<br />Flyout Anchor<br />Insert Table<br />Label<br />Menu<br />Menu Section<br />MRU Split Menu<br />Spinner<br />Split Button<br />Textbox<br />Toggle Button<br />
  20. 20. control displays<br />DisplayMode<br />Display modes listed are not available for all controls.<br />
  21. 21. What makes up a ribbon?<br />Ribbon XML<br />Defines the tabs, groups, controls, rendering templates<br />JavaScript<br />CommandUIHandler or a custom Page Component<br />Handles populating Dropdowns, on click events, etc<br />Delegate Control<br />One approach to getting your custom JavaScript loaded into the page<br />Note: Any method of getting your JavaScript into the page is fine<br />
  22. 22. RIBBON XML<br />CommandUIExtension<br />CommandUIDefinition<br />CommandUIHandlers<br />
  23. 23. RIBBON XML<br />CommandUIExtension<br />CommandUIDefinition<br />
  24. 24. RIBBON XML<br />CommandUIExtension<br />CommandUIDefinition<br />GroupTemplate<br />Tab<br />
  25. 25. RIBBON XML<br />CommandUIExtension<br />CommandUIDefinition<br />Tab<br />
  26. 26. RIBBON XML<br />CommandUIExtension<br />GroupId<br />CommandUIDefinition<br />Tab<br />Scaling<br />Groups<br />MaxSize<br />Group<br />Controls<br />Scale<br />Etc<br />Button<br />DropDown<br />MaxSize<br />Scale<br />Group<br />Controls<br />Etc<br />Button<br />DropDown<br />GroupId<br />
  27. 27. RIBBON XML<br />CommandUIExtension<br />CommandUIDefinition<br />GroupTemplate<br />Tab<br />
  28. 28. RIBBON XML<br />CommandUIExtension<br />CommandUIDefinition<br />GroupTemplate<br />
  29. 29. RIBBON XML<br />CommandUIExtension<br />CommandUIDefinition<br />GroupTemplate<br />Layout<br />Section<br />Row<br />ControlRef<br />ControlRef<br />Row<br />ControlRef<br />ControlRef<br />Section<br />
  30. 30. RIBBON XML<br />CommandUIExtension<br />CommandUIDefinition<br />GroupTemplate<br />Tab<br />
  31. 31. RIBBON XML<br />CommandUIExtension<br />Template Id<br />CommandUIDefinition<br />GroupTemplate<br />Tab<br />Layout<br />Groups<br />Section<br />Group<br />Row<br />Controls<br />ControlRef<br />ControlRef<br />Button<br />DropDown<br />TemplateAlias<br />Scaling<br />MaxSize<br />Scale<br />Size<br />
  32. 32. RIBBON XML<br />CommandUIExtension<br />CommandUIDefinition<br />CommandUIHandlers<br />
  33. 33. RIBBON XML<br />CommandUIExtension<br />CommandUIHandlers<br />
  34. 34. RIBBON XML<br />CommandUIExtension<br />CommandUIHandlers<br />Two attributes: Command, CommandAction<br />Command is a unique identifier<br />CommandAction is JavaScript, URL or anything that was previously used in an UrlAction<br />CommandUIHandler<br />CommandUIHandler<br />CommandUIHandler<br />CommandUIHandler<br />CommandUIHandler<br />
  35. 35. RIBBON XML<br />CommandUIExtension<br />CommandUIHandlers<br />CommandUIDefinition<br />
  36. 36. RIBBON XML<br />CommandUIExtension<br />CommandUIHandlers<br />CommandUIDefinition<br />CommandUIHandler<br />Tab<br />Groups<br />CommandUIHandler<br />Group<br />CommandUIHandler<br />Controls<br />Button<br />DropDown<br />Group<br />Command Id<br />Controls<br />Button<br />DropDown<br />
  37. 37. Command UI Handler<br />Maps a control to set of JavaScript<br />Very powerful when coupled with the Client OM<br />Example<br /><Button<br /> Id=“ButtonId"<br />Command=“ButtonCommand“ … /><br /><CommandUIHandler<br />Command=“ButtonCommand“<br />CommandAction="javascript:<br />SP.UI.Notify.addNotification(‘Button was clicked');"/><br />
  38. 38. Page Component<br />JavaScript class that serves as the middle man between the Ribbon and your customization<br />Uses a structured contract that the Ribbon understands <br />
  39. 39. Page Component (cont)<br />Create your custom page component class<br />Register your namespace<br />Register your class to inherit from CUI.Page.PageComponent<br />Initialize the page component<br />CP.SharePoint.RibbonExample.PageComponent.initializePageComponent = function () {<br />varribbonPageManager= SP.Ribbon.PageManager.get_instance();<br />if (null !== ribbonPageManager) {<br />ribbonPageManager.addPageComponent(CP.SharePoint.RibbonExample.PageComponent.instance);<br /> }<br />}<br />
  40. 40. Delegate Control<br />Load SharePoint Prerequisites<br /><SharePoint:ScriptLinkName="SP.js" runat="server" LoadAfterUI="true” … /><br /><SharePoint:ScriptLink Name="CUI.js" runat="server" LoadAfterUI="true" … /><br />Load Custom JavaScript<br /><SharePoint:ScriptLink Name="/_layouts/RibbonExample/sp.ui.RibbonExample.js" runat="server" LoadAfterUI="true“ … /><br />Initialize Our Page Component<br /><script type="text/javascript"><br />//<![CDATA[<br /> function initializeRibbonExample() {<br />CP.SharePoint.RibbonExample.PageComponent.initialize();<br /> }<br />ExecuteOrDelayUntilScriptLoaded(initializeRibbonExample, 'sp.ui.RibbonExample.js'); <br />//]]><br /></script><br />
  41. 41. Getting current Context<br />Get List of Selected Items<br />// Returns a collection of item ids<br />varctx = SP.ClientContext.get_current();<br />varitems = SP.ListOperation.Selection.getSelectedItems(ctx);<br />Get Selected List<br />// Returns a guid<br />SP.ListOperation.Selection.getSelectedList()<br />
  42. 42. ribbon demos<br />
  43. 43. resources<br />XML file defining all OOTB Ribbons<br />C:program filescommon filesMicrosoft SharedWeb Server Extensions14TEMPLATEGLOBALXMLCMDUI.xml <br />MSDN Resources<br />http://msdn.microsoft.com/en-us/library/ee540027.aspx<br />http://msdn.microsoft.com/en-us/library/ee539395.aspx<br />http://msdn.microsoft.com/en-us/library/ff407303.aspx<br />Community Resources<br />http://www.sharepointnutsandbolts.com/2010/01/customizing-ribbon-part-1-creating-tabs.html<br />http://blogs.msdn.com/b/jfrost/archive/2009/11/08/how-to-display-a-sharepoint-dialog-from-ribbon-button-and-get-selected-item-context.aspx<br />http://blogs.msdn.com/b/vesku/archive/2010/02/25/how-to-sharepoint-2010-js-client-object-model-and-ui-advancements.aspx<br />

×