Dieser Artikel wurde maschinell übersetzt. Wenn Sie die englische Version des Artikels anzeigen möchten, aktivieren Sie das Kontrollkästchen Englisch. Sie können den englischen Text auch in einem Popupfenster anzeigen, indem Sie den Mauszeiger über den Text bewegen.
Übersetzung
Englisch

Erstellen eines SharePoint gehosteten Project Server-add-Ins

Office 2013 und höher

Die drei Arten von apps, die Sie für Project Online (automatisch gehostet, vom Anbieter gehostet und in SharePoint gehostete) erstellen können, ist die SharePoint-hosted app am einfachsten zu erstellen und bereitstellen. Eine SharePoint gehosteten app nicht OAuth-Authentifizierung erfordern und nicht Azure verwenden oder Wartung einer lokalen Website für die vom Anbieter gehosteten Ressourcen erfordern. Die Vorlage App für SharePoint 2013 in Visual Studio ist eine bequeme Framework für die Entwicklung von apps, die veröffentlicht und in der Office Store verkauft oder in einem privaten app-Katalog in SharePoint bereitgestellt werden können.

In-Projekt ist Zeitberichte der Prozess, in dem ein Teammitglied die Seite Aufgaben in Project Web App verwenden kann, den Status einer zugewiesenen Aufgabe, wie die Anzahl der täglichen einer Woche arbeiten für den Vorgang aufgewendeten Arbeitsstunden zu übermitteln. Des Zuordnungsbesitzers ein (normalerweise der Projektmanager) kann genehmigen oder ablehnen den Status. Wenn der Status genehmigt wird, wird den Zeitplan von Project neu berechnet. Die app QuickStatus zeigt zugewiesene Aufgaben, die der Benutzer kann schnell aktualisieren abgeschlossenen Prozentsatz und Status der ausgewählten Zuordnungen zur Genehmigung übermitteln. Obwohl die Seite Vorgänge Project Web App viel mehr Funktionen verfügt, ist die QuickStatus app ein Beispiel, das eine vereinfachte Oberfläche bietet.

Die app QuickStatus folgt ein Beispiel für Entwickler. Es ist nicht für die Verwendung in einer produktionsumgebung vorgesehen. Der primäre Zweck ist ein Beispiel für app-Entwicklung für Project Online, nicht für eine voll funktionsfähige statuserfassungs-app erstellen angezeigt. Ein besserer Ansatz zur Statusermittlung finden Sie in der empfehlungs in Nächste Schritte.

Allgemeine Informationen zu Zeitberichte finden Sie unter Vorgang in Arbeit. Weitere Informationen zum Entwickeln von Add-Ins für SharePoint und Project Server finden Sie unter SharePoint-Add-ins.

Informationen zum Entwickeln von apps relativ einfach, die an Project Online oder an eine lokale Installation von Project Server 2013 bereitgestellt werden kann, können Sie die Napa verwenden, die eine online-Entwicklung-Umgebung bereitstellen. Für komplexere apps können Ändern des Menübands Project Web App und während der Entwicklung einfacher debuggen Sie Visual Studio 2012 oder Visual Studio 2013 verwenden. Beispielsweise können Sie mit einer lokalen Installation manuell die Datentabellen Entwürfe, damit die Änderungen in der Project Server-Datenbank überprüfen. In diesem Artikel veranschaulicht, wie app-Entwicklung mit Visual Studio ausführen.

Entwicklung von apps mit Visual Studio Project Server ist Folgendes erforderlich:

  • Stellen Sie sicher, dass Sie die neuesten Service Packs und Windows-Updates auf dem lokalen Entwicklungscomputer installiert haben. Als Betriebssystem kann Windows 7, Windows 8, Windows Server 2008 oder Windows Server 2012 verwendet werden.

  • Sie müssen einen Computer verfügen, bei dem SharePoint Server 2013 und Project Server 2013 installiert, wobei der Computer für eine app-Isolation und Sideloading Apps konfiguriert ist. Sideloading kann Visual Studio die app für das debugging vorübergehend zu installieren. Sie können eine lokale Installation von SharePoint und Project Server verwenden. Weitere Informationen finden Sie unter Vorgehensweise: Einrichten einer lokalen Entwicklungsumgebung für apps für SharePoint.

    Hinweis Hinweis

    Konfigurieren Sie für eine lokale Installation einer isolierten app Domäne vor einen unternehmenseigenen app-Katalog zu erstellen.

  • Dem Entwicklungscomputer kann einem Remotecomputer sein, der Office Developer Tools für Visual Studio 2012 installiert hat. Stellen Sie sicher, dass Sie die aktuellste Version installiert haben; finden Sie im Abschnitt Tools die Apps für Office und SharePoint-downloads.

  • Überprüfen Sie die Instanz Project Web App Sie verwenden für die Entwicklung und Tests in den Browser zugänglich ist.

Informationen zur Verwendung der online-Tools finden Sie unter Vorgehensweise: Einrichten einer Umgebung für die Entwicklung von apps für SharePoint in Office 365. Eine exemplarische Vorgehensweise zur Erstellung einer einfachen app für Project Server, die online-Tools verwendet, werden soll, finden Sie unter der EPMSource Blog-Reihe Erstellen Ihrer ersten app für Project Server.

Office Developer Tools für Visual Studio 2012 enthält eine Vorlage für SharePoint-apps, die mit Project Server 2013 verwendet werden können. Wenn Sie eine app-Lösung erstellen, enthält die Lösung für den benutzerdefinierten Code die folgenden Dateien:

  • AppManifest.xml umfassen Einstellungen für die app-Titel, berechtigungsanforderungsbereich und andere Eigenschaften. Schritt 1 enthält die Schritte zum Festlegen der Eigenschaften mithilfe des Manifest-Designers.

  • "Default.aspx" im Ordner Seiten handelt es sich um die Hauptseite der App Verfahren 2 veranschaulicht HTML5 Inhalt für die app QuickStatus hinzuzufügen.

  • App.js in den Ordner Scripts ist die primäre Datei für den benutzerdefinierten JavaScript Code. Schritt 3 erläutert den JavaScript-Code für die app QuickStatus .

    Wenn Sie kommerziellen Steuerelemente wie zum Beispiel ein jQuery-basierte Raster- oder Datumsauswahl hinzugefügt haben, können Sie Verweise auf zusätzliche JavaScript Dateien in der Datei "default.aspx" hinzufügen.

  • "App.CSS" im Ordner "Content" ist die primäre Datei für benutzerdefinierte CSS3 Formatvorlagen. Schritt 2 und 3 Verfahren enthalten Informationen zu cascading Stylesheets (CSS)-Formate für die app QuickStatus . Sie können die Verweise auf zusätzliche CSS-Dateien in der Datei "default.aspx" hinzufügen.

  • AppIcon.png im Ordner Images ist das 96 x 96-Symbol, das die app in der Office Store oder den app-Katalog anzeigt.

Um das Menüband Project Web App zu ändern, können Sie eine benutzerdefinierte Aktion hinzufügen. Der Beispielcode für die QuickStatus-app -Abschnitt enthält den vollständigen Code für die geänderten Dateien Default.aspx, App.js, "App.CSS", "Elements.xml" und "AppManifest.xml".

Schritt 1. Zum Erstellen eines app-Projekts in Visual Studio

  1. Führen Sie Visual Studio 2012 als Administrator aus, und wählen Sie dann auf der Startseite Neues Projekt aus.

  2. Klicken Sie im Dialogfeld Neues Projekt erweitern Sie die Vorlagen, Visual C#- und Office/SharePoint-Knoten zu, und wählen Sie dann Apps aus. Verwenden Sie die Standardeinstellung .NET Framework 4.5 in der Ziel-Framework Dropdown-Liste am oberen Rand der mittleren Bereich, und wählen Sie dann App für SharePoint 2013 (siehe Abbildung 1).

  3. Im Feld Name Geben Sie QuickStatus, navigieren Sie zum Speicherort, in dem Sie die app zu speichern, und wählen Sie dann OK möchten.

    Abbildung 1. Erstellen einer Project Server-Apps in Visual Studio

    Erstellen einer Project Server-App in Visual Studio
  4. Füllen Sie im Dialogfeld neue app für SharePoint die nachfolgend beschriebenen drei Felder aus:

    • Geben Sie den Namen, den Sie die app zum Anzeigen in Project Web App möchten, klicken Sie im oberen Textfeld. Geben Sie zum Beispiel Schnell Status aktualisieren.

    • Geben Sie für die Website für das debugging verwendet werden soll die URL der Project Web App-Instanz. Beispielsweise geben Sie https://ServerName/ProjectServerName ( ServerName und ProjectServerName durch eigene Werte ersetzen), und wählen Sie dann auf Überprüfen. Wenn alles gut geht, zeigt Visual Studio Verbindung wurde erfolgreich hergestellt. Wenn Sie eine Fehlermeldung erhalten, stellen Sie sicher, dass die URL Project Web App korrekt ist und der Project Server-Computer für app-Isolation und Sideloading von apps konfiguriert ist. Weitere Informationen finden Sie im Abschnitt Erforderliche Komponenten für das Erstellen einer app für Project Server 2013 .

    • Wählen Sie in der Dropdownliste Wie soll Ihre app für SharePoint gehostetSharePoint gehostet.

      Vorsicht Vorsicht

      Wenn Sie versehentlich von der standardmäßige vom Anbieter gehostete Projekttyp auswählen, erstellt Visual Studio zwei Projekte in der Lösung: ein QuickStatus und eine QuickStatusWeb -Projekts. Wenn zwei Projekte angezeigt werden, diese Lösung zu löschen und erneut starten.

  5. Wählen Sie OK, um die QuickStatus Lösung, QuickStatus Projekt und Standarddateien erstellen.

  6. Öffnen Sie die Manifest-Designer-Ansicht (beispielsweise Doppelklicken auf die Datei AppManifest.xml). Auf der Registerkarte Allgemein sollte das Textfeld Titel der app-Name angezeigt, den Sie in Schritt 4 eingegeben haben. Wählen Sie die Registerkarte Berechtigungen die folgende berechtigungsanforderungen für die app hinzufügen aus (siehe Abbildung 2):

    • Wählen Sie in der ersten Zeile der berechtigungsanforderungen Liste, in der Spalte BereichZeitberichte in der Dropdown-Liste. Wählen Sie in der Spalte BerechtigungSubmitStatus.

    • Hinzufügen einer Zeile, wobei der Bereich umfasst Mehrere Projekte und die BerechtigungLesen.

    Abbildung 2. Festlegen des berechtigungsumfangs für eine statuserfassungs-app

    Festlegen des Berechtigungsumfangs für eine Statuserfassungs-App

Die app QuickStatus ermöglicht Benutzern Project Web App zu lesen Zuordnungen für den betreffenden Benutzer aus mehreren Projekten Ändern der Zuordnung prozentual abgeschlossen und das Update zu übermitteln. Die anderen berechtigungsanforderungsbereiche in der Dropdown-Liste in Abbildung 2 dargestellt sind nicht erforderlich für diese app. Die berechtigungsanforderungsbereiche sind die Berechtigungen, die die app im Auftrag des Benutzers anfordert. Wenn der Benutzer diese Berechtigungen nicht in Project Web App verfügt, wird die app nicht ausgeführt. Eine app kann über mehrere berechtigungsanforderungsbereiche, einschließlich derer, für andere SharePoint-Berechtigungen, jedoch sollte nur das Minimum für die app-Funktionalität. Es folgen die berechtigungsanforderungsbereiche, die im Zusammenhang mit Project Server:

  • Enterprise-Ressourcen: Berechtigungen für Ressourcen-Manager, zum Lesen oder Schreiben von Informationen zu anderen Benutzern Project Web App.

  • Mehrere Projekte: Lese- oder Schreibzugriff mehr als ein Projekt, in dem der Benutzer die angeforderten Berechtigungen verfügt.

  • Project Server: bewirkt, dass Benutzer die app-Administratorberechtigungen für Project Web App haben.

  • Reporting: ProjectData OData-Dienst für Project Web App (erfordert nur anmelden Berechtigung für Project Web App ) lesen.

  • Einzelnes Projekt: Lese- oder Schreibzugriff auf ein Projekt, in dem der Benutzer die angeforderten Berechtigungen verfügt.

  • Statusing: Updates für den Status der Zuordnungen, z. B. Zeiten gearbeitet, Prozent abgeschlossen und neue Zuordnungen zu übermitteln.

  • Workflow: Wenn der Benutzer die Berechtigung zum Ausführen von Project Server-Workflows verfügt, klicken Sie dann die app ausgeführt wird, mit erhöhten Berechtigungen für den Workflow.

Weitere Informationen zu berechtigungsanforderungsbereiche für Project Server 2013 finden Sie im Project-apps Abschnitt in Updates für Entwickler in Project 2013 und App-Berechtigungen in SharePoint 2013.

Erstellen von HTML-Inhalten für die QuickStatus-app

Bevor Sie Codieren des HTML-Inhalts beginnen, Entwerfen der Benutzeroberfläche und die Benutzeroberfläche für die QuickStatus app (Abbildung 3 zeigt ein Beispiel für die fertige Seite). Ein Design kann auch eine Gliederung der JavaScript Funktionen enthalten, die mit den HTML-Code interagieren. Allgemeine Informationen finden Sie unter UX-Design für apps in SharePoint 2013.

Abbildung 3. Design der QuickStatus app-Seite

Design der QuickStatus-App-Seite

Die app wird der Anzeigename Sie oben auf dem Wert des Title -Elements in der Datei AppManifest.xml entspricht.

Standardmäßig wird die Seite HTML5 verwendet. Es folgen die standardmäßigen HTML-Elemente für die Benutzeroberfläche Hauptobjekte, die die app QuickStatus im Textkörper der Seite enthält:

  • Ein form Element enthält alle anderen Elemente der Benutzeroberfläche.

  • Ein fieldset -Element erstellt einen Container und einen Rahmen für die Tabelle der Zuordnungen. das untergeordnete legend -Element enthält eine Beschriftung für den Container.

  • Ein table -Element enthält eine Beschriftung und nur eine Kopfzeile. JavaScript Funktionen ändern die Tabellenüberschrift und fügen Zeilen für die Zuordnungen.

    Hinweis Hinweis

    Zum paging und Sortierung auf einfache Weise hinzufügen verwenden eine app Produktion ein kommerziellen jQuery-basierten Rastersteuerelements anstelle einer Tabelle wahrscheinlich.

    Die Tabelle enthält Spalten für den Projektnamen, Vorgangsname mit einem Kontrollkästchen, aktuelle Arbeit, Prozent abgeschlossen, verbleibende Arbeit und den Endtermin für der Zuordnung. JavaScript Funktionen erstellen das Kontrollkästchen und der Texteingabefeld für den Prozentsatz der einzelnen Aufgaben abgeschlossen.

  • Ein input -Element für das Textfeld festgelegt Prozent abgeschlossen für alle ausgewählten Zuordnungen.

  • Ein button -Element sendet der Status geändert wird.

  • Ein button Element aktualisiert die Seite.

  • Ein button -Element die app beendet und auf der Seite Vorgänge im Project Web App gibt zurück.

Die unteren Text-Feld und die Schaltfläche Elemente sind in div -Elementen, sodass CSS der Position und die Darstellung der UI-Objekte verwalten kann. Eine JavaScript-Funktion hinzugefügt einen Absatz am unteren Rand der Seite, die Ergebnisse für den Erfolg enthält, oder das Fehlschlagen des Updates Status.

Verfahren 2. Den HTML-Code Content erstellen

  1. Öffnen Sie in Visual Studio die Datei "default.aspx".

    Die Datei enthält zwei asp:Content Elemente: innerhalb des Seitenkopfs wird das Element mit dem ContentPlaceHolderID="PlaceHolderAdditionalPageHead" -Attribut hinzugefügt, und das Element mit dem ContentPlaceHolderID="PlaceHolderMain" -Attribut wird in die Seite body Element eingefügt.

  2. Fügen Sie für die Kopfzeile der Seite im Steuerelement <asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server"> einen Verweis auf die Datei PS.js auf dem Project Server-Computer. Zum Testen und Debuggen, können Sie PS.debug.js verwenden.

    <script type="text/javascript" src="/_layouts/15/ps.debug.js"></script>
    

    Die app-Infrastruktur verwendet das virtuelle Verzeichnis /_layouts/15/ für die SharePoint-Website in IIS. Die physische Datei ist %ProgramFiles%\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\LAYOUTS\PS.debug.js.

    HinweisHinweis

    Vor der Bereitstellung der app für den Produktiveinsatz daraus .debug die Skriptverweise zum Verbessern der Leistung.

  3. Löschen Sie für den Textkörper der Seite im Steuerelement <asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server"> das generierte div Element, und fügen Sie den HTML-Code für die UI-Objekte. Das table Element enthält nur eine Kopfzeile. Die Vorgangsname Spalte enthält ein Kontrollkästchen Eingabesteuerelement. Text für das Element caption wird durch den Rückruf onGetUserNameSuccess für die getUserInfo -Funktion in der Datei App.js ersetzt.

    <form>
      <fieldset>
        <legend>Select assigned tasks</legend>
        <table id="assignmentsTable">
          <caption id="tableCaption">Replace caption</caption>
          <thead>
            <tr id="headerRow">
              <th>Project name</th>
              <th><input type="checkbox" id="headercheckbox" checked="checked" />Task name</th>
              <th>Actual work</th>
              <th>% complete</th>
              <th>Remaining work</th>
              <th>Due date</th>
            </tr>
          </thead>
        </table>
      </fieldset>
    
      <div id="inputPercentComplete" >
        Set percent complete for all selected assignments, or leave this
        <br /> field blank and set percent complete for individual assignments: 
        <input type="text" name="percentComplete" id="pctComplete" size="4"  maxlength="4" />
      </div>
    
      <div id="submitResult">
        <p><button id="btnSubmitUpdate" type="button" class="bottomButtons" ></button></p>
        <p id="message"></p>
      </div>
    
      <div id="refreshPage">
        <p><button id="btnRefresh" type="button" class="bottomButtons" >Refresh</button></p>
      </div>
    
      <div id="exitPage">
        <p><button id="btnExit" type="button" class="bottomButtons" >Exit</button></p>
      </div>
    </form>
    
  4. Fügen Sie in der Datei "App.CSS" CSS-Code für die Position und die Darstellung der Benutzeroberflächenelemente. Der vollständige CSS-Code der app QuickStatus finden Sie im Abschnitt Beispielcode für die QuickStatus-app .

Schritt 3 fügt die JavaScript-Funktionen, um die Zuordnungen lesen und Erstellen von Zeilen der Tabelle und zu ändern und aktualisieren die Zuordnung prozentual abgeschlossen. Die tatsächlichen Schritte werden bei der Entwicklung von einer app mehr iterative Alternativ erstellen Sie einige der HTML-Code, hinzufügen und Testen von verwandten Formatvorlagen und JavaScript Funktionen, ändern oder Hinzufügen weiterer HTML-Code und wiederholen Sie dieses Verfahren.

Erstellen die JavaScript-Funktionen für die QuickStatus-app

Die Visual Studio-Vorlage für eine SharePoint-app umfasst die App.js-Datei, die standardmäßige Initialisierungscode enthält, der Ruft den SharePoint-Client-Kontext ab und zeigt grundlegende abrufen und Festlegen von Aktionen für die appseite. Der JavaScript-Namespace für die SharePoint-Client-seitigen SP.js Bibliothek ist SP. Da eine app für Project Server die PS.js Bibliothek verwendet, wird die app den Namespace PS für den Clientkontext abzurufen und den Zugriff des JSOM für Project Server.

die folgenden: Funktionen in der app QuickStatusJavaScript

  • Der Ereignishandler des Dokuments ready ausgeführt, wenn das Dokumentobjektmodell (DOM) instanziiert wird. Der Ereignishandler ready führt die folgenden vier Schritte aus:

    1. Initialisiert die projContext globale Variable mit dem Clientkontext für die Project Server-JSOM und die globale Variable pwaWeb .

    2. Ruft die getUserInfo -Funktion, um die projUser globale Variable zu initialisieren.

    3. Ruft die getAssignments -Funktion, welche ruft Zuordnungsdaten für den Benutzer angegeben.

    4. Bindet klicken Sie auf das Kontrollkästchen Kopfzeile Tabelle und die Kontrollkästchen in jeder Zeile der Tabelle Ereignishandler. Die Click-Ereignishandler verwalten das Attribut checked Kontrollkästchen, wenn der Benutzer aktiviert oder alle Kontrollkästchen in der Tabelle deaktiviert.

  • Wenn die Funktion getAssignments erfolgreich ist, ruft es die onGetAssignmentsSuccess -Funktion. Dass die Funktion eine Zeile in der Tabelle für jede Zuweisung fügt initialisiert die HTML-Steuerelemente in jeder Zeile, und klicken Sie dann die unteren Schaltflächeneigenschaften.

  • Der onClick -Ereignishandler für die Schaltfläche Aktualisieren Ruft die updateAssignments -Funktion. Auf jede ausgewählte Zuordnung ist, dass die Funktion dient zum Abrufen des Prozentwertes angewendet. Wenn das Feld Prozent abgeschlossen leer ist, die Funktion ruft ab oder Prozent abgeschlossen jedes ausgewählten Zuordnung in der Tabelle. Die Funktion updateAssignments klicken Sie dann speichert und sendet die Statusupdates und schreibt eine Nachricht über die Ergebnisse am unteren Rand der Seite.

Schritt 3. Erstellen Sie die JavaScript-Funktionen

  1. Öffnen Sie in Visual Studio die Datei App.js, und löschen Sie alle Inhalte in der Datei.

  2. Fügen Sie die globalen Variablen und das Dokument ready -Ereignishandler hinzu. Das document Objekt erfolgt über eine jQuery-Funktion.

    Click-Ereignishandler für das Kontrollkästchen Kopfzeile Tabelle wird die Kontrollkästchen Zeile des aktivierten Zustands. Wenn alle der Zeile Kontrollkästchen aktiviert sind, oder alle deaktiviert sind, wird Click-Ereignishandler für die Kontrollkästchen Zeile des aktivierten Zustands das Kontrollkästchen Kopfzeile. Die Click-Ereignishandler werden auch die Ergebnisse Nachricht am unteren Rand der Seite, um eine leere Zeichenfolge festgelegt.

    var projContext;
    var pwaWeb;
    var projUser;
    
    // This code runs when the DOM is ready and creates a ProjectContext object.
    // The ProjectContext object is required to use the JSOM for Project Server.
    $(document).ready(function () {
        projContext = PS.ProjectContext.get_current();
        pwaWeb = projContext.get_web();
    
        getUserInfo();
        getAssignments();
    
        // Bind a click event handler to the table header check box, which sets the row check boxes
        // to the checked state of the header check box, and sets the results message to an empty string.
        $('#headercheckbox').live('click', function (event) {
            $('input:checkbox:not(#headercheckbox)').attr('checked', this.checked);
            $get("message").innerText = "";
        });
    
        // Bind a click event handler to the row check boxes. If any row check box is cleared, clear
        // the header check box. If all of the row check boxes are selected, select the header check box.
        $('input:checkbox:not(#headercheckbox)').live('click', function (event) {
            var isChecked = true;
            $('input:checkbox:not(#headercheckbox)').each(function () {
                if (this.checked == false) isChecked = false;
                $get("message").innerText = "";
            });
            $("#headercheckbox").attr('checked', isChecked);
        });
    });
    
  3. Fügen Sie die getUserInfo -Funktion, die onGetUserNameSuccess aufgerufen, falls die Abfrage erfolgreich ist. Die Funktion onGetUserNameSuccess ersetzt den Inhalt des Absatzes caption durch eine Tabellenüberschrift, die den Benutzernamen enthält.

    // Get information about the current user.
    function getUserInfo() {
        projUser = pwaWeb.get_currentUser();
        projContext.load(projUser);
        projContext.executeQueryAsync(onGetUserNameSuccess,
            // Anonymous function to execute if getUserInfo fails.
            function (sender, args) {
                alert('Failed to get user name. Error: ' + args.get_message());
        });
    } 
    
    // This function is executed if the getUserInfo call is successful.
    function onGetUserNameSuccess() {
        var prefaceInfo = 'Assignments for ' + projUser.get_title();
    
        $('#tableCaption').text(prefaceInfo);
    }
    
  4. Fügen Sie die getAssignments -Funktion, die onGetAssignmentsSuccess aufruft (siehe Schritt 5), wenn die Zuordnung Abfrage erfolgreich ist. Die Option Include beschränkt die Abfrage aus, um nur die angegebenen Felder zurückgeben.

    // Get the collection of assignments for the current user.
    function getAssignments() {
        assignments = PS.EnterpriseResource.getSelf(projContext).get_assignments();
    
        // Register the request that you want to run on the server. The optional "Include" parameter 
        // requests only the specified properties for each assignment in the collection.
        projContext.load(assignments,
            'Include(Project, Name, ActualWork, ActualWorkMilliseconds, PercentComplete, RemainingWork, Finish, Task)');
    
        // Run the request on the server.
        projContext.executeQueryAsync(onGetAssignmentsSuccess,
            // Anonymous function to execute if getAssignments fails.
            function (sender, args) {
                alert('Failed to get assignments. Error: ' + args.get_message());
            });
    }
    
  5. Fügen Sie die onGetAssignmentsSuccess -Funktion, die der Tabelle eine Zeile für jede Zuweisung hinzufügt. Die prevProjName -Variable wird verwendet, um zu bestimmen, ob eine Zeile für ein anderes Projekt ist. In diesem Fall wird der Projektnamen fett angezeigt; Wenn dies nicht der Fall ist, wird der Projektname ist eine leere Zeichenfolge festgelegt.

    Hinweis Hinweis

    Die JSOM enthält keinen TimeSpan Eigenschaften, die das CSOM wie ActualWorkTimeSpanenthält. Stattdessen verwendet die JSOM Eigenschaften für die Anzahl der Millisekunden, wie die folgenden StatusAssignment.actualWorkMilliseconds Eigenschaft. Die Methode zum Abrufen dieser Eigenschaft ist get_actualWorkMilliseconds, die einen ganzzahligen Wert zurückgibt.

    Die get_actualWork -Methode gibt eine Zeichenfolge wie "3 h" zurück. Sie können entweder Wert in der QuickStatus app verwenden, jedoch anders angezeigt. Die Zuordnungen Abfrage enthält beide Eigenschaften, damit Sie den Wert während des Debuggens testen können. Wenn Sie die Variable actualWork entfernen, können Sie auch die ActualWork -Eigenschaft in der Zuordnungen Abfrage entfernen.

    Schließlich die Funktion onGetAssignmentsSuccess initialisiert die Schaltfläche Aktualisieren, und die Schaltfläche Aktualisieren mit click-Ereignishandler. Der Textwert der Schaltfläche Aktualisieren kann auch in der HTML-Code festgelegt werden.

    // Get the enumerator, iterate through the assignment collection, 
    // and add each assignment to the table.
    function onGetAssignmentsSuccess(sender, args) {
        if (assignments.get_count() > 0) {
            var assignmentsEnumerator = assignments.getEnumerator();
            var projName = "";
            var prevProjName = "3D2A8045-4920-4B31-B3E7-9D0C5195FC70"; // Any unique name.
            var taskNum = 0;
            var chkTask = "";
            var txtPctComplete = "";
    
            // Constants for creating input controls in the table.
            var INPUTCHK = '<input type="checkbox" class="chkTask" checked="checked" id="chk';
            var LBLCHK = '<label for="chk';
            var INPUTTXT = '<input type="text" size="4"  maxlength="4" class="txtPctComplete" id="txt';
    
            while (assignmentsEnumerator.moveNext()) {
                var statusAssignment = assignmentsEnumerator.get_current();
                projName = statusAssignment.get_project().get_name();
                // Get an integer, such as 3600000.
                var actualWorkMilliseconds = statusAssignment.get_actualWorkMilliseconds(); 
                // Get a string, such as "1h". Not used here.
                var actualWork = statusAssignment.get_actualWork();
    
                if (projName === prevProjName) {
                    projName = "";
                }
                prevProjName = statusAssignment.get_project().get_name();
    
                // Create a row for the assignment information.
                var row = assignmentsTable.insertRow();
                taskNum++;
    
                // Create an HTML string with a check box and task name label, for example:
                // <input type="checkbox" class="chkTask" checked="checked" id="chk1" /> <label for="chk1">Task 1</label>
                chkTask = INPUTCHK + taskNum + '" /> ' + LBLCHK + taskNum + '">' 
                    + statusAssignment.get_name() + '</label>';
                txtPctComplete = INPUTTXT + taskNum + '" />';
    
                // Insert cells for the assignment properties.
                row.insertCell().innerHTML = '<strong>' + projName + '</strong>';
                row.insertCell().innerHTML = chkTask;
                row.insertCell().innerText = actualWorkMilliseconds / 3600000 + 'h';
                row.insertCell().innerHTML = txtPctComplete;
                row.insertCell().innerText = statusAssignment.get_remainingWork();
                row.insertCell().innerText = statusAssignment.get_finish();
    
                // Initialize the percent complete cell.
                $get("txt" + taskNum).innerText = statusAssignment.get_percentComplete() + '%'
            }
        }
        else {
            $('p#message').attr('style', 'color: #0f3fdb');     // Blue text.
            $get("message").innerText = projUser.get_title() + ' has no assignments'
        }
    
        // Initialize the button properties.
        $get("btnSubmitUpdate").onclick = function() { updateAssignments(); };
        $get("btnSubmitUpdate").innerText = 'Update';
        $get('btnRefresh').onclick = function () { window.location.reload(true); };
        $get('btnExit').onclick = function () { exitToPwa(); };
    }
    
  6. Hinzufügen der updateAssignments klicken Sie auf Ereignishandler für die Schaltfläche Aktualisieren. Wenn der Benutzer keinen Wert für Prozent abgeschlossen eines Vorgangs ändert oder ein Werts in das Textfeld percentComplete hinzugefügt, konnte in verschiedenen Formaten wie "60", "60 %" oder "60 %" der Wert eingegeben werden. Die getNumericValue -Methode gibt den numerischen Wert des eingegebenen Texts.

    Hinweis Hinweis

    Verwenden Sie eine app, die für die Produktion entwickelt wurde, Eingabewerte numerische Informationen sollte Feld Validierung und fehlerüberprüfung zusätzliche beinhalten.

    Das Beispiel updateAssignments umfasst einige grundlegende fehlerüberprüfung und Informationen im message Absatz am unteren Rand der Seite angezeigt – Grün, wenn die Update-Abfrage erfolgreich ist und die Farbe Rot liegt ein Eingabefehler oder die Update-Abfrage nicht erfolgreich ist.

    Bevor Sie die submitAllStatusUpdates -Methode verwenden, muss die app die Updates auf dem Server speichern, mithilfe der PS.StatusAssignmentCollection.update -Methode.

    // Update all checked assignments. If the bottom percent complete field is blank,
    // use the value in the % complete field of each selected row in the table.
    function updateAssignments() {
        // Get percent complete from the bottom text box.
        var pctCompleteMain = getNumericValue($('#pctComplete').val()).trim();
        var pctComplete = pctCompleteMain;
        var assignmentsEnumerator = assignments.getEnumerator();
        var taskNum = 0;
        var taskRow = "";
        var indexPercent = "";
        var doSubmit = true;
    
        while (assignmentsEnumerator.moveNext()) {
            var pctCompleteRow = "";
            taskRow = "chk" + ++taskNum;
    
            if ($get(taskRow).checked) {
                var statusAssignment = assignmentsEnumerator.get_current();
    
                if (pctCompleteMain === "") {
                    // Get percent complete from the text box field in the table row.
                    pctCompleteRow = getNumericValue($('#txt' + taskNum).val());
                    pctComplete = pctCompleteRow;
                }
    
                // If both percent complete fields are empty, show an error.
                if (pctCompleteMain === "" && pctCompleteRow === "") {
                    $('p#message').attr('style', 'color: #e11500');     // Red text.
                    $get("message").innerHTML =
                        '<b>Error:</b> Both <i>Percent complete</i> fields are empty, in row '
                        + taskNum
                        + ' and in the bottom textbox.<br/>One of those fields must have a valid percent.'
                        + '<p>Please refresh the page and try again.</p>';
                    doSubmit = false;
                    taskNum = 0;
                    break;
                }
                if (doSubmit) statusAssignment.set_percentComplete(pctComplete);
            }
        } 
    
        // Save and submit the assignment updates.
        if (doSubmit) {
            assignments.update();
            assignments.submitAllStatusUpdates();
    
            projContext.executeQueryAsync(function (source, args) {
                $('p#message').attr('style', 'color: #0faa0d');     // Green text.
                $get("message").innerText = 'Assignments have been updated.';
            }, function (source, args) {
                $('p#message').attr('style', 'color: #e11500');     // Red text.
                $get("message").innerText = 'Error updating assignments: ' + args.get_message();
            });
        }
    }
    
    // Get the numeric part for percent complete, from a string. For example, with "20 %", return "20".
    function getNumericValue(pctComplete) {
        pctComplete = pctComplete.trim();
        pctComplete = pctComplete.replace(/ /g, "");    // Remove interior spaces.
        indexPercent = pctComplete.indexOf('%', 0);
        if (indexPercent > -1) pctComplete = pctComplete.substring(0, indexPercent);
        return pctComplete;
    }
    
  7. Fügen Sie die exitToPwa -Funktion, die für die URL der Hostwebsite Project Web App dem SPHostUrl Abfragezeichenfolgen-Parameter verwendet. Um wieder auf der Seite Aufgaben zu navigieren, an die URL Anhängen Sie "/Tasks.aspx" . Beispielsweise würde die Variable spHostUrl auf https://ServerName/ProjectServerName/Tasks.aspxfestgelegt werden.

    Die Funktion getQueryStringParameter teilt die URL der Seite QuickStatus zum Extrahieren und den angegebenen Parameter in der URL-Optionen zurückgegeben. Es folgt ein Beispiel für die document.URL -Wert für das QuickStatus -Dokument (alle in einer einzigen Zeile):

    https://app-ef98082fa37e3c.servername.officeapps.selfhost.corp.microsoft.com/pwa/
      QuickStatus/Pages/Default.aspx
        ?SPHostUrl=https%3A%2F%2Fsphvm%2D85178%2Fpwa
        &SPLanguage=en%2DUS
        &SPClientTag=1
        &SPProductNumber=15%2E0%2E4420%2E1022
        &SPAppWebUrl=https%3A%2F%2Fapp%2Def98082fa37e3c%2Eservername
            %2Eofficeapps%2Eselfhost%2Ecorp%2Emicrosoft%2Ecom%2Fpwa%2FQuickStatus
    

    Für die vorherige URL gibt die Funktion getQueryStringParameterSPHostUrl den Wert der Abfragezeichenfolge, https://ServerName/pwazurück.

    // Exit the QuickStatus page and go back to the Tasks page in Project Web App.
    function exitToPwa() {
        // Get the SharePoint host URL, which is the top page of PWA, and add the Tasks page.
        var spHostUrl = decodeURIComponent(getQueryStringParameter('SPHostUrl'))
                        + "/Tasks.aspx";
    
        // Set the top window for the QuickStatus IFrame to the Tasks page.
        window.top.location.href = spHostUrl;
    }
    
    // Get a specified query string parameter from the {StandardTokens} URL option string.
    function getQueryStringParameter(urlParameterKey) {
        var docUrl = document.URL;
        var params = docUrl.split('?')[1].split('&');
    
        for (var i = 0; i < params.length; i++) {
            var theParam = params[i].split('=');
    
            if (theParam[0] == urlParameterKey)
                return decodeURIComponent(theParam[1]);
        }
    }
    

Wenn Sie die QuickStatus app zu diesem Zeitpunkt veröffentlichen und Hinzufügen der Kontaktobjekte zu Project Web App, die app von der Seite Websiteinhalte ausgeführt werden kann, aber es ist nicht auf einfache Weise für Benutzer verfügbar. Mit denen Benutzer suchen und die app ausführen, können Sie eine Schaltfläche auf dem Menüband auf der Seite Aufgaben dafür hinzufügen. Schritt 4 veranschaulicht eine benutzerdefinierte Aktion hinzufügen.

Hinzufügen einer benutzerdefinierten Menübandaktion

Menüband-Registerkarten, Gruppen und Steuerelemente für Project Web App werden in der Datei pwaribbon.xml angegeben die im Verzeichnis [Program Files]\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\FEATURES\PWARibbon\listtemplates auf dem Computer mit Project Server installiert ist. Der Project 2013 SDK-Download enthält eine Kopie der pwaribbon.xml Entwerfen benutzerdefinierter Aktionen für das Menüband Project Web App erleichtern.

Project Web App verwendet andere Multifunktionsleiste Definitionen für die Seite Aufgaben, je nachdem, ob die Instanz Project Web App einfacher Eingabemodus verwendet, die Benutzer Werte für sowohl die Arbeitszeittabellen und Vorgangsstatus eingeben können. Wenn Sie Administratorberechtigungen für Project Web App, die Eingabemodus feststellen wählen Sie im Einstellungsmenü Dropdown-auf der oberen rechten Ecke der Seite PWA-Einstellungen. Wählen Sie Einstellungen und Standardwerte in der, und betrachten Sie dann das Kontrollkästchen Einfacher Eingabemodus am unteren Rand der Seite, auf der Seite PWA-Einstellungen.

Wenn einfacher Eingabemodus deaktiviert ist, wird auf das Menüband auf der Seite Aufgaben nach der Region Meine Arbeit in pwaribbon.xml definiert:

   <!-- REGION My Work Ribbon-->
   <CustomAction
      Id="Ribbon.ContextualTabs.MyWork"
      . . .

Wenn einfacher Eingabemodus aktiviert ist, wird das Aufgaben Seite Menüband durch die Region Gebunden-Modus in pwaribbon.xml definiert:

   <!-- REGION Tied Mode Ribbon-->
   <CustomAction
      Id="Ribbon.ContextualTabs.TiedMode"
      . . .

Obwohl die Gruppen und Steuerelementen in jeder Region ähnlich aussehen, kann ein Steuerelement für die verknüpften Modus eine andere Funktion als selben Steuerelement für den Modus nicht gebunden aufrufen. Schritt 4 zeigt, wie ein Button-Steuerelement für die app QuickStatus hinzufügen, wenn einfacher Eingabemodus deaktiviert ist (das Kontrollkästchen Einfacher Eingabemodus ist klar).

HinweisHinweis

Allgemeine Informationen zum Hinzufügen von benutzerdefinierten Aktionen auf ein Menüband oder ein Menü in einer SharePoint-Anwendung finden Sie unter Vorgehensweise: Erstellen benutzerdefinierter Aktionen zur Bereitstellung mit apps für SharePoint.

Schritt 4. So fügen Sie eine benutzerdefinierte Aktion auf der Seite Vorgänge hinzu

  1. Überprüfen Sie auf das Menüband auf der Seite Vorgänge Project Web App. Wählen Sie die Registerkarte Vorgänge auf dem Menüband, und Planen Sie, wie es zu ändern. Es gibt sieben Gruppen, wie Submit, Aufgaben und Zeitraum. Die Gruppe Senden verfügt über zwei Steuerelemente, die eine Schaltfläche Speichern und ein Dropdownmenü Status senden. Sie können ein Steuerelement an einer beliebigen Stelle in einer Gruppe hinzufügen, fügen eine Gruppe mit einem neuen Steuerelement an einer beliebigen Position auf der Registerkarte TASKS oder Hinzufügen einer anderen Registerkarte für Menüband, die benutzerdefinierte Gruppen und Steuerelemente verfügt. In diesem Beispiel fügen wir eine dritte Schaltfläche zu der Gruppe Senden, wobei die Schaltfläche den URL der app QuickStatus aufruft.

  2. Klicken Sie im Projektmappen-Explorer in Visual Studio mit der rechten Maustaste in des QuickStatus -Projekts, und fügen Sie ein neues Element. Wählen Sie im Dialogfeld Neues Element hinzufügen die Benutzerdefinierte Menübandaktion (siehe Abbildung 4). Angenommen, nennen Sie die benutzerdefinierte Aktion RibbonQuickStatusAction, und wählen Sie dann auf Hinzufügen.

    Abbildung 4. Hinzufügen einer benutzerdefinierten Menübandaktion

    Hinzufügen einer benutzerdefinierten Menübandaktion
  3. Lassen Sie auf der ersten Seite des Assistenten Für Menüband benutzerdefinierte Aktion erstellen, die Host-Web-Option ausgewählt, wählen Sie in der Dropdown-Liste für den Bereich der benutzerdefinierten Aktion keine und wählen Sie dann Weiter (siehe Abbildung 5). Elemente in der Dropdown Liste sind relevant für SharePoint und nicht für Project Server. Wir ersetzt die meisten der generierten XML-Code für die benutzerdefinierte Aktion, damit sie auf Project Server angewendet wird.

    Abbildung 5. Angeben von Eigenschaften für die benutzerdefinierte Menübandaktion

    Festlegen von Eigenschaften für die benutzerdefinierte Menübandaktion
  4. Lassen Sie auf der nächsten Seite des Assistenten für Benutzerdefinierte Aktion erstellen, für das Menüband, die Standardwerte für die Einstellungen, und wählen Sie dann auf Fertig stellen (siehe Abbildung 6). Visual Studio erstellt den RibbonQuickStatusAction-Ordner, der eine Elements.xml-Datei enthält.

    Abbildung 6. Angeben der Einstellungen für ein Button-Steuerelement

    Festlegen der Einstellungen für ein Schaltflächensteuerelement
  5. Ändern Sie den generierten Standardcode in der Datei Elements.xml für die benutzerdefinierte Menübandaktion. Es folgt der Standard-XML-Code:

    <?xml version="1.0" encoding="utf-8"?>
    <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
      <CustomAction Id="21ea3aaf-79e5-4aac-9479-8eef14b4d9df.RibbonQuickStatusAction"
                    Location="CommandUI.Ribbon"
                    Sequence="10001"
                    Title="Invoke &apos;RibbonQuickStatusAction&apos; action">
        <CommandUIExtension>
          <!-- 
          Update the UI definitions below with the controls and the command actions
          that you want to enable for the custom action.
          -->
          <CommandUIDefinitions>
            <CommandUIDefinition Location="Ribbon.ListItem.Actions.Controls._children">
              <Button Id="Ribbon.ListItem.Actions.RibbonQuickStatusActionButton"
                      Alt="Request RibbonQuickStatusAction"
                      Sequence="100"
                      Command="Invoke_RibbonQuickStatusActionButtonRequest"
                      LabelText="Request RibbonQuickStatusAction"
                      TemplateAlias="o1"
                      Image32by32="_layouts/15/images/placeholder32x32.png"
                      Image16by16="_layouts/15/images/placeholder16x16.png" />
            </CommandUIDefinition>
          </CommandUIDefinitions>
          <CommandUIHandlers>
            <CommandUIHandler Command="Invoke_RibbonQuickStatusActionButtonRequest"
                              CommandAction="~appWebUrl/Pages/Default.aspx"/>
          </CommandUIHandlers>
        </CommandUIExtension >
      </CustomAction>
    </Elements>
    
    1. Löschen Sie im CustomAction -Element das Sequence -Attribut und das Attribut Title .

    2. Um der Gruppe Senden ein Steuerelement hinzugefügt haben, finden Sie die erste Gruppe in der Auflistung Ribbon.ContextualTabs.MyWork.Home.Groups in der pwaribbon.xml-Datei ist das Element, das <Group Id="Ribbon.ContextualTabs.MyWork.Home.Page" Command="PageGroup" Sequence="10" Title="$Resources:pwafeatures,PAGE_PDP_CM_SUBMIT"beginnt. Das folgende Codebeispiel veranschaulicht, um der Gruppe Senden ein untergeordnetes Steuerelement hinzugefügt haben, das richtige Location -Attribut des CommandUIDefinition -Elements in der Datei "Elements.xml":

            <CommandUIDefinitions>
              <CommandUIDefinition Location="Ribbon.ContextualTabs.MyWork.Home.Page.Controls._children">
                 . . .
              </CommandUIDefinition>
            </CommandUIDefinitions>
      
    3. Ändern Sie die Attributwerte des untergeordneten Elements Button wie folgt:

                <Button Id="Ribbon.ContextualTabs.MyWork.Home.Page.QuickStatus"
                        Alt="Quick Status app"
                        Sequence="30"
                        Command="Invoke_QuickStatus"
                        LabelText="Quick Status"
                        TemplateAlias="o1"
                        Image16by16="_layouts/15/1033/images/ps16x16.png" 
                        Image16by16Left="-80"
                        Image16by16Top="-144"
                        Image32by32="_layouts/15/1033/images/ps32x32.png" 
                        Image32by32Left="-32"
                        Image32by32Top="-288" 
                        ToolTipTitle="QuickStatus"
                        ToolTipDescription="Run the QuickStatus app" />
      
      • So machen Sie die Schaltfläche kann das dritte Steuerelement in der Gruppe das Attribut Sequence höher ist als der Wert Sequence="20" des vorhandenen Status senden Steuerelements liegen (bei dem es sich um ein FlyoutAnchor -Element in pwaribbon.xml handelt). Standardmäßig werden die Zahlen Sequenz von Gruppen und Steuerelementen 10, 20, 30, …, der Elemente in intermediate Positionen eingefügt werden können.

      • Das Command -Attribut gibt den Befehl in der CommandUIHandler Element ausgeführt (Siehe den folgenden Schritt 5.d). Sie können für den nächsten Entwickler vereinfachen den Namen des Befehls vereinfachen. Beispielsweise ist Command="Invoke_QuickStatus" einfacher, als Command="Invoke_RibbonQuickStatusActionButtonRequest"lesen.

      • Die Attribute von Bildern Geben Sie das Symbol 16 x 16 Pixeln – und das 32 x 32 Pixeln – Symbol für das Button-Steuerelement. In der Standarddatei "Elements.xml" gibt Image32by32="_layouts/15/images/placeholder32x32.png" eine orange Punkt. Sie können Symbole aus die Karte Bilddateien (ps16x16.png und ps32x32.png) extrahieren, die im Verzeichnis [Program Files]\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\LAYOUTS\1033\IMAGES auf dem Computer mit Project Server installiert sind. Das Symbol 32 x 32 Pixeln – ist beispielsweise in der zweiten Spalte der Symbole von links und die zehnte Zeile nach unten vom oberen Rand der Imagemap ps32x32.png (im oberen Bereich des Symbols wird nach dem Ende der neunte Zeile; 9 Zeilen X 32 Pixel/Zeile = 288 Pixel).

      • Um für das Button-Steuerelement eine QuickInfo anzuzeigen, fügen Sie das Attribut ToolTipTitle und das ToolTipDescription -Attribut hinzu.

    4. Ändern Sie die Attribute des CommandUIHandler -Elements. Angenommen, stellen Sie sicher, dass das Command -Attribut den Attributwert Command für das Button -Element übereinstimmt. Für das Attribut CommandAction ist ~appWebUrl ein Platzhalter für die URL der Webseite QuickStatus . Wenn der Menübandschaltfläche QuickStatus app aufruft, wird das Token {StandardTokens} durch URL Optionen ersetzt, die SPHostUrl, SPLanguage, SPClientTag, SPProductNumberund SPAppWebUrleinschließen.

            <CommandUIHandlers>
              <CommandUIHandler Command="Invoke_QuickStatus"
                                CommandAction="~appWebUrl/Pages/Default.aspx?{StandardTokens}"/>
            </CommandUIHandlers>
      
  6. Klicken Sie im Projektmappen-Explorer öffnen Sie den Designer Feature1.feature und verschieben Sie RibbonQuickStatusAction Element aus dem Bereich der Elemente in der Lösung in der Elemente in der Funktion Bereich. Wenn Sie dann den Package.package-Designer zu öffnen, wird das RibbonQuickStatusAction -Element im Bereich Elemente im Paket.

Beim Entwickeln der app und eine Menübandschaltfläche hinzufügen, Testen der app, normalerweise an und legen Sie Haltepunkte im JavaScript Code für das debugging. Beim Drücken von F5 zum Starten des Debugvorgangs Visual Studio kompiliert die app, zu der Website, die in der Website URL-Eigenschaft des Projekts QuickStatus angegeben wird, und zeigt eine Seite mit der Aufforderung, ob Sie der app vertrauen bereitgestellt. Wenn Sie fortfahren, und Sie dann die app QuickStatus beenden , wird auf der Seite Vorgänge im Project Web App zurückgegeben.

HinweisHinweis

Abbildung 7 zeigt, dass die Schaltfläche Schnelles Status auf der Registerkarte Vorgänge des Menübands deaktiviert ist. Nach vielen Bereitstellungen mit Visual Studio debuggen, können benutzerdefinierten Menüband-Steuerelementen blockiert werden, wenn Sie das Debuggen oder Bereitstellen der veröffentlichten Anwendung auf dem gleichen Testserver fortsetzen. Zum Aktivieren der Schaltfläche Löschen Sie des Elements RibbonQuickStatusAction in Visual Studio, und erstellen Sie eine neue Menübandaktion, die über einen anderen Namen und die ID verfügt. Wenn das Problem nicht, entfernen Sie die app aus der Project Web App Test-Instanz, und anschließend neu erstellen der app mit einer anderen app-ID.

Abbildung 7. Anzeigen der QuickInfo der deaktivierten Schaltfläche schnell Status

Anzeigen der QuickInfo der deaktivierten Schaltfläche

Schritt 5 zeigt, wie bereitstellen und installieren die QuickStatus App Verfahren 6 zeigt einige zusätzliche Schritte im Testen der app aus, nachdem Sie ihn installiert haben.

Sie haben verschiedene Möglichkeiten für die Bereitstellung einer app auf einer SharePoint-Web-Anwendung wie Project Web App. Die Bereitstellung, die Sie verwenden, hängt davon, ob Sie die app mit einem privaten SharePoint-Katalog oder auf den öffentlichen Office Store veröffentlichen möchten, und gibt an, ob SharePoint installiert ist: lokal oder einer online-Instanz ist. Schritt 5 zeigt, wie die QuickStatus app auf einer lokalen Installation in einem privaten app-Katalog bereitgestellt. Weitere Informationen finden Sie unter Installieren und Verwalten von apps für SharePoint 2013 und Veröffentlichen von apps für SharePoint

Hinweis Hinweis

Hinzufügen einer app mit einem SharePoint-Katalog erfordert Administratorberechtigungen für SharePoint.

5-Prozedur. Zum Bereitstellen der QuickStatus-app

  1. Visual Studio Speichern aller Dateien, und klicken Sie dann mit der rechten Maustaste im Projektmappen-Explorer des Projekts QuickStatus und wählen Sie Veröffentlichen.

  2. Da die QuickStatus app SharePoint gehostet wird, sind nur wenige Optionen für die Veröffentlichung (siehe Abbildung 8). Wählen Sie im Dialogfeld Veröffentlichen von apps für Office und SharePointFertig stellen.

    Abbildung 8. Die QuickStatus-app veröffentlichen

    Verwenden des Assistenten zum Veröffentlichen
  3. Kopieren Sie die Datei QuickStatus.app aus dem Verzeichnis ~\QuickStatus\bin\Debug\app.publish\1.0.0.0 , in einem geeigneten Verzeichnis auf dem lokalen Computer (oder auf dem SharePoint-Computer für eine lokale Installation).

  4. Wählen Sie Apps in der Schnellstartleiste in SharePoint-Zentraladministration, und wählen Sie dann App-Katalog verwalten.

  5. Wenn Sie ein app-Katalog nicht vorhanden ist, Erstellen einer Websitesammlung für den app-Katalog Abschnitt Konfigurieren der Website App-Katalog für eine Webanwendung in den App-Katalog in SharePoint 2013 verwalten.

    Wenn ein app-Katalog vorhanden ist, navigieren Sie zu der Website-URL auf der Seite App-Katalog verwalten. In den folgenden Schritten wird das app-Katalogwebsite beispielsweise http://ServerName/sites/TestApps.

  6. Wählen Sie auf der appseite-Katalog Apps für SharePoint in der Schnellstartleiste. Wählen Sie auf der SharePoint-Seite, auf der Registerkarte Dateien des Menübands, Apps für Dokument hochladen.

  7. Klicken Sie im Dialogfeld Hinzufügen eines Dokuments nach der Datei QuickStatus.app suchen Sie, fügen Sie Kommentare für die Version und wählen Sie dann auf OK.

  8. Wenn Sie eine app hinzufügen, können Sie auch lokale Informationen für die app-Beschreibung, Symbol und andere Informationen hinzufügen. Fügen Sie die Informationen, die Sie für die app in der SharePoint-Websitesammlung anzeigen möchten, klicken Sie im Dialogfeld Apps für SharePoint – QuickStatus.app. Fügen Sie beispielsweise die folgende Informationen ein:

    1. Feld Kurze Beschreibung: Geben Sie schnell Status app testen.

    2. Feld Beschreibung: Geben Sie Test-app abgeschlossenen Prozentsatz für Vorgänge in mehreren Projekten zu aktualisieren.

    3. Symbol-URL-Felder: ein Bild 96 x 96 Pixel, für das app-Symbol auf der Website-Objekten für die app-Katalog hinzufügen. Beispielsweise navigieren Sie zu http://ServerName/sites/TestApps, wählen Sie Websiteinhalte in das Dropdownmenü Einstellungen, wählen Sie Website-Objekten, und fügen Sie das quickStatusApp.png Bild. Mit der rechten Maustaste in des QuickStatusApp-Elements, wählen Sie Eigenschaften, und kopieren Sie im Dialogfeld Eigenschaften den Wert des Felds Webadresse (URL). Beispielsweise Kopieren Sie http://ServerName/sites/TestApps/SiteAssets/QuickStatusApp.png, und fügen Sie den Wert im Feld Adresse Web Symbol-URL. Geben Sie eine Beschreibung für das Symbol, beispielsweise (wie in Abbildung 9), geben Sie QuickStatus-app-Symbol. Testen Sie, dass die URL gültig ist.

      Abbildung 9. Hinzufügen einer Symbol-URL für die QuickStatus-app

      Festlegen von Eigenschaften für die App in SharePoint
    4. Feld Kategorie: Wählen Sie eine vorhandene Kategorie aus, oder geben Sie Ihren eigenen Wert. Beispielsweise geben Sie Zeitberichte.

      Hinweis Hinweis

      Eine Kategorie mit dem Namen Statusing ist nur für Testzwecke. Eine typische Kategorie für Project Server-apps ist Enterprise Project Management.

    5. Den Namen des Herausgebers dar: Geben Sie den Namen des Herausgebers. Geben Sie in diesem Beispiel Project-SDK.

    6. Feld aktiviert: damit die app Project Web App Websiteadministratoren für die Installation anzeigen können, aktivieren Sie das Kontrollkästchen aktiviert.

    7. Zusätzliche Felder sind optional. Beispielsweise können Sie eine Support-URL und mehrere Hilfe Bilder für die app-Detailseite hinzufügen. In Abbildung 9 umfassen die Bild-URL-1-Felder die URL für ein Screenshot der app und eine Beschreibung des Screenshots.

    8. Wählen Sie im Dialogfeld Apps für SharePoint – QuickStatus.appzu speichern. In Abbildung 9 das Schnelle Statusbericht Element in der Apps für SharePoint-Dokumentbibliothek zur Bearbeitung ausgechecktes usw. der Registerkarte Bearbeiten im Dialogfeld Feld-Menüband, würden Sie Einchecken bis zum Abschluss der auswählen (siehe Abbildung 10).

      Abbildung 10. Die QuickStatus-app wird die Apps für SharePoint-Bibliothek hinzugefügt.

      Die QuickStatus-App wird SharePoint hinzugefügt
  9. Wählen Sie im Project Web App im Dropdown-Menü Einstellungenapp hinzufügen. Auf der Seite Ihre Apps in der Schnellstartleiste auswählen Aus Ihrer Organisation, und wählen Sie dann, dass die App-Details für die Schnelle Statusbericht App Abbildung 11 zeigt die Detailseite mit der app-Symbol, Screenshot und andere Informationen, die Sie im vorherigen Schritt hinzugefügt haben.

    Abbildung 11. Verwenden der Detailseite für schnelles Status aktualisieren in Project Web App

    Hinzufügen der QuickStatus-App zu Project Web App
  10. Wählen Sie auf der Seite Statusbericht Quick Details Hinzufügen, ein. Project Web App zeigt ein Dialogfeld, in der die Vorgänge, die die QuickStatus-app ausführen können aufgelistet (siehe Abbildung 12). Die Liste der Vorgänge wird von der AppPermissionRequest -Elemente in der Datei AppManifest.XML abgeleitet.

    Abbildung 12. Sicherstellen, dass Sie die app schnell Status vertrauen

    Überprüfen des Vertrauens gegenüber der QuickStatus-App
  11. Wählen Sie im Dialogfeld Vertrauen Sie schnell StatusberichtVertrauensstellung ihn aus. Die app wird zur Seite Websiteinhalte Project Web App hinzugefügt (siehe Abbildung 13).

    Abbildung 13. Anzeigen der app schnell Status auf der Seite Websiteinhalte

    Anzeigen der QuickStatus-App in den Websiteinhalten

Wählen Sie auf der Seite Websiteinhalte das Symbol Quick Status aktualisieren, um die app auszuführen.

Hinweis Hinweis

Weitere Befehle, die Informationen über die app auf der Seite Websiteinhalte bereitstellen, wählen Sie die Region, die den Namen des Quick Status Update und den drei Punkten (...) enthält. Sie können überprüfen Sie die Seite Info für die app, zeigen Sie die App-Details-Seite, die Informationen zur app-Fehler enthält, überprüfen Sie die Seite der app-Berechtigungen oder entfernen die app aus Project Web App.

Klicken Sie auf der Seite Vorgänge Project Web App (siehe Abbildung 14), die QuickStatus Schaltfläche auf dem Menüband aktiviert werden soll. Wenn die Schaltfläche Schnelles Status deaktiviert ist, versuchen Sie es in die Notiz für Abbildung 7 beschriebenen Aktionen.

Abbildung 14. Starten der QuickStatus-app auf der Registerkarte TASKS

Starten der QuickStatus-App von der Registerkarte "TASKS"

Schritt 6 zeigt einige Tests, mit der QuickStatus-app herzustellen.

Jeder Operation, die versuchen, ein Benutzer in der app QuickStatus sollte in einer Testinstallation von Project Server vor der Bereitstellung von der app auf einem Produktionsserver oder auf einen produktionsmandanten des Project Online getestet werden. Eine Testinstallation können Sie ändern und Löschen von Zuordnungen für Benutzer ohne tatsächliche Projekte. Tests sollten auch mehrere Benutzer umfassen, die über verschiedene Sätze von Berechtigungen, beispielsweise Administrator, Projektmanager und Teammitglied verfügen. Sorgfältige Tests kann Änderungen, die in der app erfolgen soll aufdecken, nicht während der Entwicklung des Tests offensichtlich waren. Schritt 6 werden mehrere Tests für die app QuickStatus aufgelistet, umfasst aber keine vollständige Reihe von Tests aus.

Schritt 6. So testen Sie die QuickStatus-app

  1. Führen Sie die QuickStatus app aus, in dem der Benutzer keine Zuordnungen hat. Die app sollte eine blaue Nachricht am unteren Rand der Seite, beispielsweise Benutzername hat keine Zuordnungen angezeigt wird.

    Wählen Sie Update, und die Meldung Änderungen an eine grüne Zuordnungen aktualisiert wurden.

    Hinweis Hinweis

    Das Verhalten der app sollte nur geändert werden, damit die Schaltfläche Aktualisieren deaktiviert ist, wenn es keine Aufgaben sind.

  2. Führen Sie die Anwendung, in denen der Benutzer hat mehrere Zuordnungen in mehreren verschiedenen Projekten und einige Aufgaben sind nicht vollständig. Beachten Sie die Darstellung der app, und führen Sie Aktionen wie folgt (siehe Abbildung 15):

    1. Die Funktion onGetAssignmentsSuccess erstellt eine Zeile in der Tabelle für jede Zuordnung für den aktuellen Benutzer. Der Namen des Projekts zeigt nur einmal fett, für die erste Zuordnung im jeweiligen Projekt.

    2. Deaktivieren Sie das Kontrollkästchen in der Spaltenüberschrift Vorgangsname. Tabelle, klicken Sie auf Ereignis-Handler löscht alle die anderen Kontrollkästchen Felder in den Aufgabenzeilen.

    3. Wählen Sie alle Tasks aus. Click-Ereignishandler wählt für jede Zeile wird bestimmt, ob alle Zeilen ausgewählt sind, und wenn dies der Fall ist, die Spaltenüberschrift Vorgangsname.

    4. Deaktivieren Sie die Kontrollkästchen aller erneut, und wählen Sie dann eine Zuordnung, die verbleibende Arbeit zugewiesen wurde. Abbildung 15 zeigt beispielsweise dem oberen Vorgang T1 20 % verbleibende Arbeit abgeschlossen hat.

    5. Geben Sie in das Textfeld Prozent abgeschlossen festlegen80ein, und wählen Sie Aktualisieren. Eine grüne Nachricht, Zuordnungen aktualisiert wurden sollte den unteren Rand der Seite angezeigt werden.

    Abbildung 15. Aktualisieren einer Zuweisung in der QuickStatus-app

    Aktualisieren einer Zuweisung in der QuickStatus-App
  3. Wählen Sie Aktualisieren (siehe Abbildung 16). Alle Aufgaben erneut aktiviert sind, und die oberste Aufgabe veranschaulicht 80 % abgeschlossen.

    Abbildung 16. Aktualisieren Sie die Seite schnell Statusbericht

    Aktualisieren der QuickStatus-Seite
  4. Deaktivieren Sie alle Kontrollkästchen, und wählen Sie dann aus einer anderen Aufgabe. Wählen Sie zum Beispiel neue Aufgabe aus Project Web Access. Lassen Sie das Feld % abgeschlossen festgelegt leer, löschen Sie alle Textabschnitte in der Spalte % abgeschlossen für den ausgewählten Vorgang und wählen Sie Aktualisieren. Da beide Textfelder leer sind, zeigt die app einen roten Fehler angezeigt (siehe Abbildung 17).

    Abbildung 17. Testen der Fehlermeldung

    Testen der Fehlermeldung
  5. Aktualisieren der vorherigen Aufgabe auf 80 % abgeschlossen, und wählen Sie dann auf Beenden. Die Funktion exitToPwa ändert Position des Browser-Fensters auf die Seite Aufgaben in der SharePoint-Host-Anwendung (d. h., ändert die URL zu https://ServerName/pwa/Tasks.aspx). Abbildung 18 zeigt, dass die Aufgabe T1 und die neue Aufgabe aus Project Web Access-Aufgabe 80 % abgeschlossen angezeigt.

    Abbildung 18. Überprüfen der Aufgaben in Project Web App aktualisiert werden

    Überprüfen der aktualisierten Aufgaben in Project Web App
  6. Bevor der aktualisierte Status in Project Professional 2013 wird, müssen die Änderungen zur Genehmigung vorgelegt und vom Projektmanager genehmigt werden.

Tests werden weitere Änderungen, die QuickStatus App für verbesserte Nutzbarkeit hergestellt werden soll. Beispiel:

  • Zusätzliche Fehler überprüft und Validierung von Text im Feld Werte sollte vorhanden sein. Derzeit kann ein Benutzer eingeben, ein nicht-numerische Wert oder einen negativen Wert für Prozent abgeschlossen ist, führt zu einer Fehlermeldung ungeeignete. Mit einem negativen Wert, wird die Fehlermeldung Fehler beim Aktualisieren der Zuordnungen: PJClientCallableException: StatusingSetDataValueInvalid.

  • Die Fehlermeldung für leere Textfelder konnte das Projekt und die Aufgabe neben die Nummer der Tabellenzeile aufgelistet.

  • Die Erfolgsmeldung an konnte eine Liste von der aktualisierten Vorgänge enthalten; oder wenn die Funktion updateAssignments erfolgreich ist, konnte eine Seite Automatische Aktualisierung ausführen und aktualisierten Aufgaben oder Prozentsätze in eine andere Farbe und fett anzeigen.

  • Um eine sehr umfangreiche Tabelle zu vermeiden, sollten die Tabelle der Zuordnungen auf Aufgaben beschränkt werden, die weniger als 100 % abgeschlossen sind. Auch eine Option, um alle Vorgänge hinzufügen. Dieses Problem kann auch mithilfe eines Rasters jQuery-basierte anstelle einer Tabelle, wobei können Sie auf einfache Weise filtern und Raster implementieren gelöst werden paging.

  • Da die app QuickStatus Status nicht sendet, wäre das Schnelle Statussymbol auf der Registerkarte Vorgänge des Menübands mehr logisch nicht das erste Symbol in der Gruppe Vorgänge, sondern das letzte Symbol in der Gruppe Senden.

  • Da die Funktion onGetAssignmentsSuccess den Text der Schaltfläche btnSubmitUpdate initialisiert, aber die Schaltfläche Textwerte werden in HTML initialisiert, bleibt die Seite in einem teilweise initialisierten Zustand während die getAssignments Funktion ausgeführt wird. Schaltflächen auf der Seite scheint konsistenter, wenn die Textwerte im HTML-Format initialisiert wurden.

Vor allem sollte der Ansatz, den die QuickStatus app verwendet, wobei Prozent geändert für Zuordnungen, abschließen überarbeitet werden in einer Produktion app. Weitere Informationen finden Sie im Abschnitt Nächste Schritte .

Datei "default.aspx"   Der folgende Code ist in der Pages\Default.aspx -Datei des Projekts QuickStatus :

<%-- The following lines are ASP.NET directives needed when using SharePoint components --%>

<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, 
  Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" Language="C#" %>

<%@ 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" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, 
  Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%-- The markup and script in the following Content element will be placed in the <head> of the page.
     For production deployment, change the .debug.js JavaScript references to .js. --%>
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
  <script type="text/javascript" src="../Scripts/jquery-1.7.1.min.js"></script>
  <script type="text/javascript" src="/_layouts/15/sp.runtime.debug.js"></script>
  <script type="text/javascript" src="/_layouts/15/sp.debug.js"></script>
  <script type="text/javascript" src="/_layouts/15/ps.debug.js"></script>

  <!-- CSS styles -->
  <link rel="Stylesheet" type="text/css" href="../Content/App.css" />

  <!-- Add your JavaScript to the following file -->
  <script type="text/javascript" src="../Scripts/App.js"></script>
</asp:Content>

<%-- The markup and script in the following Content element will be placed in the <body> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
  <form>
    <fieldset>
      <legend>Select assigned tasks</legend>
      <table id="assignmentsTable">
        <caption id="tableCaption">Replace caption</caption>
        <thead>
          <tr id="headerRow">
            <th>Project name</th>
            <th><input type="checkbox" id="headercheckbox" checked="checked" />Task name</th>
            <th>Actual work</th>
            <th>% complete</th>
            <th>Remaining work</th>
            <th>Due date</th>
          </tr>
        </thead>
      </table>
    </fieldset>

    <div id="inputPercentComplete" >
      Set percent complete for all selected assignments, or leave this
      <br /> field blank and set percent complete for individual assignments: 
      <input type="text" name="percentComplete" id="pctComplete" size="4"  maxlength="4" />
    </div>

    <div id="submitResult">
      <p><button id="btnSubmitUpdate" type="button" class="bottomButtons" ></button></p>
      <p id="message"></p>
    </div>

    <div id="refreshPage">
      <p><button id="btnRefresh" type="button" class="bottomButtons" >Refresh</button></p>
    </div>

  <div id="exitPage">
    <p><button id="btnExit" type="button" class="bottomButtons" >Exit</button></p>
  </div>
  </form>
</asp:Content>

Datei app.js   Der folgende Code ist in der Scripts\App.js -Datei des Projekts QuickStatus :

var projContext;
var pwaWeb;
var projUser;

// This code runs when the DOM is ready and creates a ProjectContext object.
// The ProjectContext object is required to use the JSOM for Project Server.
$(document).ready(function () {
    projContext = PS.ProjectContext.get_current();
    pwaWeb = projContext.get_web();

    getUserInfo();
    getAssignments();

    // Bind a click event handler to the table header check box, which sets the row check boxes
    // to the selected state of the header check box, and sets the results message to an empty string.
    $('#headercheckbox').live('click', function (event) {
        $('input:checkbox:not(#headercheckbox)').attr('checked', this.checked);
        $get("message").innerText = "";
    });

    // Bind a click event handler to the row check boxes. If any row check box is cleared, clear
    // the header check box. If all of the row check boxes are selected, select the header check box.
    $('input:checkbox:not(#headercheckbox)').live('click', function (event) {
        var isChecked = true;
        $('input:checkbox:not(#headercheckbox)').each(function () {
            if (this.checked == false) isChecked = false;
            $get("message").innerText = "";
        });
        $("#headercheckbox").attr('checked', isChecked);
    });
});

// Get information about the current user.
function getUserInfo() {
    projUser = pwaWeb.get_currentUser();
    projContext.load(projUser);
    projContext.executeQueryAsync(onGetUserNameSuccess,
        // Anonymous function to execute if getUserInfo fails.
        function (sender, args) {
            alert('Failed to get user name. Error: ' + args.get_message());
    });
}

// This function is executed if the getUserInfo call is successful.
// Replace the contents of the 'caption' paragraph with the project user name.
function onGetUserNameSuccess() {
    var prefaceInfo = 'Assignments for ' + projUser.get_title();

    $('#tableCaption').text(prefaceInfo);
}

// Get the collection of assignments for the current user.
function getAssignments() {
    assignments = PS.EnterpriseResource.getSelf(projContext).get_assignments();

    // Register the request that you want to run on the server. The optional "Include" parameter 
    // requests only the specified properties for each assignment in the collection.
    projContext.load(assignments,
        'Include(Project, Name, ActualWork, ActualWorkMilliseconds, PercentComplete, RemainingWork, Finish, Task)');

    // Run the request on the server.
    projContext.executeQueryAsync(onGetAssignmentsSuccess,
        // Anonymous function to execute if getAssignments fails.
        function (sender, args) {
            alert('Failed to get assignments. Error: ' + args.get_message());
        });
}

// Get the enumerator, iterate through the assignment collection, 
// and add each assignment to the table.
function onGetAssignmentsSuccess(sender, args) {
    if (assignments.get_count() > 0) {
        var assignmentsEnumerator = assignments.getEnumerator();
        var projName = "";
        var prevProjName = "3D2A8045-4920-4B31-B3E7-9D0C5195FC70"; // Any unique name.
        var taskNum = 0;
        var chkTask = "";
        var txtPctComplete = "";

        // Constants for creating input controls in the table.
        var INPUTCHK = '<input type="checkbox" class="chkTask" checked="checked" id="chk';
        var LBLCHK = '<label for="chk';
        var INPUTTXT = '<input type="text" size="4"  maxlength="4" class="txtPctComplete" id="txt';

        while (assignmentsEnumerator.moveNext()) {
            var statusAssignment = assignmentsEnumerator.get_current();
            projName = statusAssignment.get_project().get_name();

            // Get an integer value for the number of milliseconds of actual work, such as 3600000.
            var actualWorkMilliseconds = statusAssignment.get_actualWorkMilliseconds();
            // Get a string value for the assignment actual work, such as "1h". Not used here.
            var actualWork = statusAssignment.get_actualWork();                         

            if (projName === prevProjName) {
                projName = "";
            }
            prevProjName = statusAssignment.get_project().get_name();

            // Create a row for the assignment information.
            var row = assignmentsTable.insertRow();
            taskNum++;

            // Create an HTML string with a check box and task name label, for example:
            //     <input type="checkbox" class="chkTask" checked="checked" id="chk1" /> 
            //     <label for="chk1">Task 1</label>
            chkTask = INPUTCHK + taskNum + '" /> ' + LBLCHK + taskNum + '">'
                + statusAssignment.get_name() + '</label>';
            txtPctComplete = INPUTTXT + taskNum + '" />';

            // Insert cells for the assignment properties.
            row.insertCell().innerHTML = '<strong>' + projName + '</strong>';
            row.insertCell().innerHTML = chkTask;
            row.insertCell().innerText = actualWorkMilliseconds / 3600000 + 'h';
            row.insertCell().innerHTML = txtPctComplete;
            row.insertCell().innerText = statusAssignment.get_remainingWork();
            row.insertCell().innerText = statusAssignment.get_finish();

            // Initialize the percent complete cell.
            $get("txt" + taskNum).innerText = statusAssignment.get_percentComplete() + '%'
        }
    }
    else {
        $('p#message').attr('style', 'color: #0f3fdb');     // Blue text.
        $get("message").innerText = projUser.get_title() + ' has no assignments'
    }

    // Initialize the button properties.
    $get("btnSubmitUpdate").onclick = function() { updateAssignments(); };
    $get("btnSubmitUpdate").innerText = 'Update';
    $get('btnRefresh').onclick = function () { window.location.reload(true); };
    $get('btnExit').onclick = function () { exitToPwa(); };
}

// Update all selected assignments. If the bottom percent complete field is blank,
// use the value in the % complete field of each selected row in the table.
function updateAssignments() {
    // Get percent complete from the bottom text box.
    var pctCompleteMain = getNumericValue($('#pctComplete').val()).trim();
    var pctComplete = pctCompleteMain;
    var assignmentsEnumerator = assignments.getEnumerator();
    var taskNum = 0;
    var taskRow = "";
    var indexPercent = "";
    var doSubmit = true;

    while (assignmentsEnumerator.moveNext()) {
        var pctCompleteRow = "";
        taskRow = "chk" + ++taskNum;

        if ($get(taskRow).checked) {
            var statusAssignment = assignmentsEnumerator.get_current();

            if (pctCompleteMain === "") {
                // Get percent complete from the text box field in the table row.
                pctCompleteRow = getNumericValue($('#txt' + taskNum).val());
                pctComplete = pctCompleteRow;
            }

            // If both percent complete fields are empty, show an error.
            if (pctCompleteMain === "" && pctCompleteRow === "") {
                $('p#message').attr('style', 'color: #e11500');     // Red text.
                $get("message").innerHTML =
                    '<b>Error:</b> Both <i>Percent complete</i> fields are empty, in row '
                    + taskNum
                    + ' and in the bottom textbox.<br/>One of those fields must have a valid percent.'
                    + '<p>Please refresh the page and try again.</p>';
                doSubmit = false;
                taskNum = 0;
                break;
            }
            if (doSubmit) statusAssignment.set_percentComplete(pctComplete);
        }
    } 

    // Save and submit the assignment updates.
    if (doSubmit) {
        assignments.update();
        assignments.submitAllStatusUpdates();

        projContext.executeQueryAsync(function (source, args) {
            $('p#message').attr('style', 'color: #0faa0d');     // Green text.
            $get("message").innerText = 'Assignments have been updated.';
        }, function (source, args) {
            $('p#message').attr('style', 'color: #e11500');     // Red text.
            $get("message").innerText = 'Error updating assignments: ' + args.get_message();
        });
    }
}

// Get the numeric part for percent complete, from a string. 
// For example, with "20 %", return "20".
function getNumericValue(pctComplete) {
    pctComplete = pctComplete.trim();
    pctComplete = pctComplete.replace(/ /g, "");    // Remove interior spaces.
    indexPercent = pctComplete.indexOf('%', 0);
    if (indexPercent > -1) pctComplete = pctComplete.substring(0, indexPercent);
    return pctComplete;
}

// Exit the QuickStatus page and go back to the Tasks page in Project Web App.
function exitToPwa() {
    // Get the SharePoint host URL, which is the top page of PWA, and add the Tasks page.
    var spHostUrl = decodeURIComponent(getQueryStringParameter('SPHostUrl'))
                    + "/Tasks.aspx";

    // Set the top window for the QuickStatus IFrame to the Tasks page.
    window.top.location.href = spHostUrl;
}

// Get a specified query string parameter from the {StandardTokens} URL option string.
function getQueryStringParameter(urlParameterKey) {
    var docUrl = document.URL;
    var params = docUrl.split('?')[1].split('&');

    for (var i = 0; i < params.length; i++) {
        var theParam = params[i].split('=');

        if (theParam[0] == urlParameterKey)
            return decodeURIComponent(theParam[1]);
    }
}

Datei "App.CSS"   Der folgenden CSS-Code ist in der Datei Content\App.css des Projekts QuickStatus :

/* Custom styles for the QuickStatus app. */

/*============= Table elements ========================================*/

table {
    width: 90%;
}

caption {
    font-size: 16px;
    padding-bottom: 5px;
    font-weight: bold;
    color: gray;
}

table th {
    background-color: gray;
    color: white;
}

table td, th {
    width: auto;
    text-align: left;
    padding: 2px;
    border: solid 1px whitesmoke;
    color: gray;
}

/*=== Class for check boxes added to rows 
*/

.chkTask {
    width: 12px;
    height: 12px;
    color: gray;
}

/*========== DIV id for the Percent Complete text box ================*/

#inputPercentComplete {
    position: fixed;
    top: auto;
    height: auto;
    padding-top: 20px;
    margin-left: 30px;
}

/*========== DIV id for the Submit Result button ====================*/

#submitResult {
    position: fixed;
    top: auto;
    height: auto;
    padding-top: 60px;
}

/*========== DIV id for the Refresh Page button ====================*/

#refreshPage {
    position: fixed;
    top: auto;
    height: auto;
    padding-top: 60px;
    margin-left: 120px;
}

/*========== DIV id for the Exit Page button ====================*/

#exitPage {
    position: fixed;
    top: auto;
    height: auto;
    padding-top: 60px;
    margin-left: 240px;
}

/*========== Class for the buttons at the bottom of the page =======*/

.bottomButtons {
    color: gray;
    font-weight: bold; 
    font-size: 12px; 
    border-color: darkgreen;
    border-width: thin;
}

Datei "Elements.xml" für das Menüband   Die folgende XML-Definition für die hinzugefügte Schaltfläche auf der Registerkarte Aufgaben auf dem Menüband ist in der Datei RibbonQuickStatusAction\Elements.xml des Projekts QuickStatus :

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <CustomAction Id="21ea3aaf-79e5-4aac-9479-8eef14b4d9df.RibbonQuickStatusAction"
                Location="CommandUI.Ribbon">
    <CommandUIExtension>
      <!-- 
      Add a button that invokes the QuickStatus app. The Quick Status button is displayed as  
      the third control in the Page group (the group title is "Submit").
      -->
      <CommandUIDefinitions>
        <CommandUIDefinition Location="Ribbon.ContextualTabs.MyWork.Home.Page.Controls._children">
          <Button Id="Ribbon.ContextualTabs.MyWork.Home.Page.QuickStatus"
                  Alt="Quick Status app"
                  Sequence="30"
                  Command="Invokae_QuickStatus"
                  LabelText="Quick Status"
                  TemplateAlias="o1"
                  Image16by16="_layouts/15/1033/images/ps16x16.png" 
                  Image16by16Left="-80"
                  Image16by16Top="-144"
                  Image32by32="_layouts/15/1033/images/ps32x32.png" 
                  Image32by32Left="-32"
                  Image32by32Top="-288" 
                  ToolTipTitle="Quick Status"
                  ToolTipDescription="Run the QuickStatus app" />
        </CommandUIDefinition>
      </CommandUIDefinitions>
      <CommandUIHandlers>
        <CommandUIHandler Command="Invoke_QuickStatus"
                          CommandAction="~appWebUrl/Pages/Default.aspx?{StandardTokens}"/>
      </CommandUIHandlers>
    </CommandUIExtension >
  </CustomAction>
</Elements>

Datei "AppManifest.xml"   Nachfolgend sehen Sie den XML-Code für das app-Manifest des Projekts QuickStatus , umfasst zwei berechtigungsanforderungsbereiche, die für das Aktualisieren des Status einer Aufgabe den app-Benutzer in mehreren Projekten erforderlich sind:

<?xml version="1.0" encoding="utf-8" ?>
<!--Created:cb85b80c-f585-40ff-8bfc-12ff4d0e34a9-->
<App xmlns="http://schemas.microsoft.com/sharepoint/2012/app/manifest"
     Name="QuickStatus"
     ProductID="{bbc497e7-1221-4d7b-a0ae-141a99546008}"
     Version="1.0.0.0"
     SharePointMinVersion="15.0.0.0"
>
  <Properties>
    <Title>Quick Status Update</Title>
    <StartPage>~appWebUrl/Pages/Default.aspx?{StandardTokens}</StartPage>
  </Properties>

  <AppPrincipal>
    <Internal />
  </AppPrincipal>
  <AppPermissionRequests>
    <AppPermissionRequest Scope="http://sharepoint/projectserver/statusing" Right="SubmitStatus" />
    <AppPermissionRequest Scope="http://sharepoint/projectserver/projects" Right="Read" />
  </AppPermissionRequests>
</App>

AppIcon.png-Datei   Die vollständige Visual Studio-Lösung für die app QuickStatus enthält eine benutzerdefinierte AppIcon.png-Datei. Die Lösung eingeschlossen werden in der Project 2013 SDK herunterladen.

Die app QuickStatus ist ein relativ einfaches Beispiel dafür, wie Sie apps zu schreiben, die auf Project Server 2013 und Project Online installiert werden kann. Testen der QuickStatus-app im Abschnitt enthält mehrere Verbesserungen, die für eine bessere Verwendbarkeit hergestellt werden können. Die app QuickStatus verwendet JavaScript Funktionen zum Status einer Aufgabe für Project Web App aktualisieren. Jedoch ändern der Zuordnung prozentual abgeschlossen ist keine empfohlene Project Management Vorgehensweise. Ein weiterer Ansatz wäre das tatsächliche Startdatum und die verbleibende Dauer der zugewiesenen Aufgaben zu aktualisieren. Eine Erläuterung der Probleme finden Sie unter Update besser in den MPUG Newsletter an.

Anzeigen: