Customize icon for Ribbon UI custom action in Sharepoint 2013 hosted app

So you are building a Sharepoint hosted app and you started to use a UI custom action. Lets take a ribbbon action button as an example; you want this button to appear associated with the selected list in every list of you host web. This is very powerful as this acts as a bridge between the host web and your app.

This code is an example of this UI custom action:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <CustomAction Id="c2747e1a-8d9a-451f-bb02-59f0e7cbae69.RibbonCustomAction2"
     RegistrationType="ContentType"
     RegistrationId="0x01"
     Location="CommandUI.Ribbon"
     Sequence="10001"
     Title="Create a Live Chart">
    <CommandUIExtension>
      <CommandUIDefinitions>
        <CommandUIDefinition Location="Ribbon.List.Actions.Controls._children">
          <Button Id="Ribbon.List.Actions.RibbonCustomActionButton"
             Alt="Create Chart"
             Sequence="100"
             Command="Invoke_RibbonCustomActionButtonRequest"
             LabelText="Create Chart"
             TemplateAlias="o1"
             Image32by32="_layouts/15/images/placeholder32x32.png"
             Image16by16="_layouts/15/images/placeholder16x16.png"/>
          </CommandUIDefinition>
      </CommandUIDefinitions>
      <CommandUIHandlers>
        <CommandUIHandler Command="Invoke_RibbonCustomActionButtonRequest"
                          CommandAction="~remoteAppUrl/Pages/Default.aspx?{StandardTokens}&amp;SPListItemId={ItemId}&amp;SPListId={ListId}"/>
      </CommandUIHandlers>
    </CommandUIExtension >
  </CustomAction>
</Elements>

Have a look at the highlighted code in the previous block you will noticed that the icon of the button is a placeholder you have the ability to change. The next screenshot show the button with the placeholder icon:
ribbon custom icon placeholder

You may think that changing this icon is easy, unfortunately its not! My first try and what I think it should be working is adding my custom icon to a module in the app project and reference it using the ~appWebUrl token so icon attributes url should be something like this: Image32by32=”~appWebUrl/images/myIcon.png”. As you can guess now, this didn’t work because SharePoint 2013 don’t replace this token with the app web path which will lead to a broken image.

Solution
I came up with two worarounds for this : the first one is to deploy the icon in a way that its publicly accessible through a fixed url and use a url like this:

 <CommandUIDefinition Location="Ribbon.List.Actions.Controls._children">
          <Button Id="Ribbon.List.Actions.RibbonCustomActionButton"
             Alt="Create Chart"
             Sequence="100"
             Command="Invoke_RibbonCustomActionButtonRequest"
             LabelText="Create Chart"
             TemplateAlias="o1"
             Image32by32="http://www.mysite.com/images/customIcon.png"
             Image16by16="http://www.mysite.com//images/customIcon.png"/>
          </CommandUIDefinition>
</CommandUIDefinitions>

I don’t like this approach as its involves managing resources outside of the app which is a bit of a headache of course.

A better workaround is to use Data URIs which is a way of embedding the actual image data in the src attribute of the img tag. The only limitation is browser support for example this is not supported in IE5 to IE7 but its supported starting from IE8.

The code after applying this workaround will be like this:

<CommandUIDefinition Location="Ribbon.List.Actions.Controls._children">
          <Button Id="Ribbon.List.Actions.RibbonCustomActionButton"
             Alt="Create Chart"
             Sequence="100"
             Command="Invoke_RibbonCustomActionButtonRequest"
             LabelText="Create Chart"
             TemplateAlias="o1"
             Image32by32="data:image/png;base64,iVBORw0KGgoAAAANSU..."
             Image16by16="data:image/png;base64,iVBORw0KGgoAAAANSU..."/>
</CommandUIDefinition>

And this will work!
Screen Shot 2013-07-03 at 11.43.22 PM

One last thing: There are a lot of image data URI generators online like this one.

Good luck!

Advertisements
This entry was posted in Software and tagged . Bookmark the permalink.

3 Responses to Customize icon for Ribbon UI custom action in Sharepoint 2013 hosted app

  1. Lavina Surana says:

    It was of great help. Thanks

  2. Pingback: SharePoint 2013 Custom Action Menu Item Logo? | Question and Answer

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s