Develop Interactive SharePoint User Interfaces

1. Module 9 Developing Interactive User Interfaces

2. Module Overview • Creating Menu Items and Ribbon Controls • Creating Client-Side Dialogs • Lab: Developing User Interface Components for SharePoint 2010 Solutions

3. Lesson 1: Creating Menu Items and Ribbon Controls • Overview of Custom Actions • Creating Custom Action Menu Items • Creating Custom Action Ribbon Controls • Accessing SharePoint Objects from Custom Actions

4. Overview of Custom Actions • Menu items are custom actions that are incorporated into the built-in SharePoint 2010 user interface • Examples: Site Actions menu, Site Settings page • You can build your own custom actions • Ribbon controls are custom actions that appear on the SharePoint 2010 server ribbon • The ribbon is context-sensitive • SharePoint 2010 includes many ribbon controls • You can build your own context-sensitive ribbon controls

5. Creating Custom Action Menu Items • Custom actions are defined in XML • Start by creating a new element based on the SharePoint 2010 Empty Element project item template • Add elements to describe the custom action <?xml version="1.0" encoding="utf-8"?> <Elements xmlns="http://schemas.microsoft.com/sharepoint/"> <CustomAction Id="NewUIActionsMenu" GroupId="SiteActions" Location="Microsoft.SharePoint.StandardMenu" Sequence="1970" Title="Manage Features"> <UrlActionUrl="/_layouts/ManageFeatures.aspx" /> </CustomAction> </Elements>

6. Creating Custom Action Ribbon Controls • Ribbon controls are defined in XML • Start by creating a new element based on the SharePoint 2010 Empty Element project item template • Add elements to describe the ribbon control • Code Sample • See student notes

7. Accessing SharePoint Objects from Custom Actions • Ribbon code and custom action code typically run in the user's browser • Normally, the code has no access to the server-side API • Typically, the code accesses SharePoint objects and data by using the JavaScript implementation of the client object model • Common scenarios include showing client-side dialogs from ribbon controls for working with SharePoint data

8. Lesson 2: Creating Client-Side Dialogs • Overview of the Dialog Platform • Creating Dialogs • Showing and Hiding Dialogs • Interacting with SharePoint Objects in Client-Side Dialogs

9. Overview of the Dialog Platform • Many operations on SharePoint data are now performed in client-side dialogs • Example: Default New and Edit forms for list data • Client dialogs run in the user's browser • Interact with SharePoint through the JavaScript implementation of the client object model • Client dialogs typically contain HTML markup, input controls, and JavaScript functions • AJAX-style communication does not require page post-backs • Responsive, efficient, Web 2.0-style dialogs

10. Creating Dialogs • Common approach is to create client-side dialogs as part of a Visual Web Part user interface • Graphically design the dialog along with the server-side components in Visual Studio • Client-side dialogs are typically implemented as hidden HTML <DIV> elements that contain other HTML elements • HTML elements can include JavaScript-based events <div id="divSkillsManager" style="display:none; padding:5px"> Select a Job:<select id="Jobs" name="Jobs" /> <br/> Select a Skill:<select id="Skills" name="Skills" /> <br/> <input type="button" value="Add Skill Mapping" style='width:125px;' onclick="addSkillMapping()" /> <br /> <input type="button" value="Cancel" style='width:125px' onclick="onCancel()" /> </div>

11. Showing and Hiding Dialogs • Showing dialogs modally • Hiding modal dialogs <SharePoint:ScriptLink ID="showDialog" runat="server" Name="sp.js" Localizable="false" LoadAfterUI="true" /> <script language="ecmascript" type="text/ecmascript"> varthisDialog; vardivSkillsManager = document.getElementById("divSkillsManager"); divSkillsManager.style.display = "block"; var dialog = { html:divSkillsManager, title:'Add Skills Mapping', allowMaximize:true, showClose:false, width:400, height:200}; thisDialog = SP.UI.ModalDialog.showModalDialog(dialog); </script> function hideSkillMapper() { thisDialog.close(); window.location.reload(true); //Optional }

12. Interacting with SharePoint Objects in Client-Side Dialogs • Typically access SharePoint objects and data by using the JavaScript implementation of the client object model • Common scenarios: • Adding, editing, and deleting data • Manipulating properties of SharePoint objects • Uploading files • Rendering Silverlight applications and media files

13. Lab: Developing User Interface Components for SharePoint 2010 Solutions • Exercise 1: Creating a Site Actions Menu Item • Exercise 2: Creating a Ribbon Item • Exercise 3: Creating a Client-Side Dialog Logon information Estimated time: 60 minutes

14. Lab Review • How did you start to create a site action? • How did you create a ribbon control? • What action did the ribbon control perform? • What formed the basis of the dialog you created? • How did you show the dialog in a modal manner?

15. Module Review • In this module, you have learned to: • Create custom actions and ribbon controls • Create client-side dialogs