Posted on Nov 18, 2011

In this post, I'm going to describe how to add a ribbon button to the View Item dialog of an InfoPath list form. An InfoPath list form can be created using the Customize Form button available in the List ribbon:

InfoPath Ribbon CustomizeFormButton

To see the customized form, switch to the Items tab of the List ribbon and select the View Item button:

Info Path Ribbon View Item Button

The View Item dialog is shown. It has a standard SharePoint ribbon. This is the ribbon I'm going to customize.

The first step is to create a custom action just like for any other ribbon button:

<CustomAction Id="Ribbon.InfoPath.Actions.AddCustomButton"
  Location="CommandUI.Ribbon"
  Rights="ManageLists"
  Title="Custom">
  <CommandUIExtension>
    <CommandUIDefinitions>
      <CommandUIDefinition Location="Ribbon.Tabs.InfoPathListDisplayTab.Manage.Controls._children">
        <Button Id="Ribbon.Tabs.InfoPathListDisplayTab.Manage.Custom"
          Sequence="50" Command="CustomButtonCommand"
          Image16by16="/_layouts/images/allcontent16.png"
          Image32by32="/_layouts/images/allcontent32.png"
          LabelText="Custom"
          TemplateAlias="o1"
          ToolTipTitle="Custom" />
      </CommandUIDefinition>
    </CommandUIDefinitions>
    <CommandUIHandlers>
      <CommandUIHandler Command="CustomButtonCommand" CommandAction="" />
    </CommandUIHandlers>
  </CommandUIExtension>
</CustomAction>

As you can see the CommandAction element is empty. There is no need to provide code here as it is not executed anyway. I'll show a method of providing JavaScript code for the custom action later in the post.

Another point is the Location attribute. In order to determine a location for the custom button, open the View Item InfoPath form and peek into HTML source. You should find a bunch of anchor tags that represent ribbon buttons. In my installation of SharePoint the buttons have the following IDs:

  • Ribbon.Tabs.InfoPathListDisplayTab.Manage.Controls.btnEdit-Large
  • Ribbon.Tabs.InfoPathListDisplayTab.Manage.Controls.btnAlertMe-Medium
  • Ribbon.Tabs.InfoPathListDisplayTab.Manage.Controls.btnDelete-Medium
  • Ribbon.Tabs.InfoPathListDisplayTab.Close.Controls.btnClose-Large

The ribbon itself looks as follows (the IDs correspond to respective buttons):

Info Path Ribbon Not Customized

After deploying the CustomAction, the new custom button shows up in the ribbon. Its ID is specified in the custom action with a suffix "-Large" i.e. Ribbon.Tabs.InfoPathListDisplayTab.Manage.Custom-Large:

Info Path Ribbon Customized

Now the interesting part: attaching JavaScript code to the button. One of the methods that work for me is to execute the following code on my main master page:

$(document).ready(function ()
{
    var button = document.getElementById("Ribbon.Tabs.InfoPathListDisplayTab.Manage.Custom-Large");
    if (button != null)
    {
        button.href = "javascript:CustomHandler();"; 
        button.onclick = "return true;";
    }
});
function CustomHandler()
{
    // ... execute any code for the custom action here
}

This code simply attaches a call to a JavaScript function CustomHandler(). Note that the OnClick event is also modified. By default, it returns false. In order to make SharePoint execute the custom handler, it needs to return true.

But this is not the end of the story. The standard CommandAction handler has a few convenient placeholders that turn into real values during run-time, for example:

  • {ListId} - a GUID of the current list
  • {ItemId} - an integer representing the selected list item

These values can be "injected" in the code-behind as JavaScript variables. The following code does the work. Again it needs to be inserted into the main master page:

protected void Page_Load(object sender, EventArgs e)
{
    ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "MyListId", 
        "var MyListId='" + 
        (SPContext.Current.List != null ? SPContext.Current.List.ID.ToString() : "") + 
        "';", true);
    ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "MyListItemNum", 
        "var MyListItemId = '" + 
        (SPContext.Current.ListItem != null ? SPContext.Current.ListItem.ID.ToString() : "") + 
        "';", true);
}

At this point the CustomHandler function can use the MyListId and MyListItemId variables:

function CustomHandler()
{
    // ... execute any code for the custom action here
    // ... do something with MyListId and MyListItemId
}

That's all what you need to do in order to implement a custom button in the InfoPath ribbon.

3 comments on "Customize Ribbon on InfoPath Form in SharePoint 2010"

  1. Posted Friday, January 25, 2013
    Ahmad:

    Thank you very much :)
    you saved my day thanks again.

  2. Posted Thursday, January 31, 2013
    Neha:

    How can we add a custom button in New Item form in Infopath.

  3. Posted Tuesday, February 12, 2013
    Wisenheimer:

    Hi Neha,
    I think it's a matter of replacing the element id (i.e. Location) of the button. For example, the Save button on the New Item InfoPath form has ID Ribbon.Tabs.InfoPathListTab.Commit.Controls.btnSubmit