Adding Custom Action To The Ribbon Of View In Sharepoint List/ Library

Introduction

In this article, we will discusses how to add Custom Action to ribbon View and Edit Form in SharePoint list/library using Visual Studio features and SharePoint Designer.

Custom Action Overview

Customizing the SharePoint forms to want to extend the user interface is easy to do by using the Ribbon button. You can add new functionality to the SharePoint view and edit forms as custom actions. Custom actions enable you to expand or extend the standard behavior of SharePoint core components such as using a custom action to customized functionality of a ribbon items.

This topic describes two methods for adding a custom action to a ribbon of SharePoint. The custom action is added to the ribbon as a button.

You have two options to add custom actions to a view and edit form,

• Adding a custom action through SharePoint Visual Studio features. SharePoint features enable you to easily deploy customizations.
• Adding a custom action by using Microsoft SharePoint Designer. SharePoint Designer helps create rapid, no-code customizations on the local server.

Creating a Custom Action by Using SharePoint Feature

The following steps create a custom action in Visual Studio. The procedures in this section assume a development environment where SharePoint is installed and configured, Microsoft Visual Studio is installed and the currently logged-in user has administrative rights on the SharePoint environment for deployment purposes.

To Create a Custom Action by Using a Feature

1. In Visual Studio, click New Project, expand the SharePoint node, click 2013, and then click Empty SharePoint Project. Name the project and then click OK.
   
   
2. In the SharePoint Customization Wizard, select the local SharePoint site that can be used for debugging and whether the solution will be deployed as a sandboxed or farm.
   
   
3. In Solution Explorer, right-click the Features node and then click Add Feature.
   
   
4. Name the feature and add a description
   
   
5. In Solution Explorer, right-click the project, select Add, and then select New Item.
   
   
6. In the Add New Item dialog box, select the Empty Element template, type the name, and then click Add.
   
   
   
   
7. Open the Elements.xml file inside EmptyElement and then replace the file content with the following code snippet.
   

   <?xml version="1.0" encoding="utf-8"?>
   <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
       <CustomAction Description="Custom Action" Title="Custom Action" Id="{HTEDCT16-YIMF-4EAE-TSBE-UGB95BDE$}" Location="CommandUI.Ribbon.DisplayForm" RegistrationId="100" RegistrationType="List" Sequence="0" Rights="ViewListItems" xmlns="http://schemas.microsoft.com/sharepoint/">
           <CommandUIExtension xmlns="http://schemas.microsoft.com/sharepoint/">
               <CommandUIDefinitions>
                   <CommandUIDefinition Location="Ribbon.ListForm.Display.Manage.Controls._children">
                       <Button Id="{GTEDCT16-YIMF-4EAE-TSBE-EHYO95BDUT}" Command="{FTEDCT16-YIMF-4EAE-TSBE-YDS95BDE3}" Image32by32="~site/_layouts/Images/CAction.png" Image16by16="~site/_layouts/Images/ CAction.png" Sequence="0" LabelText="Custom Action" Description="Custom Action”
    TemplateAlias=" o1 "
    />
    </CommandUIExtension>
    </CustomAction>
    </Elements>

   The CustomAction element defines the extension to the user interface and specifies the following attributes:
   
   
   • Description: Description of the custom action.
   • Title: The title of the custom action.
   • ID: Custom action unique identifier.
   • Location: Specifies the location of the custom action. For example, Microsoft.SharePoint.DisplayForm will show this custom action on the View form of an item.
   • RegistrationId: Specifies the identifier of the list or item content type that this action is associated with.
   • Sequence: Specifies the ordering priority for actions. A value is 0 indicates that the button will appear at the first position on the ribbon.
   • Rights: Specifies a set of rights that the user must have for the link to be visible. For example, ViewListItems indicates that a person with View List Items permission can access this custom action. If not specified, then the action always appears in the list of actions.
     
     
8. Add CommandUIHandlers inside the CommandUIExtension tag .<CommandUIHandlers>
   

   <CommandUIHandler Command="{FTEDCT16-YIMF-4EAE-TSBE-YDS95BDE3}" CommandAction="javascript: alert(''Hi'');" />
   </CommandUIHandlers>

   The CommandUIHandler element describes the action to be taken when user clicks the control and specifies the following attributes:
   
   
   • Command: The name of a command. The value of this attribute matches the value of a Command attribute on an element that defines a control; the button in this example.
     
   • CommandAction: A script statement to execute when this handler is invoked. Alert “Hi” message will appear in this example.
     
     
9. Save the file
   
10. Add the EmptyElement element to the feature we created.
    
11. Right click the solution name and then click Deploy. Visual Studio will build and deploy the solution to the farm.
    
12. Navigate to the site, add a custom list, and then add an item to test. Click on the title and observe the action on the ribbon.
    
    
    
13. On click of the button and notice the alert popup appears.
    
    Above same steps has to be followed for adding custom action to the ribbon of edit form. We need to give Location as Microsoft.SharePoint.EditForm in step 7.

Creating a Custom Action by Using SharePoint Designer

The following steps demonstrate adding a custom action by using the SharePoint Designer. Ensure that SharePoint Designer is installed and that the currently logged-in user has administrative rights on the SharePoint environment.

To Create a Custom Action by Using the SharePoint Designer,

1. Start Microsoft SharePoint Designer.
2. On the File menu, point to Sites, and then click Open Site.
3. Type the URL of the local site such as http://siteURL.com and then click Open Site.
4. In the Navigation pane, click the List and Libraries link, and then click the list name to which the custom action is to be added.
   
   
   
   
5. Click the Custom Action menu in the list settings section in the ribbon and then click menu Display Form Ribbon to add custom action.
   
   
   
   
6. In the Create Custom Action screen, type a name and description for the custom action.
   
   
   
   
7. Click OK.
   
8. Navigate to the local site, add a custom list, and then add an item to test. Click on the title and observe the action on the ribbon.
   
   
   
   
9. Click the button and notice the alert popup comes.
   
   
   
   Above same steps have to be followed for adding custom action to the ribbon of edit form. We need to give Edit Form Ribbon in step 5.

Conclusion

Thus you have learned how to add Custom Action to Ribbon of View and Edit Form in SharePoint list/Library using Visual Studio feature and SharePoint Designer.