Erste Schritte mit dem JavaScript-Objektmodell von Project Server 2013

In Project Server 2013 kann das JavaScript-Objektmodell in der Project Online, mobilen und lokalen Entwicklung verwendet werden. Dieses Thema bietet eine kurze Übersicht über das JavaScript-Objektmodell und beschreibt dann, wie Eine Anwendungsseite erstellt wird, die Projekte mithilfe des JavaScript-Objektmodells abruft und durchläuft.

Verwenden des Project Server-JavaScript-Objektmodells

Die Verwendung des JavaScript-Objektmodells ist eine hervorragende Möglichkeit, eine App zu erstellen, die clientseitig ausgeführt wird (im Gegensatz zu verwaltetem Clientcode, der remote ausgeführt werden muss). Apps können das JavaScript-Objektmodell verwenden, um Objekte abzurufen oder zu ändern, indem sie asynchrone Aufrufe an den Server senden. Apps, die das JavaScript-Objektmodell verwenden, werden in der Regel als benutzerdefinierte SharePoint-Add-Ins, Anwendungsseiten und Webparts bereitgestellt. Weitere Informationen finden Sie unter "Typen von SharePoint-Komponenten, die sich in einer App für SharePoint befinden können" unter Hostwebs, Add-In-Webs und SharePoint-Komponenten in SharePoint 2013.

Das JavaScript-Objektmodell implementiert die Standard Funktionalität von Project Server 2013, aber das JavaScript-Objektmodell und das Serverobjektmodell haben keine 1:1-Parität. Der Einstiegspunkt zum JavaScript-Objektmodell ist das ProjectContext-Objekt , das den Clientkontext für Project Server 2013 darstellt und Zugriff auf Serverinhalte und -funktionen bietet. Das JavaScript-Objektmodell für Project Server 2013 ist in der PS.js-Datei definiert, die sich im Standardpfad %ProgramFiles%\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\LAYOUTS auf dem Anwendungsserver befindet. Project Server 2013 installiert auch die PS.Debug.js-Datei am selben Speicherort. PS.Debug.js ist eine nicht minimierte Version von PS.js, die IntelliSense-Informationen bereitstellt.

Das JavaScript-Objektmodell ermöglicht die Formularauthentifizierung, und alle Anforderungen werden als aktueller Benutzer authentifiziert. Weitere Informationen zur Sicherheit und anderen Überlegungen zum Entwerfen benutzerdefinierter Apps und Lösungen finden Sie unter Authentifizierung, Autorisierung und Sicherheit in SharePoint 2013, Wichtige Aspekte der SharePoint-Add-In-Architektur und -Entwicklungslandschaft und SharePoint-Add-Ins im Vergleich zu SharePoint-Lösungen.

Hinweis

Für den Remotezugriff auf Daten von einer SharePoint-Website bietet SharePoint 2013 eine domänenübergreifende Bibliothek, mit der Sie clientseitige domänenübergreifende Aufrufe durchführen können. Weitere Informationen finden Sie unter Zugreifen auf SharePoint 2013-Daten aus Add-Ins mithilfe der domänenübergreifenden Bibliothek.

Viele Konzepte und Prozesse für die Verwendung des JavaScript-Objektmodells für Project Server 2013 ähneln denen in verwandten Clientobjektmodellen. Weitere Informationen zum verwalteten Clientobjektmodell von Project Server 2013 finden Sie unter Microsoft.ProjectServer.Client. Weitere Informationen zum SharePoint 2013JavaScript-Objektmodell und zum verwalteten Clientobjektmodell finden Sie unter Abschließen grundlegender Vorgänge mit JavaScript-Bibliothekscode in SharePoint 2013 und Abschließen grundlegender Vorgänge mit SharePoint 2013-Clientbibliothekscode.

Exemplarische Vorgehensweise: Erstellen einer Anwendungsseite, die Projekte abruft und durchläuft

Erfahren Sie, wie Sie eine Anwendungsseite erstellen, die die ID, den Namen und das Erstellungsdatum jedes veröffentlichten Projekts auf einer Website anzeigt.

Voraussetzungen für das Erstellen einer Anwendungsseite, die Projekte abruft und durchläuft

Um die in diesem Thema beschriebene Anwendungsseite zu entwickeln, müssen Sie die folgenden Produkte installieren und konfigurieren:

• SharePoint Server 2013
• Project Server 2013 mit mindestens einem veröffentlichten Projekt
• Visual Studio 2012
• Office Developer Tools für Visual Studio 2012

Außerdem müssen Sie über Berechtigungen zum Bereitstellen der Erweiterung in SharePoint Server 2013 und zum Abrufen von Projekten verfügen.

Hinweis

In diesen Anweisungen wird davon ausgegangen, dass Sie auf dem Computer entwickeln, auf dem Project Server 2013 ausgeführt wird.

Erstellen der Anwendungsseite in Visual Studio 2012

Mit den folgenden Schritten erstellen Sie ein SharePoint-Projekt und eine Anwendungsseite, die eine Tabelle und bezeichnung enthält. In der Tabelle werden Informationen zu den Projekten angezeigt, und die Bezeichnung zeigt Fehlermeldungen an.

1. Führen Sie auf dem Computer, auf dem Project Server 2013 ausgeführt wird, Visual Studio 2012 als Administrator aus.

2. Erstellen Sie wie folgt ein leeres SharePoint 2013-Projekt:

   1. Wählen Sie im Dialogfeld Neues Projekt in der Dropdownliste oben im Dialogfeld .NET Framework 4.5 aus.

   2. Wählen Sie in der Liste der Vorlagenkategorien die Kategorie Office SharePoint und dann die Vorlage SharePoint 2013-Projekt aus.

   3. Nennen Sie das Projekt GetProjectsJSOM, und klicken Sie dann auf die Schaltfläche OK .

   4. Wählen Sie im Dialogfeld Assistent zum Anpassen von SharePoint die Option Als Farmlösung bereitstellen aus, und klicken Sie dann auf die Schaltfläche OK .

3. Bearbeiten Sie in Projektmappen-Explorer den Wert der Website-URL-Eigenschaft für das Projekt ProjectsJSOM so, dass er mit der URL des Project Web App-instance übereinstimmt (z. Bhttps://ServerName/PWA. ).

4. Öffnen Sie das Kontextmenü für das GetProjectsJSOM-Projekt , und fügen Sie dann einen zugeordneten SharePoint-Ordner "Layouts" hinzu.

5. Öffnen Sie im Ordner Layouts das Kontextmenü für den Ordner GetProjectsJSOM , und fügen Sie dann eine neue SharePoint-Anwendungsseite mit dem Namen ProjectsList.aspx hinzu.

   Hinweis

   In diesem Beispiel wird nicht die CodeBehind-Datei verwendet, die Visual Studio 2012 für die Anwendungsseite erstellt.

6. Öffnen Sie das Kontextmenü für die Seite ProjectsList.aspx , und wählen Sie Als Startelement festlegen aus.

7. Definieren Sie im Markup für die seite ProjectsList.aspx wie folgt eine Tabelle und einen Nachrichtenplatzhalter innerhalb der asp:Content-Tags "Main".

   <table width="100%" id="tblProjects">
       <tr id="headerRow">
           <th width="25%" align="left">Project name</th>
           <th width="25%" align="left">Created date</th>
           <th width="50%" align="left">Project ID</th>
       </tr>
   </table>
   <div id="divMessage">
               <span id="spanMessage" style="color: #FF0000;"></span>
   </div>
   

Abrufen der Projektauflistung

Mit den folgenden Schritten wird die Projektauflistung abgerufen und initialisiert.

1. Fügen Sie nach dem schließenden div-Tag wie folgt ein SharePoint:ScriptLink-Tag hinzu, das auf die PS.js-Datei verweist.

    <SharePoint:ScriptLink name="PS.js" runat="server" ondemand="false" localizable="false" loadafterui="true" />
   

2. Fügen Sie unter dem SharePoint:ScriptLink-Tagskripttags wie folgt hinzu.

    <script type="text/javascript">
        // Paste the remaining code snippets here, in the order that they are presented.
    </script>
   

3. Deklarieren Sie wie folgt eine globale Variable zum Speichern der Projektauflistung.

   var projects;
   

4. Rufen Sie den SP auf. SOD.executeOrDelayUntilScriptLoaded-Methode , um sicherzustellen, dass die PS.js Datei geladen wird, bevor Ihr benutzerdefinierter Code ausgeführt wird.

   SP.SOD.executeOrDelayUntilScriptLoaded(GetProjects, "PS.js");
   

5. Fügen Sie eine Funktion hinzu, die eine Verbindung mit dem aktuellen Kontext herstellt und die Projektauflistung wie folgt abruft.

    function GetProjects() {
        // Initialize the current client context.
        var projContext = PS.ProjectContext.get_current();
        // Get the projects collection.
        projects = projContext.get_projects();
        // Register the request that you want to run on the server.
        // This call includes an optional "Include" parameter to request only the
        // Name, CreatedDate, and Id properties of the projects in the collection.
        projContext.load(projects, 'Include(Name, CreatedDate, Id)');
        // Run the request on the server.
        projContext.executeQueryAsync(onQuerySucceeded, onQueryFailed);
    }
   

   Einige Clientobjekte, die Sie über den Kontext abrufen, enthalten keine Daten, bis sie initialisiert sind. Das heißt, Sie können erst auf die Eigenschaftswerte des Objekts zugreifen, wenn das Objekt initialisiert wurde. Darüber hinaus müssen Sie für Eigenschaften vom Typ ValueObject die Eigenschaft explizit anfordern, bevor Sie auf ihren Wert zugreifen können. (Wenn Sie versuchen, vor der Initialisierung auf eine Eigenschaft zuzugreifen, erhalten Sie eine PropertyOrFieldNotInitializedException-Ausnahme .)

   Um ein Objekt zu initialisieren, rufen Sie die load-Methode (oder die loadQuery-Methode ) und dann die executeQueryAsync-Methode auf.

   • Beim Aufrufen der load-Funktion oder der loadQuery-Funktion wird eine Anforderung registriert, die Auf dem Server ausgeführt werden soll. Sie übergeben einen Parameter, der das Objekt darstellt, das Sie abrufen möchten. Wenn Sie mit einer ValueObject-Eigenschaft arbeiten, fordern Sie auch die -Eigenschaft im -Parameter an.

   • Durch Aufrufen der executeQueryAsync-Funktion wird die Abfrageanforderung asynchron an den Server gesendet. Sie übergeben eine Erfolgsrückruffunktion und eine Fehlerrückruffunktion, die aufgerufen wird, wenn die Serverantwort empfangen wird.

   Um den Netzwerkdatenverkehr zu reduzieren, fordern Sie nur die Eigenschaften an, mit denen Sie arbeiten möchten, wenn Sie die Ladefunktion aufrufen. Wenn Sie mit mehreren Objekten arbeiten, gruppieren Sie außerdem mehrere Aufrufe der Load-Funktion , bevor Sie die executeQueryAsync-Funktion aufrufen, wenn dies möglich ist.

Durchlaufen der Projektauflistung

Die folgenden Schritte durchlaufen die Projektsammlung (wenn der Serveraufruf erfolgreich ist) oder rendern eine Fehlermeldung (wenn der Aufruf fehlschlägt).

1. Fügen Sie eine Erfolgsrückruffunktion hinzu, die die Projektauflistung wie folgt durchläuft.

    function onQuerySucceeded(sender, args) {
        // Get the enumerator and iterate through the collection.
        var projectEnumerator = projects.getEnumerator();
        while (projectEnumerator.moveNext()) {
            var project = projectEnumerator.get_current();
            // Create the row for the project's information.
            var row = tblProjects.insertRow();
            // Insert cells for the Id, Name, and CreatedDate properties.
            row.insertCell().innerText = project.get_name();
            row.insertCell().innerText = project.get_createdDate();
            row.insertCell().innerText = project.get_id();
        }
    }
   

2. Fügen Sie wie folgt eine Fehlerrückruffunktion hinzu, die eine Fehlermeldung rendert.

   function onQueryFailed(sender, args) {
       $get("spanMessage").innerText = 'Request failed: ' + args.get_message();
   }
   

3. Um die Anwendungsseite zu testen, wählen Sie in der Menüleiste die Optionen Debuggen, Debuggen starten. Wenn Sie aufgefordert werden, die web.config Datei zu ändern, wählen Sie OK aus.

Vollständiges Codebeispiel

Es folgt der vollständige Code aus der ProjectsList.aspx-Datei.

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Import Namespace="Microsoft.SharePoint.ApplicationPages" %>
<%@ 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="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ProjectsList.aspx.cs" Inherits="GetProjectsJSOM.Layouts.GetProjectsJSOM.ProjectsList" DynamicMasterPageFile="~masterurl/default.master" %>
<asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
</asp:Content>
<asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
    <table width="100%" id="tblProjects">
    <tr id="headerRow">
        <th width="25%" align="left">Project name</th>
        <th width="25%" align="left">Created date</th>
        <th width="50%" align="left">Project ID</th>
    </tr>
</table>
<div id="divMessage">
        <span id="spanMessage" style="color: #FF0000;"></span>
</div>
<SharePoint:ScriptLink name="PS.js" runat="server" ondemand="false" localizable="false" loadafterui="true" />
<script type="text/javascript">
    // Declare a variable to store the published projects that exist
    // in the current context.
    var projects;
    // Ensure that the PS.js file is loaded before your custom code runs.
    SP.SOD.executeOrDelayUntilScriptLoaded(GetProjects, "PS.js");
    // Get the projects collection.
    function GetProjects() {
        // Initialize the current client context.
        var projContext = PS.ProjectContext.get_current();
        // Get the projects collection.
        projects = projContext.get_projects();
        // Register the request that you want to run on the server.
        // This call includes an optional "Include" parameter to request only the
        // Name, CreatedDate, and Id properties of the projects in the collection.
        projContext.load(projects, 'Include(Name, CreatedDate, Id)');
        // Run the request on the server.
        projContext.executeQueryAsync(onQuerySucceeded, onQueryFailed);
    }
    function onQuerySucceeded(sender, args) {
        // Get the enumerator and iterate through the collection.
        var projectEnumerator = projects.getEnumerator();
        while (projectEnumerator.moveNext()) {
            var project = projectEnumerator.get_current();
            // Create the row for the project's information.
            var row = tblProjects.insertRow();
            // Insert cells for the Id, Name, and CreatedDate properties.
            row.insertCell().innerText = project.get_name();
            row.insertCell().innerText = project.get_createdDate();
            row.insertCell().innerText = project.get_id();
        }
    }
    function onQueryFailed(sender, args) {
        $get("spanMessage").innerText = 'Request failed: ' + args.get_message();
    }
</script>
</asp:Content>
<asp:Content ID="PageTitle" ContentPlaceHolderID="PlaceHolderPageTitle" runat="server">
Application Page
</asp:Content>
<asp:Content ID="PageTitleInTitleArea" ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server" >
My Application Page
</asp:Content>

Siehe auch

• Erstellen, Abrufen, Aktualisieren und Löschen von Projekten mithilfe des Project Server-JavaScript-Objektmodells
• Clientseitiges Objektmodell (CSOM) für Project 2013
• Erste Schritte mit dem Project Server-CSOM und .NET