SharePoint 2013 Customizing Suite Bar
Before we start customizing the top bar lets get familiar with controls.
The top bar shows:
1. The Branding Title or Logo
2. Suite Bar with Links i.e Newsfeed, SkyDrive, Site
3. Welcome Control
Suite bar is designed as an out-of-the-box delegate control.
Now I will explain adding my own link called Search to the Suite Bar.
1. Create a new SharePoint 2013 empty project named ProjectSuteBarCustomisation. Provide the site url.
2. Add reference to Microsoft.SharePoint.Portal dll
3. Add Feature with scope Farm
4. Add User Control named CustomSuiteBarLinks.ascx.
In the code behind add reference to Microsoft.SharePoint.Portal.WebControls dll.
Change the partial class to inherit from MySuiteLinksUserControl instead of UserControl.
Add the below code in the cs file which override the Render method to add the custom link.
public partial class CustomSuiteBarLinks : MySuiteLinksUserControl
{
readonly string linkText = "Search";
readonly string linkNavigation = "https://bing.com";
readonly string linkId = "lnkSearchLink";
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);
RenderSuiteLink(writer, linkNavigation, linkText, linkId, false);
writer.RenderEndTag();
base.Render(writer);
}
}
5. Add an Empty Element File and name it CustomSuiteLinkDelegate
6. Add the below code to the CustomSuiteLinkDelegate xml file
<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="https://schemas.microsoft.com/sharepoint/">
<Control Id="CustomSuiteLinkDelegate"
Sequence="90" ControlSrc="~/_ControlTemplates/15/ProjectSuteBarCustomisation/CustomSuiteBarLinks.ascx" />
</Elements>
7. Deploy the solution.