SharePoint Add-in: Get Rid of Microsoft Header

I'm developing a SharePoint add-in with Visual Studio 2015 using JavaScript and want to remove the default headers/navigation Microsoft includes, specifically what's in the red box:

SP Add-In Default Header
I assume these are included via the default .aspx code which looks like:

<%-- The following 4 lines are ASP.NET directives needed when using SharePoint components --%>

<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" Language="C#" %>

<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

Open in new window


But I can't wholesale delete those lines without generating a page that simply doesn't run (error is 'An unexpected error has occurred').

What's the correct way to customize?

Thanks!

Michael
LVL 11
Michael VasilevskySolutions ArchitectAsked:
Who is Participating?
 
PawełConnect With a Mentor I Design & Develop SoftwareCommented:
what you'll have to do is use CSS to hide it from the UI rather then remove it, now your sharepoint add in runs in an iFrame so i don't think you'll be able to it there without the iFrame trick (https://github.com/InstanceOfAnObject/IFrameOrchestrator) there I believe you'll be able to fire javascript from your add in into the host web that will then be able to update the css of your host page.

that or I think you can inject it into the page using the Script Editor webpart
https://sharepoint.protiviti.com/blog/Lists/Posts/Post.aspx?ID=169

with both you'll have to find the selector for the css container of what you want to hide
0
 
Michael VasilevskySolutions ArchitectAuthor Commented:
I suspected using CSS to hide is the approach - thanks for the info. Below is the CSS I added for anyone interested:

#globalNavBox {
    display: none !important;
}

#suiteBarDelta {
    display: none !important;
}

Open in new window


Thank you!

Michael
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.