Client Web Part - XsltListViewWebPart

Question

I'm trying to display a list view inside a client web part (for SharePoint hosted App). The below code will work inside an app page but does not render in a client web part. There are no errors being surfaced - the web part itself seems to render but there is no content. I am quite sure I'm missing something trivial, but it's escaping me at the moment.

<SharePoint:AjaxDelta id="DeltaSPWebPartManager" runat="server">
    <WebPartPages:SPWebPartManager ID="SPWebPartManager1" runat="Server"/>
</SharePoint:AjaxDelta>
<WebPartPages:WebPartZone runat="server" FrameType="None" ID="full" Title="loc:full">
     <WebPartPages:XsltListViewWebPart ID="XsltListViewWebPart_AppWeb" 
        runat="server" ListUrl="Lists/FormData" IsIncluded="True" 
        NoDefaultStyle="TRUE" Title="FormData" PageType="PAGE_NORMALVIEW" 
        Default="False" ViewContentTypeId="0x"> 
    </WebPartPages:XsltListViewWebPart> 
</WebPartPages:WebPartZone>

Just to show - this is a small screenshot of the rendered page with client web part - the web part itself is rendering - but no list data:

EDIT

Ok - making some progress. Instead of using the default webpart page created from VS I pointed to the existing app page that does render. You have to add

<WebPartPages:AllowFraming ID="AllowFraming" runat="server" />

The difference with this page - it inherits the app masterpage and the controls are in <asp:content> tags. So - I'm assuming in my page where I'm not inheriting the MasterPage I'm missing either an control reference or a javascript library that I get with said MasterPage. Still working so more to come.

Edit 2

Still at a loss as to why it wont work from Client App Part standard page vs a normal App Page. The only difference appears to be with the master page reference, but even toying around with the referenced assemblies and javascript libraries I can't get it to render. The down side of using the App web page is you still get all the overhead of the master page.

Answer 1

You're including a WebPartManager in your app part, and presumably there's already one on the page you're adding it to. These load various bits of JavaScript, and if I recall correctly having more than one per page causes problems. You might see JavaScript errors if you open your browser's developer tools.

You could try removing the the WebPartManager from your app part. I'm not sure if that will work at all then, because you won't have a WebPartManager in the app page defining your app part, but it's worth a quick try.

Answer 2

I believe this problem is the same one I have seen creating App Parts styled using SharePoint typical CSS, as far I am aware the cause is that SharePoint doesn't load the master page and usual CSS in the App Part iFrame automatically.

In apps I have written I have added the following JavaScript into the section of any AppPart.aspx pages used:

<!-- 2nd load SharePoint CSS -->
<script type="text/javascript">
    'use strict';
    // Ensure that the App Part has the correct stylesheets
    var hostUrl = '';
    if (document.URL.indexOf('?') != -1) {
        var params = document.URL.split('?')[1].split('&');
        for (var i = 0; i < params.length; i++) {
            var p = decodeURIComponent(params[i]);
            if (/^SPHostUrl=/i.test(p)) {
                hostUrl = p.split('=')[1];
                document.write('<link rel="stylesheet" href="' + hostUrl + '/_layouts/15/defaultcss.ashx" />');
                break;
            }
        }
    }
    if (hostUrl == '') {
        document.write('<link rel="stylesheet" href="/_layouts/15/1033/styles/themable/corev15.css" />');
    }
</script>

MSDN explains why this is required https://msdn.microsoft.com/en-us/library/office/fp179921.aspx:

Use the SharePoint style sheet in your app part content

Since your app part is hosted within a SharePoint page, you might want to make the app part content look like it is part of the page. One way to achieve a similar look and feel is to use the same style classes as the SharePoint page that is hosting the app part. You can make the SharePoint website’s style sheet available to the app part by adding a reference to the defaultcss.ashx file from the app web.

And while I pulled that code snippet from one of my apps, I'm sure I didn't originally write it so I probably got it from here: http://jeffreypaarhuis.com/2013/03/22/how-to-create-an-app-part-in-sharepoint-2013/

Hope that helps,