Skip to main content

Sharepoint/Project Server App with javascript and Web Part

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

Popular posts from this blog

Sharepoint 2013 - Fullscreen mode/hide quick launch

If you want to hide the quick launch on a SharePoint page or web part page in 2013 you could of cause use CSS scripts as in 2010.
But as a new thing in 2013 the user have the possibility to click on full screen mode. so why not load your page in this mode and then the user can choose to exit the mode if he prefers.

Add a content editor webpart to your page and click on Edit HTML from the ribbon.
Add the following code:

<script type="text/javascript">
window.onload = function()
{
  SetFullScreenMode(true);
}
</script>

Install DLL in GAC - Windows 2008/2012 (Using Powershell, No GacUtil.exe)

If you want to install a DLL in the GAC and do not have the GACUtil.exe available. Powershell is properly the easiest way to procede.

Before Powershell you would properly just drag the DLL file into the C:\Windows\Assembly but this option is usually not available anymore.

Powershell - Add DLL to GAC So to install a DLL file in the GAC simply execute the below Powershell script. Remember you migth want to run the Powershell prompt as an administrator.
[System.Reflection.Assembly]::Load("System.EnterpriseServices, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a")$publish=New-ObjectSystem.EnterpriseServices.Internal.Publish$publish.GacInstall("c:\temp\MyDllFile.dll")iisreset
The first line adds a reference to the assembly we need to be able to mange the GAC.
The second and third lines retrives the GAC object and publish a new DLL file to it.
The last line resets the Internet Information Services. This is only needed if your DLL file is used in a websi…

Reporting on Microsoft Planner or Microsoft Staffhub!

Reporting on Planner or StaffHub!


For a long time I have been waiting for the reporting API for Planner and Staffhub. Today I got tired of waiting and found another way to do it.

I manage to create a PowerBI report based on all the planner plans I have access to and the same method will work for Staffhub and properly many other services such as Microsoft Tasks, Microsoft Forms, etc. 


How?Easy, but requires some Azure, Flow and PowerBI knowledge. These are the steps to I used: 1.Create an Azure Blob to hold the data 2.Create a Flow to save Planner data in the Blob 3.Access the Blob from PowerBI Azure – Blob!So first, lets create a Blob. No, not that kind of Blob. Access the Azure portal - https://portal.azure.com/ Select New and search for “storage account” Fill out the form and click create. I kept all settings to their default Access the new storage and locate/copy the Storage Account Name and Access Key – you will need this for connections to Flow and PowerBI. Next let’s create a Blob Container an…