1. Leveraging the Ribbon API and Dialog Framework Cory Peters Chief SharePoint Architect Eastridge Technology, Inc.
2. About Me Chief SharePoint Architect at Eastridge Technology, Inc. Microsoft Gold Partner focused on the south east and based out of North Carolina Working with SharePoint since Portal Server 2003 Worked with all aspects of SharePoint including Branding Development Administration Implementation Architecture
9. Getting data into a dialog Creating the Dialog varoptions = SP.UI.$create_DialogOptions(); options.url = "/_layouts/Ex/CustomPage.aspx?p1=value&p2=v1;v2;v3"; … Within the ApplicationPage string param1 = Request.QueryString[“p1”]; string[] param2 = Request.QueryString[“p2”].Split(‘;’);
10. Getting data from a dialog var form = document.forms.<%SPHttpUtility.NoEncode(Form.ClientID,Response.Output);%>; varitemTitle = form.<%SPHttpUtility.NoEncode(itemTitleTextbox .ClientID,Response.Output);%>.value;
11. closing a dialog OK Button Clicked SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, ‘Return Data’); Cancel Button Clicked SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel, 'Canceled');
12. Processing the result Callback receives two parameters: dialogResult and dialogData if (dialogResult === SP.UI.DialogResult.OK) { // use client OM for further processing } if (dialogResult=== SP.UI.DialogResult.cancel) { SP.UI.Notify.addNotification(“Dialog was canceled. ", false); }
15. Ribbon goals Learn common terminology Have a better understanding of the Ribbon XML Know what’s involved in a ribbon customization See how all the pieces play together
16. RIBBON OVERVIEW Defined via XML within <CustomAction> and feature deployed Tabs can be visible/hidden Controls can be enabled/disabled * No custom controls (.ascx) Heavy JavaScript required / Client OM Complex, nested, relational XML
19. AVAILABLE CONTROLS CONTAINERS Tab Group CONTROLS Button CheckBox Color Picker Combo Box Drop Down Flyout Anchor Insert Table Label Menu Menu Section MRU Split Menu Spinner Split Button Textbox Toggle Button
21. What makes up a ribbon? Ribbon XML Defines the tabs, groups, controls, rendering templates JavaScript CommandUIHandler or a custom Page Component Handles populating Dropdowns, on click events, etc Delegate Control One approach to getting your custom JavaScript loaded into the page Note: Any method of getting your JavaScript into the page is fine
34. RIBBON XML CommandUIExtension CommandUIHandlers Two attributes: Command, CommandAction Command is a unique identifier CommandAction is JavaScript, URL or anything that was previously used in an UrlAction CommandUIHandler CommandUIHandler CommandUIHandler CommandUIHandler CommandUIHandler
36. RIBBON XML CommandUIExtension CommandUIHandlers CommandUIDefinition CommandUIHandler Tab Groups CommandUIHandler Group CommandUIHandler Controls Button DropDown Group Command Id Controls Button DropDown
37. Command UI Handler Maps a control to set of JavaScript Very powerful when coupled with the Client OM Example <Button Id=“ButtonId" Command=“ButtonCommand“ … /> <CommandUIHandler Command=“ButtonCommand“ CommandAction="javascript: SP.UI.Notify.addNotification(‘Button was clicked');"/>
38. Page Component JavaScript class that serves as the middle man between the Ribbon and your customization Uses a structured contract that the Ribbon understands
39. Page Component (cont) Create your custom page component class Register your namespace Register your class to inherit from CUI.Page.PageComponent Initialize the page component CP.SharePoint.RibbonExample.PageComponent.initializePageComponent = function () { varribbonPageManager= SP.Ribbon.PageManager.get_instance(); if (null !== ribbonPageManager) { ribbonPageManager.addPageComponent(CP.SharePoint.RibbonExample.PageComponent.instance); } }
41. Getting current Context Get List of Selected Items // Returns a collection of item ids varctx = SP.ClientContext.get_current(); varitems = SP.ListOperation.Selection.getSelectedItems(ctx); Get Selected List // Returns a guid SP.ListOperation.Selection.getSelectedList()
