How To Add Custom Html Into The sitecore Ribbon

This is another post about customising the Sitecore user interface. On a recent project, I needed to display the company’s logo in the Sitecore ribbon, with a link to their website. I’ve talked previously in, How To Add A Custom Sitecore Button To The Editor Ribbon about some of the possibilities to add bespoke code and buttons into the Sitecore ribbon. In this article, I’m going to go one step further and inject custom HTML into Sitecore.

Sitecore Ribbon Panel

The Sitecore ribbon is the main go-to toolbar for content editors to do content related tasks. In order to inject custom HTML, we’re going to create a new class that inherits from ‘RibbonPanel’.

using System.Web.UI;
using Sitecore.Data.Items;
using Sitecore.Shell.Framework.Commands;
using Sitecore.Shell.Web.UI.WebControls;
using Sitecore.Web.UI.WebControls.Ribbons;
namespace JonDJones.CustomRibbon
{
public class CustomLogo : RibbonPanel
{
public override void Render(HtmlTextWriter output,
Ribbon ribbon,
Item button,
CommandContext context)
{
var htmlOutput = string.Empty;
htmlOutput += "<div><a href='http://www.jondjones.com/'><img src='http://jondjones.com/wp-content/uploads/2013/04/logo.png' height='35'></a> </div>";
output.Write(htmlOutput);
}
}
}

The code to inject HTML is fairly straight-forward. First, override the Render method. In the render method, a HtmlTextWriter gets injected. This is the way we can write our own HTML into Sitecore.

All you need to do is write whatever HTML you want to use within your website and pass it into the text writers stream by using output.Write()

Configuring Sitecore To Use A Custom RibbonPanel

To configure your Sitecore ribbon, switch your database to ‘Core’ (How To Switch Between The Core and Master Database in Sitecore). In here you will need to add a new panel. Navigate to ‘Content’ -> ‘Applications’ -> ‘Content Editor’ -> ‘Ribbons’ -> ‘Chunks’. In here create a new chunk (or use an existing one). To do this right click on the ‘Chunks’ folder, select ‘Insert’ -> ‘Insert From Template’ and use ‘/sitecore/templates/System/Ribbon/Chunk’ as the template.

Right click on your new chunk and again select ‘Insert’ -> ‘Insert From Template’ and use ‘/sitecore/templates/System/Ribbon/Panel’ as the template. In the ‘Type’ add in the

In my example my namespace is JonDJones, my class is CustomRibbon and the assembly is called JonDJones.Core.

After you have saved your item, go to ‘Content’ -> ‘Applications’ -> ‘Content Editor’ -> ‘Ribbons’ -> Strips. In here create a new reference, so select ‘Insert’ -> ‘Insert From Template’ and use ‘/sitecore/templates/System/Reference ‘ as the template.

sitecore_custom_logo_in_ribbon_1

In ‘Data’ -> ‘References’, add a link to the chunk we created above. After you hit save, if you look in the ribbon and you have the strip you added your chunk to, you should see the chunk and your custom HTMl displayed.

sitecore_custom_logo_in_ribbon

Conclusion

In today’s guide, we’ve covered an alternative way you can customise the Sitecore UI. If you want to add your own HTML, then you can create a new class that inherits from RibbonPanel. In the editor, you can add a new item that inherits from ‘/Sitecore/templates/System/Ribbon/Panel’ to import this HTML. How you configure Sitecore is your choice but usually you will create a custom chunk and add it to a strip.

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

More Posts

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *