How to display Custom Page Inside Web Part Page

Question

In one part of my portal I have a Web-Part page, and I want to use one of the zones to display a Custom Page (just a wiki page from a Team Site in the Site Page library) inside that zone.

If I use a Content-Editor, it displays code gibberish.

If I use a Page-Viewer, it shows the Custom Page with the portal header and everything.

How can I show just the custom page portion inside my Web-Part zone?

[I know I could upload custom html to a document libary and then display that in a content-editor, but then you lose the WYSIWYG RichText editor functionality]

Answer 1

If you were trying to display a web part page, you could accomplish this using a page viewer web part, as detailed in my original answer below. However, wiki pages will throw an error if they cannot find the ribbon.

Embed a web part page (not a wiki page) using a Page Viewer Web Part

When specifying the URL of the page that the page viewer web part should display, add "?isDlg=1" to the end of the URL. This causes SharePoint to treat the page as if it were in a dialog box, so it will strip out the quick launch and top navigation bars.

So for example, if the URL of your page is http://mysite/mysubsite/mylibrary/mypage.aspx you'd want to enter http://mysite/mysubsite/mylibrary/mypage.aspx?isDlg=1 into the page viewer web part's URL property.

Embedding a wiki page using a Page Viewer Web Part

As mentioned earlier, wiki pages don't play nicely with isDlg=1.

To get around that, you can customize the master page on your site so that the page will hide the ribbon and navigation bars when some other (custom) query string parameter is provided.

For example, you could add the following code to your site's master page, before the closing </head> tag.

<script>
ExecuteOrDelayUntilScriptLoaded(function(){
if(GetUrlKeyValue("dialog") == "1"){
    var ribbon = document.getElementById("s4-ribbonrow");
    if(typeof(ribbon) != "undefined"){ ribbon.style.display = "none";}
    var nots = document.querySelectorAll(".s4-notdlg");
    for(var i = 0; i < nots.length; i++){nots[i].style.display="none";}
    document.getElementById("MSO_ContentTable").style.marginLeft = "0px";
}},"SP.JS");
</script>

After that you'd be able to append ?dialog=1 to a page's url to achieve an effect similar to isDlg=1, except that it should work on wiki pages.

Answer 2

Here's a potential solution that involves a Content Editor and jQuery.load(). You can "screen scrape" the section of the source page and stuff it into an HTML element of your choosing on the destination page. It would look something like this:

$("#myDiv").load("/SitePages/Blah.aspx .ms-WPBody");

In this example, "myDiv" is the ID of a div you'd place in your CEWP, and the argument passed into the load() function is the server-relative url of the source page,then a space followed by the CSS selector of the destination page content. Note that you must escape any spaces in the page url if there are any, because jQuery interprets the first space it finds as the delimiter between the url and the selector.

http://api.jquery.com/load/ (Check out the section titled "loading page fragments")

Answer 3

I ended up putting several content editors on the web-part page, and moving the wiki content from the pages in Site Pages to the wiki content of the content editor on the web-part page. Not what I originally had in mind, but at least I don't have to do tricks to get what I want!

However, even though this is a solution, it isn't the best solution.