Customizing the SharePoint Online App Launcher

The waffle, the grid, the thingie in the left corner of your Suite Bar… the SharePoint Online (SPO) app launcher has many descriptions and is one of the latest changes made to SPO. It gives the user fast access to apps and even allows you to customize what is listed and the order. It is a pretty nifty thing. But what if you want to brand it? Or take away an option because you don’t want all of your users accessing it?

The big disclaimer

As of the writing of this blog post, you can only do the following customizations in your SPO sites and not in your full Office 365 experience. As of right now customization options in Office 365 are highly limited and you can’t add your own custom CSS. That may change one day (or likely not) but if you want your SharePoint sites to stand out from the rest of Office 365, the following may be helpful.

***UPDATE October 5, 2015***

The screenshots in this post are from when this post was originally written (January 2015) and reflect what was available in Office 365 at that time. As more options have been added, the ID chart below has been updated. If there are additional launcher apps that you don’t see reflected in the chart below, please leave a comment so I can update this post accordingly. Thanks!

Remove options from the SPO app launcher

You can personally customize the app launcher by selecting the waffle/grid icon and then selecting the My apps link in the lower right corner of the app launcher navigation system that pops up. You can also click-hold-drag apps around to change the order. But what if you want to make a change globally for all of your users – as best as I can tell there is no global app launcher settings to show or hide apps. However, this is easy to do with a little CSS.

Any item in the app launcher can be hidden from view. For example, check out the following before and after screenshots for removing the “Outlook” option in the app launcher:

“Outlook” was removed by adding the following CSS style statement to a custom CSS file reference by the SharePoint site:

#O365_AppTile_Mail {
display: none;
}

This same style statement can be used to hide any of the apps within the launcher. The following chart outlines the necessary selectors:

Link

CSS Selector

Mail (Outlook)

#O365_AppTile_Mail

Calendar

#O365_AppTile_Calendar

People

#O365_AppTile_People

Newsfeed

#O365_AppTile_Newsfeed

OneDrive

#O365_AppTile_Documents

Sites

#O365_AppTile_Sites

Tasks

#O365_AppTile_Tasks

Word Online

#O365_AppTile_WordOnline

Excel Online

#O365_AppTile_ExcelOnline

PowerPoint Online

#O365_AppTile_PowerPointOnline

OneNote Online

#O365_AppTile_OneNoteOnline

Admin

#O365_AppTile_Admin

Delve

#O365_AppTile_OfficeGraph

Video

#O365_AppTile_Video

Office 365 Store

#O365_AppTile_OfficeStore

Sway

#O365_AppTile_Sway

Reduce the size of the apps

Maybe you wish the apps weren’t so chunky and want something more streamlined.

You can open up your SharePoint site in SharePoint Designer and navigate to the Style Library. From there you can create a new CSS file and add your changes. Or using a mapped network drive or FTP tool you can add a CSS file that way. Or directly upload the file through the browser. Save and publish the file, then link to it from the master page (.master) file, from the HTML master page (.HTML) file if you are using Design Manager or from the Alt CSS URL setting in Site Actions -> Site Settings -> Master Page.

Great post! I was able to create a css file, save it to site assets, and link to it from alternate css from Master Page. When I am logged in as myself (admin) I see the removed apps from the launcher but when someone else goes to the site they still see the apps.

If there is a workflow attached to the file it may be in limbo waiting for an approval or it was rejected. Make sure the file is checked in and that there is no outstanding publishing process already in place where the file needs to be approved.

I was able to get the my apps not to show but I added all the tiles I wanted to hide and Home button in one CSS. Home and my apps are gone but the tiles still show. Is there a conflict in the CSS that I am not seeing?

Sorry to keep bugging you about this. I finally see what is going on. The css styles shows for me as the admin but not the read only users. I made sure the css exists in the style library, published as major version and pointed to it from the alt css style from the master page. I am doing this at one site only not site collection level. I am not referencing it from the master pages and have not made any edits to those. What else should I check that would cause other users not to see the styles? Thanks for your help.

I am starting to run out of suggestions. Here are some things you can check:

Is there anything caching files on the server?
Can you duplicate this bug in a new site collection?
Can you duplicate this bug if you create a new read only account and test it out yourself on the same computer that you see the CSS just fine as an admin?
Is the bug present both inside and outside of your network?
Is the CSS file referencing anything that is outside of SharePoint (Office 365 SPO sites don’t like linking to external files)?
If you make a change to the CSS file, do you see the changes?
If you add other CSS to the file that has nothing to do with what you have done so far, do you see the changes and do the read-only users see the changes?
If you look at the source code for a read-only view, do you see that the browser is loading the CSS file?

Is there anything caching files on the server? I will check
Can you duplicate this bug in a new site collection? I will check
Can you duplicate this bug if you create a new read only account and test it out yourself on the same computer that you see the CSS just fine as an admin? yes, the new test user still sees the default app launcher
Is the bug present both inside and outside of your network? yes
Is the CSS file referencing anything that is outside of SharePoint (Office 365 SPO sites don’t like linking to external files)? no
If you make a change to the CSS file, do you see the changes? yes
If you add other CSS to the file that has nothing to do with what you have done so far, do you see the changes and do the read-only users see the changes? yes they see “Home” being hidden on the site but not the app launcher changes
If you look at the source code for a read-only view, do you see that the browser is loading the CSS file? yes

I really appreciate your help. I will stop bugging you. It must be something specific to our environment. Thanks again!

Double check the CSS selectors. I just made some updates to the code in the post because since I wrote this there have been changes and not all of the CSS statements were working as is anymore. I had to add to the selectors to get them working again. 🙂

We have multiple sites and would like to hide some tiles in all these sites. Is there a way to add the css to a location that will be inherited by all existing sites and when a new site is created or do we need to do this in every site?

If you are using a publishing site there is an option in the Master Page settings (Site Actions -> Site Settings -> Master Page) to link to an Alt CSS URL. You can set your CSS file here and select the option for all subsites to inherit the setting (“Reset all subsites to inherit this alternate CSS URL”).

Yes you can but you have to limit your text to two lines unless you want to have to use more CSS to modify the size of the tiles. For example “OneDrive for Business” fits fine but “Sway, no IT support/self service” cuts off the word “service”. You would need to trim it down to “Sway (Self Service)”. Here is the code for the three examples you cited: