Getting Project Server code to run in a AppPart
Today I tried to get project server CSOM/javascript code to run within an app part. This caused a lot of troubleshooting and guessing to get it to work.By simply adding the ps.js library to the app part page I kept getting an error.
Library:
<script type="text/javascript" src="/_layouts/15/ps.js"></script>
Error:
"executeordelayuntilscriptloaded is undefined"
Then I tried to use ScriptLink to load the library but got the same error.
<SharePoint:ScriptLink runat="server" Name="ps.js" Localizable="false" OnDemand="False" LoadAfterUI="True"></SharePoint:ScriptLink>
The code I was trying to run was very simpel and worked fine if I added it to a normal aspx page.
$(document).ready(function () {
var projContext = PS.ProjectContext.get_current();
var projects = projContext.get_projects();
projContext.load(projects, 'Include(Name, CreatedDate, Id)');
projContext.executeQueryAsync(
function () {
var projEnum = projects.getEnumerator();
var sp = "";
while (projEnum.moveNext()) {
var p = projEnum.get_current();
sp = sp + ";" + p.get_name();
}
$("#projects").html(sp);
}, function (sender, args) {
alert('Error Load projects: ' + args.get_message());
});});
After many tries, forum question and different enviroments I finnaly found the solution. The thing i missed was that ps.js had some SharePoint dependencies besides sp.js and sp.runtime.js. By including the following libraries I finally got it to work.
<script type="text/javascript" src="/_layouts/15/init.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.core.js"></script>
Now i could use the AppPart but the result after the function executeQueryAsync failed with the message:
Unexpected response from server. The status code of response is '404'. The status text of response is 'Not Found'.
After some more digging and mails with the Project team in Redmond I got the suggestion to try and add the following line:
projContext.set_isPageUrl(SP.ClientContext.get_current().get_isPageUrl());
And suddenly everything started to work and I could load the projects through the AppPart.
The complete AppPart code can be found below:
<%@ Page language="C#" Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<WebPartPages:AllowFraming ID="AllowFraming" runat="server" />
<html>
<head>
<title></title>
<script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/_layouts/15/MicrosoftAjax.js"></script>
<script type="text/javascript" src="/_layouts/15/init.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.core.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<script type="text/javascript" src="/_layouts/15/ps.js"></script>
<script type="text/javascript">
'use strict';
// Set the style of the client web part page to be consistent with the host web.
(function () {
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" />');
}
})();
function Run() {
$(document).ready(function () {
var projContext = PS.ProjectContext.get_current();
projContext.set_isPageUrl(SP.ClientContext.get_current().get_isPageUrl());
var projects = projContext.get_projects();
projContext.load(projects, 'Include(Name, CreatedDate, Id)'); // Run the request on the server.
projContext.executeQueryAsync(
function () {
var projEnum = projects.getEnumerator();
var sp = "";
while (projEnum.moveNext()) {
var p = projEnum.get_current();
sp = sp + ";" + p.get_name();
}
$("#projects").html(sp);
}, function (sender, args) {
alert('Error Load projects: ' + args.get_message());
$("#projects").html(args.get_message());
});
});
}
Run();
</script>
</head>
<body>
<div id="projects">Loading...</div>
</body>
</html>
Comments
Post a Comment