SharePoint: Hiding Ribbon and More with IsDlg

SharePoint has this neat little feature on every page that allows you to hide the header and nav on the page by simply appending isdlg=1 to the end (careful, it’s case sensitive). It comes in handy when you’re using a page viewer web part, you can show another page on your page and hide the other stuff that you already have on the page. Huh?

It does this:

A normal, happy, SharePoint page

Normal Document

Adding isdlg=1 to the URL makes it look like this

Document library page with isdlg

As you can see we lost the header and quick launch, which is great, but we still have a ribbon! GAH, let’s get rid of it!

This use case came out of a StackExchange question. The user only wanted to show the list of documents in a page viewer web part.

Easy enough! With a little jQuery, we can hide the ribbon, and other stuff on the page. You will need to put this code on the page that you want to hide components on, in my case I put this on my library page. You can embed it a few different ways, I prefer using a Content Editor Web part. Here’s the code to hide the ribbon bar:


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">

_spBodyOnLoadFunctionNames.push("hideItAll");

function hideItAll(){
 if(window.location.search.toLowerCase().indexOf("isdlg=1") > 0){
 $("#s4-ribbonrow").hide(); //ribbon bar
 }
}
</script>

What the above does is check if the isdlg=1 flag is in the URL, and if it is, hide the ribbon bar.

So you get something like:

Hiding Ribbon Bar

Ooooo…. what about that other bar, with the new, upload, sync? Let’s hide that too. Update your script like:


function hideItAll(){
 if(window.location.search.toLowerCase().indexOf("isdlg=1") > 0){
 $("#s4-ribbonrow").hide(); //ribbon bar

 //because the bar joins us late in the game, we need to throw CSS in to hide it
 $("head").append("<style>#Hero-WPQ2 { display:none }</style>");

 }
}

will look something like:

Hide Ribbon using IsDlg

And let’s go crazy and hide that pesky view and search bar:

function hideItAll(){
 if(window.location.search.toLowerCase().indexOf("isdlg=1") &gt; 0){
 $("#s4-ribbonrow").hide(); //ribbon bar

 //because the bar joins us late in the game, we need to throw CSS in to hide it
 $("head").append("&lt;style&gt;#Hero-WPQ2 { display:none }&lt;/style&gt;");

 $("#CSRListViewControlDivWPQ2").hide(); //views and search bar
 }
}

Tada!

Hide toolbars and ribbon with isdlg

You can further explore and show/hide other page components as you want, find the element’s ID using your toolbar and have fun!

‘Til next time, happy SharePointing!

Advertisements

21 thoughts on “SharePoint: Hiding Ribbon and More with IsDlg

  1. ED

    But where do you put this code? I was given this article as a solution that could be used by content managers who have no access to SharePoint Designer but it doesn’t seem to work when added to a page through the Content Editor Web Part.

    Reply
    1. David Lozzi Post author

      Hi Ed,

      Sorry for the confusion. the Javascript code should go onto the page that you want to view, so on the library page in my example. Then, from another page you can add the page viewer web part and for the URL of that web part, point it to your library page, adding isdlg=1 to the end. Let me know if that makes sense. Email me directly and we can work it through easier, david.lozzi at slalom.com

      Thanks,

      Reply
  2. Alexander

    Dear David,

    Thank you for your help. The situation described is exactly what I need. However, I’m fairly new to scipting so my quesions is: How can i insert the script in a SP2010 library? Can I just copy the page. How can I add the javascirpt code in IE9?

    Thank you in advance

    Reply
  3. Bryant Avey

    Over a year later, but still relevant. Thanks for the post David. I was trying to figure this out for a client and your post saved me a lot of time and tweaking.

    Reply
    1. Bryant Avey

      I should mention that the search bar can easily be removed by simply editing the web part and unchecking the search box button. I believe that option is in the Advanced settings of the web part of the list view. Other than that, this post had everything I needed. Thanks again.

      Reply
  4. Casper

    I can’t add the code to the library page (allitems.aspx) so I would need to make a new page containing the code and the library as web part and then link that page in the pageviewer… right?

    Reply
  5. Casper

    I’m using SharePoint 2010 and can’t figure it out :(
    I can’t add the javascript to the AllItems.aspx from the library so I would need to create a new page, have the script together with a webpart that shows the library in that page and in turn call that page in the pageviewer webpart on the page I’d want it to display it on… Correct?

    Reply
      1. Casper

        Hi David,

        Thank you for your reply.
        I Think figured it out. To add the javascript to the allitems.aspx you need to use the /ToolPaneView=2 option to add a CEWP to the page and in turn add the javascript/link to your JS file.
        Moved on to the next problem :S

        Kind regards!

  6. Jody M Doulis

    Hi David,

    Thanks for this. I am having issues getting second and third steps to work. 1st part (hide ribbon) is working. 2nd part (hide new) is not working and neither is 3rd part (hide view and search). I am working in SP 2013.

    Other issue I have come across is that space where ribbon would have show in web part is still there – so my actual library/list shows up much lower in the web part with lots of white space above.

    Reply
  7. Bella

    Hi David,

    I’m working on my company’s website and trying to implement this to display the Master Calendar (calendar with overlay) on pageB by adding it as an iFrame inside a content editor. Good news is the Master Calendar is displayed on pageB. Bad news – It displays the branding, left nav bar as well as the right nav bar that is on the Master Calendar page.

    I need to only display the Master Calendar as well as the Right nav bar (which contains the ‘Calendars in View’ color index’). If I append the URL in my content editor with IsDlg=1, then it get rids of BOTH the left and right Navs and branding. Is there a way to preserve the ‘Calendars in View’ right nav?

    Thanks
    Bella

    Reply
  8. Lee

    Hi David,
    When a save a shortcut with isdlg=1 it saves fine. But when I click the shortcut &IsDlg=1 is being added to the end of the URL which is then stopping me from being able to scroll down on my form.
    have you come across this before and how can I get IE to stop adding the uppercase to the URL?
    many thanks

    Reply
  9. Bas

    Hi Dave,

    I think I’m nearly there with the ribbon, But it’s not entirely gone yet. I’m using SP2013. If you look at your first screenshot above, I have a ‘Showme’ menu to the right of the ‘Browse’ menu. With your instructions I got rid of everything on that ribbon except the ‘Showme’ menu. It looks like ?IsDlg=1 removes the ‘Browse’ menu and the ribbonrow function removes the ‘File’ and ‘Library’ menus, but neither remove the ‘Showme’ Menu. Any thoughts?

    Thanks!

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s