Wednesday, June 4, 2014

Display SharePoint App Web List Data in an App Part on the Host Web

At the time of this writing, I've seen a handful of posts that come close to what I needed but weren't quite there.

I needed to put an App Part on the Host that reads App Web list data, displays it in the App Part and contains links back to the App Web. This post from Corey Roth got me most of the way there. Thanks Corey!

To make sure you know exactly what I did, you should know that the fields, content types, list template and list instance are all part of the SharePoint-Hosted App project.

The code grabs the host and app web Urls and then loads up SP.js from the host. It queries the list and sticks the latest item's title in to a Marquee. This title is linked back to its associated display form on the app web list. I highly doubt you will come across these exact requirements but the plumbing should help.

Here is the full JavaScript source:

 var clientContext;  
 var siteCollection;  
 var collListItem;  
 var oList;  
 var appWebUrl;  
 $(document).ready(  
   function () {  
     var spHostUrl = decodeURIComponent(getQueryStringParameter('SPHostUrl'));  
     appWebUrl = decodeURIComponent(getQueryStringParameter('SPAppWebUrl'));  
     var layoutsRoot = spHostUrl + '/_layouts/15/';  
     $.getScript(layoutsRoot + "SP.Runtime.js", function () {  
       $.getScript(layoutsRoot + "SP.js", sharePointReady);  
     }  
     );  
     function sharePointReady() {  
       clientContext = SP.ClientContext.get_current();  
       oList = clientContext.get_web().get_lists().getByTitle('Notifications');  
       getList();  
     }  
   }  
 );  
 function getQueryStringParameter(urlParameterKey) {  
   var params = document.URL.split('?')[1].split('&');  
   var strParams = '';  
   for (var i = 0; i < params.length; i = i + 1) {  
     var singleParam = params[i].split('=');  
     if (singleParam[0] == urlParameterKey)  
       return decodeURIComponent(singleParam[1]);  
   }  
 }  
 function getList() {  
   var camlQuery = new SP.CamlQuery();  
   camlQuery.set_viewXml("<View><RowLimit>1</RowLimit><Query><OrderBy><FieldRef Name='Created' Ascending='False' /></OrderBy></Query></View>");  
   this.collListItem = oList.getItems(camlQuery);  
   clientContext.load(collListItem);  
   clientContext.executeQueryAsync(onRequestSucceeded, onRequestFailed);  
 }  
 function onRequestSucceeded() {  
   var lineBreak = document.createElement('br');  
   var listItemInfo = '';  
   var listItemEnumerator = collListItem.getEnumerator();  
   while (listItemEnumerator.moveNext()) {  
     var oListItem = listItemEnumerator.get_current();  
     var rightNow = new Date();  
     var expireDate = new Date(oListItem.get_item('NotificationExpiration'));  
     if (rightNow < expireDate) {  
       listItemInfo += "<marquee scrollamount=4>";  
       listItemInfo += '<a target=_blank href=' + appWebUrl + '/Lists/Notifications/DispForm.aspx?ID=' + oListItem.get_id() + '>' + oListItem.get_item('Title') + '</a>';  
       listItemInfo += "</<marquee>";  
       listItemInfo += "<br>";  
     }  
   }  
   $('#Notifications').html(listItemInfo);  
 }  
 function onRequestFailed(sender, args) {  
   alert('Error: ' + args.get_message());  
 }  
Helpful Resource: How to: Retrieve List Items Using JavaScript

On a side note, my Office 365 Developer Site is worth every penny. I used it to test and debug this code and it worked wonderfully.

1 comment: