Integrating the Office 365 Suite Bar and App Launcher

David Feldman

by Dave Feldman on 10/15/2015

Share this:

Article Details

Date Revised:

Applies to:
AngularJS, Development, Javascript and jQuery, Office 365, SharePoint Online

A beginner’s guide to building an Office 365 application with AngularJS

At Ignite this year, Microsoft shared that a number of the next generation Office 365 experiences such as Delve and the Video Portal are built as Single Page JavaScript applications. In this series, we’ll explore building a fully responsive Employee Directory using AngularJS and Office 365. This series assumes you have a good understanding of basic web development and will pick up from there.

The Employee Directory sample app in Office 365 written in AngularJS

Figure 1: Completed application

Part 2: Integrating the Office 365 Suite Bar and App Launcher

In part 1 of this series, we discussed using the OneDrive for Business sync agent and Visual Studio Code to enable a productive development experience. In this article, we will begin the HTML layout for our application by integrating the Office 365 Suite Bar and App Launcher.

You can find the source code for this post in the IT Unity GitHub repo at:

When we complete this step of the process, the application should look exactly like Figure 2 below.

Completed integration of Suite Bar and App Launcher

Figure 2: Completed integration of Suite Bar and App Launcher

Why do this?

In traditional SharePoint development, we leveraged ASP.NET master pages and SharePoint page layouts to control the majority of our user experience. In fact, every page we developed was an extension to SharePoint and quite a lot from the platform.

Single Page Applications within SharePoint are truly standalone isolated HTML pages that inherit nothing by default and don’t need to look like SharePoint. There is no reliance on the SharePoint ASP.NET Web Part Framework. Anything you can design in HTML and CSS can be hosted inside SharePoint and can easily be made interactive using AngularJS.

The Office 365 App Launcher is the primary mechanism for navigation between experiences inside Office 365 such as Mail, Calendar, Contacts, Sites, Delve, OneDrive, and Planner. You can also add custom tiles to the App Launcher providing navigational parity for custom experiences you create. Each of Microsoft’s Office 365 experiences as well as the application we’re going to build include the Suite Bar and App Launcher to enable users to switch between Apps and providing a consistent navigational experience.

At some point in the future, adding the App Launcher and Suite Bar will likely become a part of the Office UI Fabric component library. Today there is no official Microsoft documented approach, so we will reuse some the JavaScript libraries as they are called within SharePoint for the video portal today. When Microsoft does release a component for the Suite Bar and App Launcher as a part of the Office UI Fabric, you will want to update your code to leverage that for long-term supportability.

Required JavaScript References

Add the follow references into the <HEAD> section of your HTML file. The three request referenced JavaScript files below must be added to support the Suite Bar and App Launcher.

	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

	<title>O365 Suite Bar App</title>
	<LINK REL=StyleSheet HREF="CSS/Directory.css">

	<!--SharePoint Online SuiteBar Support -->
		<!--WEX PreReq - Required for SuiteBar-->
		<script type="text/javascript" src=""></script>
		<!--SharePoint Init - Required for SuiteBar-->
		<SharePoint:ScriptLink language="javascript" name="suitelinks.js" OnDemand="true" runat="server" Localizable="false" />

	<!--End SharePoint Online SuiteBar Support-->

Suite bar placeholder and SharePoint context

In the body section of your HTML page, we have a few things going on highlighted with comments below. The first is the placeholder div where the Suite Bar will be injected. We're reusing a SharePoint Delegate Control that will determine the correct version  and inject SharePoint JavaScript files based on if your tenant is running in First Release or Normal Release.  The second is the placeholder where the Suite Bar will live. Finally, we call the RenderSuiteLinksFromShellData method while passing in the name of the div where the suite bar will be rendered.

  <!--suite bar start -->		
    <form id="form1" runat="server">
      <SharePoint:DelegateControl id="ID_SuiteLinksDelegate" ControlId="SuiteLinksDelegate" runat="server" />
    <div id="suiteBarTop" class="ms-fullWidth ms-TopBarBackground-bgColor" style="height:50px; position:absolute;left=0px;background-color:black;"></div>

     <script type="text/javascript">
	RenderSuiteLinksFromShellData('suiteBarTop', 2);

  <!--suite bar end -->

Final touches with CSS

Leveraging those few lines of JavaScript and HTML will get you a SuiteBar and App Launcher that looks and functions exactly like the rest of the Office 365 Suite. The final touches we’ll want to apply via CSS include setting the body to have no margin and applying basic formatting to our placeholder div before the Suite Bar has rendered. 

body  { margin: 0px;  }   
.suiteBar {position: fixed; background-color: black; width: 100%; height: 50px;color: white; text-align: center; line-height: 40px;}


In this article we introduced the Office 365 Suite Bar and App Launcher and showed how we can integrated them into our single page application quickly and easily by reusing the JavaScript libraries from SharePoint Online. In the next article we’ll continue building the shell of our application using responsive HTML and CSS.

Topic: JavaScript and jQuery

Sign in with

Or register

  • The script reference above change to from

    I was able to get the Suitebar working by changing that reference.
  • Dave... looks like MSFT changed to .js file - suitelinks.js is no longer there - got another js showing up called sposuitenav.js
  • Unfortunately this is not working for me. I am trying to put this code sample into the _layout.cshtml of my MVC Provider Hosted App.. but the suitebar is not rendering.

    The code never runs past the RenderSuiteLinksFromShellData('suiteBarTop', 2); call and I get no feedback in the console that anything is wrong.

    I am wondering if it is the sharepoint:scriptlink tag, or the SharePoint:DelegateControl that is not working?

    I even changed the SharePoint:ScriptLink to this (which I find in a normal Office 365 teamsite):

    I'd love to get this working and get the Suitebar loading in my Add-in.