25

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:

enter image description here

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.

  • Is the <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> part in the page? – Robert Lindgren May 10 '14 at 14:27
  • Yes sir it is. To be fair, I have only seen references to using the web parts inside an app site not in a client web part. However, since it's an IFrame of an app page I assume this is possible. – Jesus Shelby May 10 '14 at 16:23
  • Same here, but I agree with you :) – Robert Lindgren May 10 '14 at 16:24
  • Where does the list live that you are referencing? – Sam Sussman Oct 28 '14 at 16:05
  • It was deployed inside the appweb. – Jesus Shelby Oct 28 '14 at 17:37
2

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.

  • 1
    You are on the right track. Once you are in a web part the context changes dramatically. MS is trying to let you know that you can't do that by not rendering any of your content. Either put it on its own page and build the structure yourself or insert your content into a web part, but don't do both. – ghangas Nov 20 '15 at 21:47
1

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,

  • This code is actually included by default in the page generated by Visual Studio when you add a new client web part. It doesn't appear to be a client side rendering issue - it appears as if the items are not delivered at all. – Jesus Shelby May 29 '15 at 22:46

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.