Custom Ribbon Action and set the Customize Icon to Ribbon button in a SharePoint Hosted App

Custom Ribbon Action and set the Customize Icon to Ribbon button in a SharePoint Hosted App
Check out Best Alternative to InfoPath


Today I explored about custom ribbon action to set the Custom Image to Ribbon button and that there absolutely awesome! I was creating a Custom Action in my SharePoint Hosted app. I wanted to add a Button into the Ribbon of any Custom List to my App Web and do some work based on List Information. I started by adding a Custom Ribbon Action.

Custom Ribbon Action and set the Customize Icon to Ribbon button in a SharePoint Hosted App
Custom Ribbon Action and set the Customize Icon to Ribbon button in a SharePoint Hosted App



Custom Ribbon Action and set the Customize Icon to Ribbon button in a SharePoint Hosted App
Custom Ribbon Action and set the Customize Icon to Ribbon button in a SharePoint Hosted App
Custom Ribbon Action and set the Customize Icon to Ribbon button in a SharePoint Hosted App
Custom Ribbon Action and set the Customize Icon to Ribbon button in a SharePoint Hosted App

You can see the below code snippet of elements.xml of ribbon custom action which will generate for you based on your settings selected in the wizard.

Custom Ribbon Action and set the Customize Icon to Ribbon button in a SharePoint Hosted App
Custom Ribbon Action and set the Customize Icon to Ribbon button in a SharePoint Hosted App

Have a look at the highlighted code in the previous block you will notice 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:

Custom Ribbon Action and set the Customize Icon to Ribbon button in a SharePoint Hosted App
Custom Ribbon Action and set the Customize Icon to Ribbon button in a SharePoint Hosted App

Read some SharePoint 2013 tutorials below:

Solution:
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

The code after applying this workaround will be like this:

Custom Ribbon Action and set the Customize Icon to Ribbon button in a SharePoint Hosted App

Custom Ribbon Action and set the Customize Icon to Ribbon button in a SharePoint Hosted AppFinal Output Customize Icon to Ribbon button

Custom Ribbon Action and set the Customize Icon to Ribbon button in a SharePoint Hosted App
Custom Ribbon Action and set the Customize Icon to Ribbon button in a SharePoint Hosted App

Note: There are a lot of image data URI generators online like this one.


You May Also like the Following SharePoint Online Tutorials:

About Sagar Pardeshi

I am Developer working on Microsoft Technologies for the past 6+years. I am very much passionate about programming and my core skills are SharePoint, ASP.NET & C#,Jquery,Javascript,REST. I am running this blog to share my experience & learning with the community I am an MCP, MCTS .NET & Sharepoint 2010, MCPD Sharepoint 2010, and MCSD HTML 5,Sharepoint 2013 Core Solutions. I am currently working on Sharepoint 2010, MOSS 2007, Sharepoint 2013,Sharepoint 2013 App Dev, C#, ASP.NET, and SQL Server 2008.

View all posts by Sagar Pardeshi →