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>

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…

SharePoint/Project Server - Firewall port open list

Firewall port open list Every time I have to install a new instance of Project Server I forget which ports have to be open.
The ports are divided into 3 lists, one list for the web front end servers, one list for the application server and one list for the SQL server.
These ports are based on a 2013 installation of SharePoint/Project Server. the 2010 installation defer a little bit.


Web Frontend ServerWhen a range is specified all ports between the range must be opened.
     Port(s)ProtocolBoundDescription
-80 TCPInhttp
-443 TCPInhttps/ssl
-25 TCPInSMTP for e-mail integration
-16500-16519TCPInPorts used by the search index component
-22233-22236TCPIn/OutPorts required for the AppFabric Caching Service
-32843-32845TCPInCommunication between Web servers and service applications
-32846TCPIn/OutSharePoint User Code Service
-808-809TCPInOffice Web Apps
-5725TCP