Developing SharePoint 2010 User Interface Ribbon

Exercise 1 – Adding a custom button to the Ribbon

In this exercise, we will extend the ribbon by adding our own custom button that executes server-side code. We can use this approach to add or replace buttons, groups, tabs, or even the whole ribbon. We will use a Visual Studio 2010 solution and deploy it to the local SharePoint server.

The button will pop up a JavaScript dialog box displaying the “Hello World” message.

Task 1 – View the site

We will view the site before we add a button to the Ribbon so that we know what the Ribbon displays like OOTB.

1.    Open Internet Explorer and browse to http://intranet.contoso.com

2.    Select the Shared Documents library from the Documents menu in the left-hand navigation section (quick launch).

 

Figure 4 - Shared Documents

3.    In the Library Tools tab of the Ribbon that appears, select the Documents tab.

Figure 5 - Documents Tab

1.     This Ribbon is the location where the new button we will be creating in this exercise will appear.

Task 2 – Create a SharePoint 2010 Empty Project

In this task, a solution and project will be created. It will contain the rest of the development work in this exercise.

1.    Open Visual Studio 2010 by going to the Start Menu | All Programs | Microsoft Visual Studio 2010 | Microsoft Visual Studio 2010.

2.    From the menu, select File | New | Project.

3.    In the New Project dialog box, expand the Installed Templates left-hand menu to Visual C# | SharePoint | 2010 and choose the Empty SharePoint Project project type in the project type list in the middle section of the screen.

4.    Enter RibbonDemo in the Name textbox.

5.    Enter C:\SPHOLS\SPCHOL308\CS\Ex1 in the Location textbox.

6.    Click OK.

7.    A SharePoint Customization Wizard dialog box will appear.

8.    In the What local site do you want to use for debugging? textbox, type http://intranet.contoso.com

9.    For the What is the trust level for this SharePoint solution? radio buttons, choose Deploy as a farm solution.

Figure 6 - SharePoint Customization Wizard

10.  Press Finish to complete the customization wizard.

11.  Visual Studio 2010 will generate the necessary project files and folders.

12.  Your Solution Explorer should now look like the following image.

Figure 7 - RibbonDemo Solution Explorer

Task 3 – Add the button code to the project

13.  Right-click the RibbonDemo project node in Solution Explorer and choose Add | New Item…

14.   In the Add New Item dialog box, expand the Installed Templates left-hand menu to Visual C# | SharePoint | 2010 and choose the Empty Element item type in the middle section of the screen.

15.  Leave the Name as EmptyElement1.

Figure 8 - Add New Item - Ribbon Demo

16.  Click Add to add the element to your project.

Figure 9 - Elements Xml

17.  Delete the contents of the Elements.xml file.

18.  Add the following code to the Elements.xml file. You can find a copy of this file in the Supporting Files\SPCHOL308\Resources\CS folder.

<?xml version="1.0" encoding="utf-8"?>

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">

  <CustomAction

   Id="DemoHelloWorldButton"

   RegistrationId="101"

   RegistrationType="List"

   Location="CommandUI.Ribbon"

   Sequence="5"

   Title="Hello World">

    <CommandUIExtension>

      <CommandUIDefinitions>

        <CommandUIDefinition

         Location="Ribbon.Documents.Manage.Controls._children">

          <Button

           Id="Ribbon.Documents.New.Controls.DemoHelloWorldButton"

           Alt="Hello World Ribbon Button"

           Sequence="10"

           Command="Demo_HelloWorld"

           Image32by32="/_layouts/images/ribbondemo/demobutton.png"

           LabelText="Hello World Demo"

           TemplateAlias="o1"/>

        </CommandUIDefinition>

      </CommandUIDefinitions>

      <CommandUIHandlers>

        <CommandUIHandler

         Command="Demo_HelloWorld"

         CommandAction="javascript:alert('Hello World!');"

         />

      </CommandUIHandlers>

    </CommandUIExtension>

  </CustomAction>

</Elements>

Code Snippet: My Xml Snippets | spchol308_ex1_ xml

Figure 10 - Elements Xml Updated

19.  Take note of the Image reference, this is the image that will display in the Ribbon, we will add this image next.

20.  Take note also of the CommandScript, this is the JavaScript that will execute upon pressing of the button we are adding to the ribbon.

21.  Add a folder to the solution that maps to the Images folder in the SharePoint layouts directory where we can put our button image.  Right-click the RibbonDemo project node, and choose Add | SharePoint “Images” Mapped Folder.

Figure 11 - Add Mapped Folder

22.   The Images folder appears with a sub folder for our button.

Figure 12 - Images Folder

23.   Add the DemoButton.png file by right-clicking the new RibbonDemo folder and choosing Add | Existing Item…

24.  When the dialog box appears navigate to C:\Content Packs\Packs\SharePoint 2010 Developer Labs 1.0\SUPPORTING FILES\SPCHOL308\Resources\ and select the DemoButton.png file.

Figure 13 - DemoButton Image

Task 4 – Deploy the solution

25.  In the Solution Explorer, right-click on RibbonDemo and select Deploy.

Figure 14 - Deploy Solution

26.  The solution will be deployed to the SharePoint site.

27.  Open a web browser and browse to the local SharePoint site:

http://intranet.contoso.com

28.  If prompted for authentication, enter the following details:

Username: administrator

Password: pass@word1

29.  In the left navigation, click on the Shared Documents link to open the Shared Documents library.

Figure 15 - Shared Documents link

30.  Click on the Documents tab in the SharePoint Ribbon.

Figure 16 - Documents tab

31.  You should see the new button Hello World added to the SharePoint Ribbon.

Figure 17 - Hello World Buton

32.  Click the Hello World Demo button in the Ribbon to see the Hello World JavaScript dialog box appear.

Figure 18 - Hello World Demo

In the past few minutes you have demonstrated how to add new custom button and extend the SharePoint button.