Dieser Artikel wurde maschinell übersetzt. Bewegen Sie den Mauszeiger über die Sätze im Artikel, um den Originaltext anzuzeigen.
Übersetzung
Original

Exemplarische Vorgehensweise: Erstellen einer von SharePoint gehosteten Project Server-App

Office 2013

Informationen Sie zum Erstellen und Bereitstellen einer SharePoint gehosteten app und die Project Web App Multifunktionsleiste mithilfe von SharePoint-Entwicklungstools in Visual Studio 2012 ändern. Die QuickStatus -app, die einen Benutzer schnell Zuordnungsstatus aktualisieren ermöglicht, ist ein Beispiel, das in Project Online und in einer lokalen Installation von Project Server 2013 verwendet werden kann.

Letzte Änderung: Montag, 9. März 2015

Gilt für: Project Online | Project Server 2013

Die drei Arten von apps, die Sie für Project Online (automatisch gehostet, vom Anbieter gehostet und SharePoint-Hosting) erstellen können, ist die SharePoint-hosted app am einfachsten zu erstellen und bereitstellen. Eine SharePoint-hosted 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 mit einem privaten app-Katalog in SharePoint bereitgestellt werden können.

Im Projekt ist Statuserfassung 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. Der Zuordnungsbesitzer (in der Regel der Projektmanager) kann genehmigen oder Ablehnen den Status. Wenn der Status genehmigt wird, wird den Zeitplan von Project neu berechnet. Die app QuickStatus zeigt die zugewiesene Aufgaben, die der Benutzer kann schnell Prozent abgeschlossen aktualisieren und Status der ausgewählten Zuordnungen zur Genehmigung übermitteln. Obwohl die Seite Aufgaben in 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 die Entwicklung von Apps für Project Online, nicht für eine voll funktionsfähige statuserfassungs-app erstellen angezeigt. Besser Statuserfassung finden Sie unter der Empfehlung in den Nächste Schritte.

Allgemeine Informationen zu Statuserfassung finden Sie unter Updating Vorgangsstatus. Weitere Informationen zum Entwickeln von apps für SharePoint und Project Server finden Sie unter Erstellen von apps für SharePoint.

Um relativ einfach apps zu entwickeln, die auf Project Online oder auf einer lokalen Installation von Project Server 2013 bereitgestellt werden können, 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 einfachere Problembehandlung während der Entwicklung, Visual Studio 2012 oder Visual Studio 2013 Sie. Beispielsweise können Sie mit einer lokalen Installation manuell die Datentabellen Entwürfe, damit die Änderungen in 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, auf dem SharePoint Server 2013 und Project Server 2013 installiert, wobei der Computer für eine app-Isolation und Sideloaden von apps konfiguriert ist. Sideloaden 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 wie: 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.

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

  • Stellen Sie sicher, dass die Instanz Project Web App Sie für die Entwicklung verwenden werden und Tests in den Browser zugänglich ist.

Informationen zur Verwendung der online-Tools finden Sie unter wie: 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 die online-Tools verwendet werden soll, finden Sie unter 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 enthält 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-2 des Verfahrens zum Hinzufügen von Inhalt für die app QuickStatus HTML5 zeigt.

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

    Wenn Sie kommerzielle Steuerelemente wie zum Beispiel ein jQuery-basierte Raster- oder Datumsauswahl hinzufügen, 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 Formatvorlagen für cascading Stylesheets (CSS) 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 Symbol von 96 x 96, 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, wechseln Sie zum Speicherort, in dem Sie die app zu speichern, und wählen Sie dann OK möchten.

    Abbildung 1. Erstellen einer Project Server-app 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:

    • Klicken Sie im oberen Textfeld Geben Sie den Namen, den die app in Project Web App angezeigt werden soll. Geben Sie zum Beispiel Quick Statusaktualisierung.

    • Geben Sie für die Website für das debugging verwenden 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 eine app-Isolation und Sideloaden von apps konfiguriert ist. Weitere Informationen finden Sie im Abschnitt Voraussetzungen für das Erstellen einer app für Project Server 2013 .

    • Wählen Sie in der Dropdownliste Wie soll Ihre App für SharePoint gehostet werden? die Option SharePoint-Hosting aus.

      Vorsicht Vorsicht

      Wenn Sie versehentlich von der standardmäßige vom Anbieter gehosteten Projekttyp auswählen, erstellt Visual Studio zwei Projekte in der Lösung: ein QuickStatus -Projekt und ein QuickStatusWeb -Projekt. Wenn Sie zwei Projekte angezeigt wird, dieser Lösung löschen und erneut starten.

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

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

    • Wählen Sie in der ersten Zeile der Berechtigungsanforderungen Liste, in der Spalte BereichZeitberichte in der Dropdown-Liste aus. 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 Zuordnungen für diesen Benutzer aus mehreren Projekten lesen, ändern Sie die Zuordnung prozentual abgeschlossen und die Aktualisierung senden. 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 derjenigen für andere SharePoint-Berechtigungen, jedoch sollte nur das Minimum für die app-Funktionalität. Dies sind die berechtigungsanforderungsbereiche, die im Zusammenhang mit Project Server:

  • Enterprise-Ressourcen: Ressourcen-Managerberechtigungen zum Lesen oder Schreiben von Informationen zu anderen Benutzern Project Web App.

  • Mehrere Projekte: Lese- oder Schreibzugriff auf mehr als ein Projekt, das der Benutzer die angeforderten Berechtigungen hat.

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

  • Berichterstellung: Lesen Sie die ProjectData OData-Dienst für Project Web App (erfordert nur anmelden Berechtigung für Project Web App ).

  • 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, wie 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.

For more information about permission request scopes for Project Server 2013, see the Project apps section in Was ist neu und was ist für Entwickler in Project 2013 and App permissions in SharePoint 2013.

Erstellen des HTML-Inhalts für die QuickStatus-app

Bevor Sie beginnen, Codieren des HTML-Inhalts, 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 im oberen Bereich, der der Wert des Title -Elements in der Datei AppManifest.xml ist.

Standardmäßig wird die Seite HTML5 verwendet. Es folgen die standardmäßige 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 die Tabellenüberschrift ändern und Zeilen für die Zuordnungen hinzufügen.

    Hinweis Hinweis

    Um auf einfache Weise hinzuzufügen Paginierung und Sortierung, verwenden eine app Produktion wahrscheinlich ein kommerziellen jQuery-basierten Rastersteuerelements anstelle einer Tabelle.

    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 für alle ausgewählten Zuordnungen.

  • Ein button -Element sendet die Statusänderungen.

  • Ein button -Element wird die Seite aktualisiert.

  • Ein Element button beendet die app als auch auf der Seite Vorgänge im Project Web App zurückgegeben.

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

Schritt 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 einen Verweis auf die Datei PS.js auf dem Project Server-Computer im <asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server"> -Steuerelement für die Kopfzeile der Seite. 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

    Bevor Sie die app für die Verwendung in einer Produktionsumgebung bereitstellen, entfernen Sie .debug aus der Skriptverweise zum Verbessern der Leistung.

  3. Klicken Sie im <asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server"> -Steuerelement für den Textkörper der Seite löschen Sie 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 caption -Element 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. Den vollständigen CSS-Code der app QuickStatus finden Sie im Beispielcode für die QuickStatus-app -Abschnitt.

Schritt 3 fügt die JavaScript Funktionen zum Lesen der Zuordnungen und erstellen die Zeilen der Tabelle und zum Ändern und aktualisieren die Zuordnung prozentual abgeschlossen. Die tatsächlichen Schritte sind mehr iterative bei der Entwicklung von einer Anwendung, in dem Sie alternativ den HTML-Code zu erstellen, hinzufügen und verwandte Formatvorlagen und JavaScript Funktionen zu testen, ändern oder Hinzufügen weiterer HTML-Code, und wiederholen Sie dieses Verfahren.

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

Visual Studio-Vorlage für eine SharePoint-app umfasst die App.js-Datei, die Code für die Initialisierung enthält, ruft den SharePoint-Clientkontext und veranschaulicht 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 Project Server-app die PS.js-Bibliothek verwendet, wird die app den PS -Namespace zum Abrufen des Clientkontexts und des JSOM für Project Server zugreifen.

JavaScript-Funktionen in der app QuickStatus umfassen Folgendes:

  • Der Dokument ready -Ereignishandler 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 click-Ereignishandler das Kontrollkästchen Kopfzeile Tabelle und die Kontrollkästchen in jeder Zeile der Tabelle. Die Click-Ereignishandler verwalten das checked -Attribut des die 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 jedem ausgewählten Zuordnung angewendet wird, dass die Funktion dient zum Abrufen des Prozentwert; Wenn das Feld Prozent abgeschlossen leer ist, die Funktion ruft ab oder den Prozentsatz der einzelnen ausgewählten Zuordnungen abgeschlossen in der Tabelle. Die Funktion updateAssignments speichert und sendet die Statusaktualisierungen dann und schreibt eine Meldung über die Ergebnisse am unteren Rand der Seite.

Schritt 3. Erstellen Sie die JavaScript-Funktionen

  1. Klicken Sie in Visual Studio öffnen Sie 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 mithilfe einer jQuery-Funktion.

    Click-Ereignishandler für das Kontrollkästchen Kopfzeile Tabelle wird die Kontrollkästchen für die Zeile des aktivierten Zustands. Alle Kontrollkästchen der Zeile ausgewählt sind oder alle deaktiviert sind, wird Click-Ereignishandler für die Kontrollkästchen für die 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 aufruft, wenn 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 in der Tabelle eine Zeile für jede Zuweisung hinzufügt. Die Variable prevProjName wird verwendet, um festzustellen, ob eine Zeile für ein anderes Projekt ist. In diesem Fall wird der Projektnamen fett dargestellt; Wenn dies nicht der Fall ist, wird der Projektname auf eine leere Zeichenfolge festgelegt.

    Hinweis Hinweis

    Die JSOM enthält keinen TimeSpan Eigenschaften, die das CSOM, wie etwa ActualWorkTimeSpan enthält. Stattdessen verwendet die JSOM Eigenschaften für die Anzahl der Millisekunden an, wie die folgenden StatusAssignment.actualWorkMilliseconds Eigenschaft. Die Methode zum Abrufen dieser Eigenschaft ist get_actualWorkMilliseconds, die einen ganzzahliger 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, aber unterschiedlich anzeigen. 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 Abfrage Zuordnungen entfernen.

    Schließlich die onGetAssignmentsSuccess -Funktion initialisiert die Schaltfläche Aktualisieren, und die Schaltfläche Aktualisieren mit click-Ereignishandler. Der Textwert der Schaltfläche Aktualisieren kann auch in den 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 click-Ereignishandler für die Schaltfläche Aktualisieren. Wenn der Benutzer einen Wert für prozentuale Fertigstellung eines Vorgangs ändert oder einen Wert in das Textfeld percentComplete fügt , kann der Wert in verschiedenen Formaten wie "60", "60 %" oder "60 %" eingegeben werden. Die getNumericValue -Methode gibt den Wert des eingegebenen Texts zurück.

    Hinweis Hinweis

    Verwenden Sie eine app, die für die Produktion entwickelt wurde, geben Sie Werte für numerische Informationen sollte Feld Validierung und Fehlerüberprüfung zusätzliche enthalten.

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

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

    // 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 dem SPHostUrl Abfragezeichenfolgen-Parameter für die URL der Hostwebsite Project Web App verwendet. Um wieder auf der Seite Aufgaben zu navigieren, fügen Sie "/Tasks.aspx" an die URL ein. 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 den 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 app QuickStatus zu diesem Zeitpunkt veröffentlichen und Hinzufügen der Kontaktobjekte zu Project Web App, kann die app von der Seite Websiteinhalte ausgeführt werden, jedoch 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 zeigt, wie 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. Project 2013-SDK-Download enthält eine Kopie der pwaribbon.xml Design benutzerdefinierte 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 Dateneingabemodus feststellen Wählen Sie im Dropdown-Einstellungen auf der oberen rechten Ecke der Seite PWA-Einstellungen. Wählen Sie Arbeitszeittabellen-Einstellungen und Standardwerte in der auf der Seite PWA-Einstellungen, und betrachten Sie dann das Kontrollkästchen Einfacher Eingabemodus am unteren Rand der Seite.

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

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

Wenn einfacher Eingabemodus aktiviert ist, wird das Seite Menüband Aufgaben 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 das gleiche 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 eines Menübands 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 Aufgaben in 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 Submit-Gruppe, in dem die Schaltfläche für die URL der app QuickStatus aufruft.

  2. Klicken Sie im Projektmappen-Explorer in Visual Studio mit der rechten Maustaste in des QuickStatus -Projekts, und klicken Sie dann ein neues Element hinzufügen. Wählen Sie im Dialogfeld Neues Element hinzufügen die Option Benutzerdefinierte Menübandaktion (siehe Abbildung 4). Angenommen, nennen Sie die benutzerdefinierte Aktion RibbonQuickStatusAction, und wählen Sie dann 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 keine in der Dropdown-Liste für den Bereich für die benutzerdefinierte Aktion, und wählen Sie dann auf Weiter (siehe Abbildung 5). Die Elemente in der Dropdown-Listen sind relevant für SharePoint, 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 für Menüband erstellen, 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. Der folgende Code zeigt das richtigen Location -Attribut des CommandUIDefinition -Elements, um der Gruppe Senden ein untergeordnetes Steuerelement hinzugefügt haben, 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 Attribut Command gibt den Befehl im CommandUIHandler -Element ausgeführt (Siehe den folgenden Schritt 5.d). Sie können den Namen des Befehls für den nächsten Entwickler erleichtern 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" ein orange Punkt. Sie können die 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).

      • Fügen Sie zum Anzeigen von QuickInfo für das Schaltflächensteuerelement das ToolTipTitle -Attribut 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 die Menübandschaltfläche die app QuickStatus aufruft, wird das Token {StandardTokens} durch URL-Optionen ersetzt, die SPHostUrl, SPLanguage, SPClientTag, SPProductNumberund SPAppWebUrlenthalten.

            <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 den Bereich der Elemente in der Funktion zu. 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 Code JavaScript für das debugging. Beim Drücken Sie F5, um mit dem Debuggen beginnen, Visual Studio kompiliert die app, die Website, die in der Website-URL-Eigenschaft des Projekts QuickStatus angegeben ist, und zeigt eine Seite mit der Aufforderung, ob Sie die 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 Übersicht über den Status auf der Registerkarte Vorgänge des Menübands deaktiviert ist. Nachdem viele Bereitstellungen mit Visual Studio debuggen, können benutzerdefinierte Menüband-Steuerelementen blockiert werden, wenn Sie weiterhin Debuggen oder die veröffentlichte Anwendung auf dem gleichen Testserver bereitstellen. 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, versuchen Sie die app aus der Project Web App Test-Instanz zu entfernen 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 in Testen der app aus, nachdem Sie es installiert haben.

Es gibt mehrere Möglichkeiten zum Bereitstellen einer app auf einer SharePoint-Webanwendung wie Project Web App. Welche 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 der 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 zu einer SharePoint-Katalog erfordert Administratorberechtigungen für SharePoint.

5-Prozedur. Zum Bereitstellen der QuickStatus-app

  1. In Visual Studio speichern Sie alle Dateien, und klicken Sie dann mit der rechten Maustaste im Projektmappen-Explorer des Projekts QuickStatus und auf Veröffentlichen.

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

    Abbildung 8. Veröffentlichen der QuickStatus-app

    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 an den SharePoint-Computer für eine lokale Installation).

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

  5. Wenn ein app-Katalog nicht vorhanden ist, erstellen Sie eine Websitesammlung für die app-Katalog gemäß Abschnitt Konfigurieren der App-Katalogwebsite für eine Webanwendung in der 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 die 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 Suchen nach der Datei QuickStatus.app, Kommentare für die Version hinzufügen, 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. Kurze Beschreibung dar: Übersicht über den Status testen appgeben.

    2. Feld Beschreibung: Geben Sie Test-app zum Aktualisieren der abgeschlossenen Aufgaben in mehreren Projekten.

    3. Symbol-URL-Felder: ein 96 x 96 Pixel – Bild für das app-Symbol auf der Website-Objekten für die app-Katalog hinzufügen. Angenommen, navigieren Sie zu http://ServerName/sites/TestApps, wählen Sie Websiteinhalte im Dropdown-Menü Einstellungen, wählen Sie Website-Objekten, und fügen Sie das Bild quickStatusApp.png. 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. Geben Sie zum Beispiel Statuserfassung.

      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 Bilder der Hilfe für die app-Detailseite hinzufügen. In Abbildung 9 ist die URL für ein Screenshot der app und eine Beschreibung des Screenshots die Bild-URL-1-Felder enthalten.

    8. Wählen Sie im Dialogfeld Apps für SharePoint – QuickStatus.appSpeichern aus. In Abbildung 9 das Schnelle Statusaktualisierung-Element in der Apps für SharePoint-Bibliothek zur Bearbeitung, ausgechecktes usw. der Registerkarte Bearbeiten im Dialogfeld Feld Menüband, die Sie auswählen können, Einchecken bis zum Abschluss der (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. Wählen Sie Aus Ihrer Organisation, und wählen Sie App-Details für die Schnelle Statusaktualisierung App Abbildung 11 zeigt die Detailseite mit der app-Symbol, Screenshot und andere Informationen, die Sie im vorherigen Schritt hinzugefügt haben, auf der Seite Ihre Apps in der Schnellstartleiste.

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

    Hinzufügen der QuickStatus-App zu Project Web App
  10. Wählen Sie auf der Detailseite für schnelles Statusaktualisierung Hinzufügen, ein. Project Web App zeigt ein Dialogfeld, in dem die Vorgänge, die die QuickStatus-app ausführen können aufgeführt (siehe Abbildung 12). Die Liste der Vorgänge wird von der AppPermissionRequest -Elemente in der Datei AppManifest.XML abgeleitet.

    Abbildung 12. Sicherstellen, dass Sie der Übersicht über den Status app vertrauen

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

    Abbildung 13. Anzeigen der app Übersicht über den Status auf der Seite Websiteinhalte

    Anzeigen der QuickStatus-App in den Websiteinhalten

Klicken Sie auf der Seite Websiteinhalte können Sie das Symbol Für schnelles Statusaktualisierung zum Ausführen der app auswählen.

Hinweis Hinweis

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

Auf der Seite Aufgaben in 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 werden einige Tests angezeigt, mit der QuickStatus-app herzustellen.

Jeder Operation, die versuchen, ein Benutzer in der app QuickStatus sollte auf einer Testinstallation von Project Server vor der Bereitstellung von der app auf einem Produktionsserver oder auf einen produktionsmandanten der Project Online getestet werden. Eine Testinstallation ermöglicht Ihnen, ändern und Löschen von Zuordnungen für Benutzer ohne Auswirkungen auf die aktuelle Projekte. Tests sollten auch mehrere Benutzer umfassen, die unterschiedliche Berechtigungen, beispielsweise Administrator, Projektmanager und Teammitglied verfügen. Umfassende Tests kann Änderungen, die in der app erfolgen soll aufdecken, die 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 app QuickStatus , in dem der Benutzer hat keine Zuordnungen. Die app sollte eine blaue Nachricht am unteren Rand der Seite, beispielsweise Benutzername hat keine Zuordnungen anzeigen.

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

    Hinweis Hinweis

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

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

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

    2. Deaktivieren Sie das Kontrollkästchen in der Spaltenüberschrift Vorgangsname. Die Tabellenkopfzeile klicken Sie auf Ereignis-Handler löscht die anderen Kontrollkästchen aller Felder in der die Vorgangszeilen.

    3. Wählen Sie alle Tasks aus. Click-Ereignishandler wählt für jede Zeile 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 80ein, und wählen Sie Aktualisieren, in das Feld % abgeschlossen festgelegt. 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 obere Aufgabe zeigt 80 % abgeschlossen.

    Abbildung 16. Aktualisieren Sie die Seite schnell Statusaktualisierung

    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 (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 die Position des Browser-Fensters auf der Seite Vorgänge 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 angezeigt wird, müssen die Änderungen zur Genehmigung vorgelegt und von der Projektmanager genehmigt werden.

Testen, werden mehrere andere Änderungen, die in der app QuickStatus für verbesserte Nutzbarkeit erfolgen soll. Beispiel:

  • Zusätzliche Überprüfungen und Überprüfung von Text im Feld Werte sollte vorhanden sein. Derzeit kann ein Benutzer eingeben, ein nicht numerischer Wert oder einen negativen Wert für Prozent abgeschlossen ist, wodurch eine unfreundliche Fehlermeldung angezeigt. Mit einem negativen Wert, wird die Fehlermeldung Fehler beim Aktualisieren von Zuordnungen: PJClientCallableException: StatusingSetDataValueInvalid.

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

  • Die Erfolgsmeldung könnte eine Liste der Aufgaben aktualisiert enthalten; oder wenn die Funktion updateAssignments erfolgreich ist, konnte eine automatische Seitenaktualisierung ausführen und Anzeigen der aktualisierten Aufgaben oder Prozentsätze in eine andere Farbe und fett.

  • Um eine sehr große 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 onGetAssignmentsSuccess -Funktion 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 in HTML initialisiert wurden.

Vor allem soll der Ansatz, den die QuickStatus app verwendet, wobei Prozent geändert für Zuordnungen abgeschlossen geändert werden in einer Produktionsumgebung app. Weitere Informationen finden Sie im Abschnitt Nächste Schritte .

Datei "default.aspx"   Der folgende Code ist in der Datei Pages\Default.aspx 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>

App.js-Datei   Der folgende Code ist in der Datei Scripts\App.js 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 folgende 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 wird 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 das XML für das app-Manifest des QuickStatus -Projekts, einschließlich der zwei berechtigungsanforderungsbereiche, die für die Aktualisierung des app-Benutzers Zuordnungsstatus 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   Vollständige Visual Studio-Lösung für die app QuickStatus enthält eine benutzerdefinierte AppIcon.png-Datei. Die Lösung enthalten sein wird in der Project 2013 SDK herunterladen.

Die app QuickStatus ist ein relativ einfaches Beispiel dafür, wie Sie Anwendungen schreiben, die auf Project Server 2013 und Project Online installiert werden kann. Der Testen der QuickStatus-app -Abschnitt enthält mehrere Verbesserungen, die für eine bessere Verwendbarkeit hergestellt werden können. Die app QuickStatus mithilfe JavaScript Funktionen für Project Web App aktualisiert. Aber ändern die 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:
© 2015 Microsoft