SharePoint 2010: Part 2: Preparing for 70-573 TS Microsoft SharePoint 2010, Application Development

 

Tonight I get to play with the Dialog Framework and the Ribbon… Both of these are client side and UI features. Check out the links below, and also do a web search on these topics. There’s a lot of good blog articles and good content at MSDN.

 

Skills Being Measured:
Working with the SharePoint User Interface (19%)

Implement a dialog by using the Dialog Framework

• This objective may include but is not limited to: Create dialogs from JavaScript or from server side, display dialogs

Create a custom ribbon object

• This objective may include but is not limited to: adding custom actions to the ribbon, customizing groups, customizing tabs, customizing the existing ribbon

 

My Dialog Notes:

A Dialog is basically a page displayed in a DIV. The V4 master page will hide all of the normal navigation parts of the page.

For example:

• Go to a document library page and click Add Document (a dialog will be displayed)
• Right-click anywhere in the dialog and select properties and you fine the URL is “http://intranet/_layouts/Upload.aspx?List={01CF5B35-CB1E-4A5A-82D1-144C6A0312E2}&RootFolder=&IsDlg=1”
• Right-click anywhere outside of the dialog and select properties and you will find the URL is “http://intranet/Shared%20Documents/Forms/AllItems.aspx”
• Now copy the URL from the dialog and paste it into the browser’s address bar… you will see a “page” with just the dialog.
• Paste the URL again, but remove “&IsDlg=1”… now you will see a normal looking page.

My Ribbon Notes:

• Ribbon options can be created starting with the same Feature elements you used for 2007 custom menus (<CustomAction>), plus a new <CommandUIExtension> child element with a lot of new options.
• There are two Location attributes, on in <CustomAction> and one in <CommandUIExtension>.
• The <CustomAction> element is basically “which ribbon” while the <CommandUIExtension> element is basically “where in the ribbon”
• The <CommandUIExtension> element has a very important attribute named Location that indicates which ribbon and the location in the ribbon to modify. VS 2010’s Intellisense do not help with “Location”. Details for out of the box options can be found here:
      C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14
      \TEMPLATE\GLOBAL\XML\CMDUI.xml
  Documention can be found here: http://msdn.microsoft.com/en-us/library/ee537543.aspx
• Location is in the form of    Ribbon.tab.group.controls
• Understand “_children” in the Location element
• Unlike 2007 where you added menu options with <CustomAction> you can now add all kinds of controls: Buttons, Text boxes, Menus…
• Unlike 2007 the Ribbon options can respond the status of other items on the page, such as if a list item has been selected.
• Two approaches: Declarative (Features) and Imperative (writing code)
• Bottom line… the Ribbon, the new feature options, and the context sensitivity features are cool.

 

Links

 

MSDN: Server Ribbon in SharePoint Foundation (drill down to find the walk throughs)
http://msdn.microsoft.com/en-us/library/ee540027.aspx

A very quick demo of a Dialog:
http://www.andrewconnell.com/blog/archive/2009/12/08/sharepoint-2010-dev-tidbit-ndash-want-to-create-your-own.aspx

An tutorial of both a Dialog and a Ribbon update:
HOL10 - Developing SharePoint 2010 User Interface Ribbon and Dialog Customizations
This hands-on lab walks you through adding a custom action to the SharePoint 2010 ribbon, and creating a Web Part that uses the Dialog Framework.
http://www.microsoft.com/downloads/details.aspx?FamilyID=c010fc68-b47f-4db6-b8a8-ad4ba33a35c5&displaylang=en

Another example that shows both a Dialog and a Ribbon update
http://blogs.msdn.com/jfrost/archive/2009/11/08/how-to-display-a-sharepoint-dialog-from-ribbon-button-and-get-selected-item-context.aspx

A 1 hour video demo of the Ribbon and Dialogs:
http://msdn.microsoft.com/en-us/sharepoint/ff462046.aspx

Another MSDN video: Module 10: Creating Dialog Boxes and Ribbon Controls for SharePoint 2010
http://msdn.microsoft.com/en-us/sharepoint/ee513157.aspx

Creating a Custom Ribbon Tab in SharePoint 2010
http://sharepointsolutions.com/sharepoint-help/blog/index.php/2009/10/creating-a-custom-ribbon-tab-in-sharepoint-2010/