Exercise 4: Creating a Ribbon Addition and a Web Part

In this last exercise you will create a Web Part Solution which adds a command to the ribbon and a new Web Part.

1. Open Visual Studio 2010 and choose to create a new project. Complete the dialog that appears using the following information.
   1. Pick the Empty SharePoint Project template that you can find in the Visual C# / Visual Basic » SharePoint » 2010 template group.
   2. Name the project MyRibbonizedWebPart
   3. Complete the dialog using the OK button.
2. Complete the wizard that appears using the following information.
   1. Ensure that you will be debugging the project on the https://intranet.contoso.com/sites/Lab03 site.
   2. Select Deployas a farm solution.
3. Add a new Web Part to your project by doing the following:
   1. Right-click the MyRibbonizedWebPart project in the Solution Explorer, expand Add and choose New item.

   2. Pick the Web Part template and let it use the default name of WebPart1. Click Add.

      Figure 1

      The web part in Solution Explorer

4. A web part needs to be deployed at site collection level. Verify that the feature scope is set to Site:
   1. In the Solution Explorer expand Features.
   2. Right-click Feature1 and choose View Designer in order to open the designer for this feature.
   3. In the designer that appears, check the Scope, which should be set to Site.
5. Open the file named WebPart1.cs/vb . Add the RenderContents method and the line of code inside it shown below. This will render a simple message within the web part.

   C#

   protected override void RenderContents(HtmlTextWriter writer) { writer.Write("Hello World"); }

   VB.NET

   Protected Overrides Sub RenderContents( _ ByVal writer As System.Web.UI.HtmlTextWriter) writer.Write("Hello World")End Sub
6. Open the file named WebPart1.webpart, and make the following modifications.
   1. Find the element for the Title property and change its value to My Ribbonized Web Part.
   2. Find the element for the Description property and change its value to something else.

   <?xml version="1.0" encoding="utf-8"?> <webParts> <webPart xmlns="https://schemas.microsoft.com/WebPart/v3"> <metaData> <type name="MyRibbonizedWebPart.WebPart1, $SharePoint.Project.AssemblyFullName$" /> <importErrorMessage> $Resources:core,ImportErrorMessage;</importErrorMessage> </metaData> <data> <properties> <property name="Title" type="string"> My Greetings Web Part </property> <property name="Description" type="string"> This Web Part displays a greeting </property> </properties> </data> </webPart> </webParts>
7. Using the Solution Explorer, add a new item to the MyRibbonizedWebPart project. Choose the Empty Element template, which you can find in the Visual C#/Visual Basic » SharePoint » 2010 template group. Name the element RibbonActions.
8. In the editor for the Elements.xml file that has opened automatically add a new <CustomAction> element right inside the <Elements> node and add the following markup:

   XML

   <Elements xmlns=”https://schemas.microsoft.com/sharepoint”> <CustomAction Id="MyRibbonCustomization" Location="CommandUI.Ribbon"> </CustomAction> </Elements>
9. Next you will need to create the ribbon XML markup within the <CustomAction> element. A new child element for CustomAction is now available named <CommandUIExtension>. You will create a new group and add a button to this group. Add the following XML into the <CustomAction> element. Take special care to name the Template, TemplateAlias and Command attributes correctly as these reference elements outside of the XML markup.

   XML

   <Elements xmlns="https://schemas.microsoft.com/sharepoint/"> <CustomAction Id="MyRibbonCustomization" Location="CommandUI.Ribbon"> <CommandUIExtension> <CommandUIDefinitions> <CommandUIDefinition Location="Ribbon.WebPartPage.Groups._children"> <Group Id="Ribbon.WebPartPage.MyRibbonWebPart" Sequence="20" Description="Custom ribbon group" Title="Ribbon Addition" Template="Ribbon.Templates.Flexible2"> <Controls Id="Ribbon.WebPartPage.MyRibbonWebPart.Controls"> <Button Id="Ribbon.WebPartPage.MyRibbonWebPart.DemoButton" Command="demoAction" Description="a demo action" Image16by16="/_layouts/images/edit.gif" Image32by32="/_layouts/images/placeholder32x32.png" LabelText="Demo Action" TemplateAlias="o2" Sequence="10" /> </Controls> </Group> </CommandUIDefinition> <!-- Here comes another custom action --> </CommandUIDefinitions> <!-- Here comes the UI handler --> </CommandUIExtension> </CustomAction> </Elements>
10. Add 3 other <CommandUIDefinition> elements directly under the comment below the first <CommandUIDefinition>. These will take care of the sizing of the new group and button. The Location attribute needs to be set to Ribbon.WebPartPage.Scaling._children:

    XML

    <!—Here comes another custom action --> <CommandUIDefinition Location="Ribbon.WebPartPage.Scaling._children"> <MaxSize Id="Ribbon.WebPartPage.MyRibbonWebPart.MaxSize" Sequence="20" GroupId="Ribbon.WebPartPage.MyRibbonWebPart" Size="LargeLarge" /> </CommandUIDefinition> <CommandUIDefinition Location="Ribbon.WebPartPage.Scaling._children"> <Scale Id="Ribbon.WebPartPage.MyRibbonWebPart.MediumMedium" Sequence="30" GroupId="Ribbon.WebPartPage.MyRibbonWebPart" Size="MediumMedium" /> </CommandUIDefinition> <CommandUIDefinition Location="Ribbon.WebPartPage.Scaling._children"> <Scale Id="Ribbon.WebPartPage.MyRibbonWebPart.Popup" Sequence="50" GroupId="Ribbon.WebPartPage.MyRibbonWebPart" Size="Popup" /> </CommandUIDefinition> </CommandUIDefinitions> <!—Here comes the UI handler --> </CommandUIExtension> </CustomAction> </Elements>
11. When the user clicks the new ribbon button, a message will be displayed using Javascript. Locate the comment Here comes the UI Handler and place following code right below it. The Command attribute must be the same as the one specified in the button definition. The CommandAction contains the javascript to be executed.

    XML

    <!—Here comes the UI handler --> <CommandUIHandlers> <CommandUIHandler Command="demoAction" CommandAction="javascript:alert('hello');" /> </CommandUIHandlers> </CommandUIExtension> </CustomAction> </Elements>
12. Build the project. Correct any errors that occur before moving on to the next step.
13. In the Solution Explorer, right-click the MyRibbonizedWebPart project and choose Deploy. This will deploy and activate the Web Part feature.
14. Navigate to https://intranet.contoso.com/sites/lab03/default.aspx in order to test the Web Part.
15. On the Site Actions menu, select Edit Page in order to transition into the page editing mode.
16. In the Left Web Part Zone on the default.aspx page click on Add a Web Part.
17. In the Categories group, select Custom and then select the My Ribbonized WebPart. Click the Add button to add the Web Part to the Left Web Part Zone on the page.Your simple web part should now be visible on the page.

18. Select the Page tab on the ribbon. There you will find the new Demo Action button. Clicking the button will display an alert box with the message.

    Figure 21

    The Demo Action button on the Page tab of the ribbon