Leveraging the Ribbon API and Dialog Framework


Published on

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • * Important aspect of the ribbon. Controls should never move or be hidden.
  • 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 />