Itsme
Itsme

Reputation: 65

Issues with List View inside Client Web Part in SharePoint Hosted App

I have a Client Web Part (App Part) created using SharePoint Hosted App, which reads and displays contents of a Custom List View from Host Web inside the App Part Page using JavaScript Object Model(JSOM).

I used renderAsHtml() method for rendering the contents of list view.

Inside AppPart Page

<html>
<head>
<title></title>
 <SharePoint:ScriptLink Name="MicrosoftAjax.js" runat="server" Defer="False" Localizable="false"/>
    <SharePoint:ScriptLink Name="SP.core.js" runat="server" Defer="False" Localizable="false"/>
    <SharePoint:ScriptLink Name="SP.js" runat="server" Defer="True" Localizable="false"/>
    <SharePoint:ScriptLink Name="core.js" runat="server" />
 <script type="text/javascript" src="../Scripts/Custom.js"></script>   
</head>
<body>   
    <div id="divShow"></div>    
</body>
</html>

Inside my Custom.js file

var ctx = new SP.ClientContext(appweburl);
var appContextSite = new SP.AppContextSite(ctx, siteUrl);
var web = appContextSite.get_web();
ctx.load(web);
mylist = web.get_lists().getByTitle(listTitle);
ctx.load(mylist);
myview = list.get_views().getByTitle(viewTitle);
ctx.load(myview);
content = myview.renderAsHtml();
ctx.executeQueryAsync(success, fail);

function success() {
    $('#divShow').html(content.get_value());
}
function fail(sender, args) {           
    $("#divShow").html(args.get_message());
}

View Contains a few custom columns as well the OOTB Title Column (Linked to Item)

I am stuck up with the following issues;

(a) For the List Item link associated with the Title column, click event is not fired. That means the current page is not redirected to the particular Item ID ( not happening like a normal list view behavior). Same issue with the Pagination also.

(b) The Sorting & Filtering options are not appearing for the list view columns.

Is there any other ways to render list view contents inside app part page?

Any pointers to solve these issues will be helpful. Thanks in advance.

Upvotes: 1

Views: 264

Answers (0)

Related Questions