Today I learned something about Data URI’s and that there absolutely awesome! Especially for this particular practice. I was creating a Custom Action in my SharePoint Hosted app. I wanted to add a Button into the Ribbon of any Document Library that takes me to my App Web and do some work based on List Information. I started by adding a Custom Ribbon Action.
This is all pretty basic and out of the box stuff. The XML generated contains also the URL to my App Web using the token ~appWebUrl(~remoteAppUrl for auto-hosted / provider-hosted). Unfortunately this Token could not be used to link to an icon that should be displayed in the Ribbon with my Custom Action. Also by default the images are linked to the _LAYOUTS folder which we cannot write to from an App.
Data URI to the Rescue
On the web I came across this post on Stack Overflow http://sharepoint.stackexchange.com/questions/57328/is-it-possible-to-package-deploy-and-use-my-own-image-for-a-ribbon-customactio which offers the perfect solution: Create a data URI for the icons. You can read about Data URI’s and even create your own out of an image right here: http://dataurl.net
In my example I used the same image for 32 and 16 px.
As we can see (this is just a snippet) the URL’s can become quite long, which is pretty ok for this particular use but can be a disadvantage if your using this everywhere in your website. There are some other drawbacks on this approach but still for this use I think this is very good and solid solution!
Cheers!
