As a part of a new UI in SharePoint 2013, Microsoft has added a new Links Bar also known as “Suite bar” that Contains Links NewsFeed, SkyDrive and Sites. These links are displayed using “SuiteLinksDelegate” Delegate Control which has also been Introduced in SharePoint 2013. Adding, Removing and Customizing these Links however is not easy. You can only add and remove these links by Overriding “SuiteLinksDelegate” Delegate Control with a feature solution created in Visual studio. There is no Out-of-Box way to do this however you can choose to hide the entire Control using CSS and other tricks see the post SharePoint 2013 – Hide NewsFeed, SkyDrive, Sites (DeltaSuiteLinks)
In this post we will see a Step-by-Step tutorial on How to Create a Solution for Overriding SuiteLinksDelegate Delegate Control and add Custom links in the suite bar.This what it will look like
To create this solution we will do the following -
1. Create an Empty Solution.
2. Add a new UserControl with the new links and add its entry to Elements file.
3. Add a SafeControl entry (using manifest file)
4. Deploy and Test.
Lets look at the Steps -
1. Create an Empty Solution.
2. Deploy it as Farm.
3. Add a new Item and add a new User Control.
Add a new add a new User Control (Farm solution)
When you add a user Control, a new Control ‘suitelinksdelegatectrl’ under “ControlTemplates” gets created.This ControlTemplates is mapped to _ControlTemplates folder in 15 hive. To view the Code file for this control right click on the Delegate Control and click View Code.
4. Add the following code in ‘SuiteLinksDelegateCtrl.ascx.cs’ file.
using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using Microsoft.SharePoint;
using Microsoft.SharePoint.Utilities;
using Microsoft.SharePoint.WebControls;
using System.Globalization;
using System.IO;
using System.Collections;
using Microsoft.SharePoint.Portal;
using Microsoft.SharePoint.Portal.WebControls;
namespace CustomSuiteLinksDelegate.ControlTemplates.CustomSuiteLinksDelegate
{
public partial class SuiteLinksDelegateCtrl : UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected override void Render(HtmlTextWriter writer)
{
writer.RenderBeginTag(HtmlTextWriterTag.Style);
writer.Write(“.ms-core-suiteLinkList {display: inline-block;}”);
writer.RenderEndTag();
writer.AddAttribute(HtmlTextWriterAttribute.Class, “ms-core-suiteLinkList”);
writer.RenderBeginTag(HtmlTextWriterTag.Ul);
AddSuiteLink(writer, “http://learningsharepoint.com”, “Learning SharePoint”, “Lsp”);
writer.RenderEndTag();
base.Render(writer);
}
protected static void AddSuiteLink(HtmlTextWriter writer, string url, string name, string linkId)
{
writer.AddAttribute(HtmlTextWriterAttribute.Class, “ms-core-suiteLink”);
writer.RenderBeginTag(HtmlTextWriterTag.Li);
writer.AddAttribute(HtmlTextWriterAttribute.Class, “ms-core-suiteLink-a”);
writer.AddAttribute(HtmlTextWriterAttribute.Href, url);
writer.AddAttribute(HtmlTextWriterAttribute.Id, linkId);
writer.RenderBeginTag(HtmlTextWriterTag.A);
writer.AddAttribute(HtmlTextWriterAttribute.Class, “ms-verticalAlignMiddle”);
writer.RenderBeginTag(HtmlTextWriterTag.Span);
writer.Write(name);
writer.RenderEndTag();
writer.RenderEndTag();
writer.RenderEndTag();
}
}
}
AddSuiteLink() is a function to add new links to the UL list rendered inside the Control.
5. Next add an empty Elements file to add the Control entry.
Add the following in the Elements file.
<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<Control Id="SuiteLinksDelegate"
Sequence="90"
ControlSrc="/_ControlTemplates/15/CustomSuiteLinksDelegate/SuiteLinksDelegateCtrl.ascx">
</Control>
</Elements>
6. Next Build and Deploy.
Resulting Suite Bar -
Related Post :
SharePoint 2013 – Hide NewsFeed, SkyDrive, Sites (DeltaSuiteLinks)
SharePoint 2013 Top links(NewsFeed, SkyDrive, Sites..) – Name, ID and How to Hide them
Add Links to Promoted Actions (Share,Follow,SYNC) in SharePoint 2013
| Tweet |
Google Plus
