Sunday, January 20, 2013

Adding a Button to SharePoint 2010 Ribbon


How to Add Button to Ribbon – Create new SharePoint project and  Add a new item of the type "Empty Element" to the project and Update the xml with the file below.
Elements.xml  (SPRibbonUpdateToProd)

<?xml version="1.0" encoding="utf-8"?>
  <CustomAction Id="DocFinalRibbon" Location="CommandUI.Ribbon">
        <CommandUIDefinition Location="Ribbon.Documents.Manage.Controls._children">
            Image16by16="/_layouts/1033/images/formatmap16x16.png" Image16by16Top="-144" Image16by16Left="0"
            Image32by32="/_layouts/1033/images/formatmap32x32.png" Image32by32Top="-128" Image32by32Left="-256"
            LabelText="Publish to Prod"
            ToolTipTitle="Click button to Publish to Prod"
            ToolTipDescription="Once you click this button, your checked items are pushed to Prod "
          EnabledScript="javascript:function singleEnable()
            var items = SP.ListOperation.Selection.getSelectedItems();
            var ci = CountDictionary(items);
            return (ci == 1);

  <Control Id="AdditionalPageHead" ControlSrc="~/_controltemplates/MarkStatusProduction.ascx" Sequence="40"/>

Check to make sure only one item is selected & Enable ribbon only on single select

CommandUIHandler Command="SingleSelectButtonCommandAction="javascript:alert('There is only one thing selected!');EnabledScript="javascript:function singleEnable()
var items = SP.ListOperation.Selection.getSelectedItems();
var ci = CountDictionary(items);
return (ci == 1);
" />

Update selected list item with Update Status ( Any Column with some value)

New Project à Add new item (user control) and update with this code.
UserControl (MarkStatusProduction.ascx) and move it to Control templates folder (not in subfolder name of project), no need .ascx.cs file update, as we write the update code here.

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MarkStatusProduction.ascx.cs" Inherits="SPUserControl.ControlTemplates.SPUserControl.MarkStatusProduction" %>

<SharePoint:ScriptLink ID="ScriptLink1" Name="SP.js" runat="server" LoadAfterUI="true" Localizable="false" />
<SharePoint:FormDigest ID="FormDigest1" runat="server" />

<script language="ecmascript" type="text/ecmascript">
    var ticketsList;
    var web;
    var context;
    var ticketId;
    var ticketItem;
    var ticketStatusField = "Status";
    var ticketDoneStatus = "Done";
    var ticketResolvedStatus = "Production";

    function MarkStatusProduction(itemId) {
        ticketId = itemId;

        context = new SP.ClientContext.get_current();
        web = context.get_web();
        ticketsList = web.get_lists().getByTitle("TME");  //TME is the name of list
        ticketItem = ticketsList.getItemById(ticketId);

        // This will make sure the contents of the list and list item are actually loaded

    function OnTicketsListsLoaded() {
        var currentStatus = ticketItem.get_item(ticketStatusField);

        // There's no need to continue this method when the status is already set to Production or Live.
        if (currentStatus == ticketResolvedStatus || currentStatus == ticketDoneStatus) {

        // Set the ticket status field to the Production
        ticketItem.set_item(ticketStatusField, ticketResolvedStatus);

        // Submit the query to the server
        context.executeQueryAsync(OnTicketUpdated, OnError);

    function OnTicketUpdated(args) {
        // Nothing really needed here other than refreshing the page to see that the change has been made
        window.location.href = window.location.href;

    function OnError(sender, args) {


Deactivating feature: ( For any changes to Ribbon button like image, functionality, delete it features folder, do iisreset and deploy code again for these may be with new feature id)

To update the code, deactivate features for usercontrol (MarkStatusProduction) and SPRibbonButton added to Ribbon. ID’s for features are found in Templates\features. Update ID’s in the command below in command prompt.
C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\BIN>stsadm.exe -o deactivatefeature -id  "eb6fe60b-fda7-4e40-bc18-ba88f1e9a954" -url http://yourserver/ -force

No comments: