Erstellen, Abrufen, Aktualisieren und Löschen von Projekten mit Project Server JavaScript
Die Szenarien in diesem Artikel zeigen, wie Sie die aktuelle ProjectContext-instance abrufen, die Auflistung veröffentlichter Projekte auf dem Server abrufen und durchlaufen, ein Projekt mithilfe des Project Server-JavaScript-Objektmodells erstellen, abrufen, auschecken und löschen sowie die Eigenschaften eines Projekts ändern.
Hinweis
Diese Szenarien definieren benutzerdefinierten Code im Markup einer SharePoint-Anwendungsseite, verwenden jedoch nicht die CodeBehind-Datei, die Visual Studio 2012 für die Seite erstellt.
Voraussetzungen für das Arbeiten mit Project Server 2013-Projekten im JavaScript-Objektmodell
Um die in diesem Artikel beschriebenen Szenarien auszuführen, müssen Sie die folgenden Produkte installieren und konfigurieren:
- SharePoint Server 2013
- Project Server 2013
- Visual Studio 2012
- Office Developer Tools für Visual Studio 2012
Sie müssen auch über Berechtigungen verfügen, um die Erweiterung in SharePoint Server 2013 bereitzustellen und an Projekten mitzuwirken.
Hinweis
In diesen Anweisungen wird davon ausgegangen, dass Sie auf dem Computer entwickeln, auf dem Project Server 2013 ausgeführt wird.
Erstellen der Visual Studio-Projektmappe
Mit den folgenden Schritten wird eine Visual Studio 2012-Projektmappe erstellt, die ein SharePoint-Projekt und eine Anwendungsseite enthält. Die Seite enthält die Logik für die Arbeit mit Projekten.
So erstellen Sie das SharePoint-Projekt in Visual Studio
Führen Sie auf dem Computer, auf dem Project Server 2013 ausgeführt wird, Visual Studio 2012 als Administrator aus.
Klicken Sie in der Menüleiste auf Datei, Neu, Projekt.
Wählen Sie im Dialogfeld Neues Projekt in der Dropdownliste oben im Dialogfeld .NET Framework 4.5 aus.
Wählen Sie in der Kategorie Office/SharePoint-Vorlagedie Option SharePoint-Projektmappen und dann die Vorlage SharePoint 2013-Projekt aus.
Nennen Sie das Projekt ProjectsJSOM, und klicken Sie dann auf die Schaltfläche OK .
Wählen Sie in das Dialogfeld des Assistenten zum Anpassen von SharePointals farmlösung bereitstellen, und wählen Sie dann auf die Schaltfläche Fertig stellen.
Bearbeiten Sie den Wert der Website-URL-Eigenschaft für das Projekt ProjectsJSOM so,
https://ServerName/PWAdass er mit der URL des Project Web App-instance übereinstimmt (z. B. ).
So erstellen Sie die Anwendungsseite in Visual Studio
Öffnen Sie in Projektmappen-Explorer das Kontextmenü für das Projekt ProjekteJSOM, und fügen Sie dann einen zugeordneten SharePoint-Ordner "Layouts" hinzu.
Öffnen Sie im Ordner Layouts das Kontextmenü für den Ordner ProjekteJSOM , und fügen Sie dann eine neue SharePoint-Anwendungsseite mit dem Namen ProjectsList.aspx hinzu.
Öffnen Sie das Kontextmenü für die Seite ProjectsList.aspx , und wählen Sie Als Startelement festlegen aus.
Definieren Sie im Markup für die seite ProjectsList.aspx wie folgt Benutzeroberflächensteuerelemente in den asp:Content-Tags "Main".
<table width="100%" id="tblProjects"> <tr id="headerRow"> <th width="25%" align="left">Name</th> <th width="25%" align="left">Description</th> <th width="25%" align="left">Start Date</th> <th width="25%" align="left">ID</th> </tr> </table> <textarea id="txtGuid" rows="1" cols="35">Paste the project GUID here.</textarea> <button id="btnSend" type="button"></button><br /> <span id="spanMessage" style="color: #FF0000;"></span>Hinweis
Diese Steuerelemente können nicht in jedem Szenario verwendet werden. Im Szenario "Projekte erstellen" werden beispielsweise die Textbereichs- und Schaltflächensteuerelemente nicht verwendet.
Fügen Sie nach dem schließenden span-Tag wie folgt ein SharePoint:ScriptLink-Tag , ein SharePoint:FormDigest-Tag und Skripttags hinzu.
<SharePoint:ScriptLink id="ScriptLink" name="PS.js" runat="server" ondemand="false" localizable="false" loadafterui="true" /> <SharePoint:FormDigest id="FormDigest" runat="server" /> <script type="text/javascript"> // Replace this comment with the code for your scenario. </script>Das SharePoint:ScriptLink-Tag verweist auf die PS.js-Datei, die das JavaScript-Objektmodell für Project Server 2013 definiert. Das SharePoint:FormDigest -Tag generiert einen Nachrichtenhash für die Sicherheitsüberprüfung bei Bedarf von Operationen, die den Inhalt zu aktualisieren.
Ersetzen Sie den Platzhalterkommentar durch den Code aus einem der folgenden Verfahren:
Um die Anwendungsseite zu testen, wählen Sie in der Menüleiste die Optionen Debuggen, Debuggen starten. Wenn Sie aufgefordert werden, die web.config Datei zu ändern, wählen Sie OK aus.
Erstellen von Project Server 2013-Projekten mithilfe des JavaScript-Objektmodells
Mit der Prozedur in diesem Abschnitt werden Projekte mithilfe des JavaScript-Objektmodells erstellt. Das Verfahren umfasst die folgenden allgemeinen Schritte:
Rufen Sie die aktuelle ProjectContext-instance ab.
Erstellen Sie ein ProjectCreationInformation-Objekt , um anfängliche Eigenschaften für Ihr Projekt anzugeben. Geben Sie die erforderliche name-Eigenschaft mithilfe der ProjectCreationInformation.set_name-Funktion an.
Rufen Sie die veröffentlichten Projekte mithilfe der funktion ProjectContext.get_projects vom Server ab. Die get_projects-Funktion gibt ein ProjectCollection-Objekt zurück.
Fügen Sie das neue Projekt der Auflistung hinzu, indem Sie die ProjectCollection.add-Funktion verwenden und das ProjectCreationInformation-Objekt übergeben.
Aktualisieren Sie die Auflistung mithilfe der ProjectCollection.update-Funktion und der ProjectContext.waitForQueueAsync-Funktion . Die Update-Funktion gibt ein QueueJob-Objekt zurück, das Sie an waitForQueueAsync übergeben. Dieser Aufruf veröffentlicht auch das Projekt.
Fügen Sie den folgenden Code zwischen den Skripttags ein, die Sie in der Prozedur So erstellen Sie die Anwendung in Visual Studio hinzugefügt haben.
// Declare a global variable to store the project collection.
var projects;
// Ensure that the PS.js file is loaded before your custom code runs.
SP.SOD.executeOrDelayUntilScriptLoaded(CreateProject, "PS.js");
// Add a project the projects collection.
function CreateProject() {
// Initialize the current client context.
var projContext = PS.ProjectContext.get_current();
// Initialize a ProjectCreationInformation object and specify properties
// for the new project.
// The Name property is required and must be unique.
var creationInfo = new PS.ProjectCreationInformation();
creationInfo.set_name("Test Project 1");
// Specify optional properties for the new project.
// If not specified, the Start property uses the current date and the
// EnterpriseProjectTypeId property uses the default EPT.
creationInfo.set_description("Created through the JSOM.");
creationInfo.set_start("2013-10-01 09:00:00.000");
// Get the projects collection.
projects = projContext.get_projects();
// Add the new project to the projects collection.
projects.add(creationInfo);
// Add a second project to use in the deleting projects procedure.
creationInfo.set_name("Test Project 2");
projects.add(creationInfo);
// Submit the request to update the collection on the server
var updateJob = projects.update();
projContext.waitForQueueAsync(updateJob, 10, GetProjects);
}
// Get the projects collection.
function GetProjects(response) {
// This call demonstrates that you can get the context from the
// ProjectCollection object.
var projContext = projects.get_context();
// Register the request for information that you want to run on the server.
// This call includes an optional "Include" parameter to request only the Name, Description,
// StartDate, and Id properties of the projects in the collection.
projContext.load(projects, 'Include(Name, Description, StartDate, Id)');
// Run the request on the server.
projContext.executeQueryAsync(IterateThroughProjects, QueryFailed);
}
// Iterate through the projects collection.
function IterateThroughProjects(response) {
// Get the enumerator and iterate through the collection.
var enumerator = projects.getEnumerator();
while (enumerator.moveNext()) {
var project = enumerator.get_current();
// Create and populate a row with the values for the project's Name, Description,
// StartDate, and Id properties.
var row = tblProjects.insertRow();
row.insertCell().innerText = project.get_name();
row.insertCell().innerText = project.get_description();
row.insertCell().innerText = project.get_startDate();
row.insertCell().innerText = project.get_id();
}
// This scenario does not use the textarea or button controls.
$get("txtGuid").disabled = true;
$get("btnSend").disabled = true;
}
function QueryFailed(sender, args) {
$get("spanMessage").innerText = 'Request failed: ' + args.get_message();
}
Aktualisieren von Project Server 2013-Projekten mithilfe des JavaScript-Objektmodells
Die Prozedur in diesem Abschnitt aktualisiert die startDate-Eigenschaft eines Projekts mithilfe des JavaScript-Objektmodells. Das Verfahren umfasst die folgenden allgemeinen Schritte:
Rufen Sie die aktuelle ProjectContext-instance ab.
Rufen Sie die veröffentlichten Projekte mithilfe der funktion ProjectContext.get_projects vom Server ab. Die get_projects-Funktion gibt ein ProjectCollection-Objekt zurück.
Führen Sie die Anforderung auf dem Server mithilfe der ProjectContext.load-Funktion und der ProjectContext.executeQueryAsync-Funktion aus.
Rufen Sie ein PublishedProject-Objekt mithilfe der ProjectContext.getById-Funktion ab.
Überprüfen Sie das Zielprojekt mithilfe der Project.checkOut-Funktion . Die checkOut-Funktion gibt die Entwurfsversion des veröffentlichten Projekts zurück.
Ändern Sie den Starttermin des Projekts mithilfe der funktion DraftProject.set_startDate .
Veröffentlichen Sie das Projekt mithilfe der DraftProject.publish-Funktion und der ProjectContext.waitForQueueAsync-Funktion . Die Publish-Funktion gibt ein QueueJob-Objekt zurück, das Sie an waitForQueueAsync übergeben.
Fügen Sie den folgenden Code zwischen den Skripttags ein, die Sie in der Prozedur So erstellen Sie die Anwendung in Visual Studio hinzugefügt haben.
// Declare global variables.
var projContext;
var projects;
// Ensure that the PS.js file is loaded before your custom code runs.
SP.SOD.executeOrDelayUntilScriptLoaded(GetProjects, "PS.js");
// Get the projects collection.
function GetProjects() {
// Initialize the current client context.
projContext = PS.ProjectContext.get_current();
// Get the projects collection.
projects = projContext.get_projects();
// Register the request for information that you want to run on the server.
// This call includes an optional "Include" parameter to request only the Name, Description,
// StartDate, and Id properties of the projects in the collection.
projContext.load(projects, 'Include(Name, Description, StartDate, Id)');
// Run the request on the server.
projContext.executeQueryAsync(IterateThroughProjects, QueryFailed);
}
// Iterate through the projects collection.
function IterateThroughProjects(response) {
// Get the enumerator and iterate through the collection.
var enumerator = projects.getEnumerator();
while (enumerator.moveNext()) {
var project = enumerator.get_current();
// Create and populate a row with the values for the project's Name, Description,
// StartDate, and Id properties.
var row = tblProjects.insertRow();
row.insertCell().innerText = project.get_name();
row.insertCell().innerText = project.get_description();
row.insertCell().innerText = project.get_startDate();
row.insertCell().innerText = project.get_id();
}
// Initialize button properties.
$get("btnSend").onclick = function () { ChangeProject(); };
$get("btnSend").innerText = "Update";
}
// Change the project's start date.
function ChangeProject() {
// Get the identifier of the target project.
var targetGuid = $get("txtGuid").innerText;
// Get the target project and then check it out. The checkOut function
// returns the draft version of the project.
var project = projects.getById(targetGuid);
var draftProject = project.checkOut();
// Set the new property value and then publish the project.
// Specify "true" to also check the project in.
draftProject.set_startDate("2013-12-31 09:00:00.000");
var publishJob = draftProject.publish(true);
// Register the job that you want to run on the server and specify the
// timeout duration and callback function.
projContext.waitForQueueAsync(publishJob, 10, QueueJobSent);
}
// Print the JobState return code, which gives the status of the queue job.
function QueueJobSent(response) {
$get("spanMessage").innerText = 'JobState = ' + response + '. Wait a few seconds, then refresh the page to see your changes.';
}
function QueryFailed(sender, args) {
$get("spanMessage").innerText = 'Request failed: ' + args.get_message();
}
Löschen von Project Server 2013-Projekten mithilfe des JavaScript-Objektmodells
Die Prozedur in diesem Abschnitt löscht ein Projekt mithilfe des JavaScript-Objektmodells. Das Verfahren umfasst die folgenden allgemeinen Schritte:
Rufen Sie die aktuelle ProjectContext-instance ab.
Rufen Sie die veröffentlichten Projekte mithilfe der funktion ProjectContext.get_projects vom Server ab. Die get_projects-Funktion gibt ein ProjectCollection-Objekt zurück.
Führen Sie die Anforderung auf dem Server mithilfe der ProjectContext.load-Funktion und der ProjectContext.executeQueryAsync-Funktion aus.
Rufen Sie ein PublishedProject-Objekt mithilfe der ProjectCollection.getById-Funktion ab.
Löschen Sie das Projekt, indem Sie es an die ProjectCollection.remove-Funktion übergeben.
Aktualisieren Sie die Auflistung mithilfe der ProjectCollection.update-Funktion und der ProjectContext.waitForQueueAsync-Funktion . Die Update-Funktion gibt ein QueueJob-Objekt zurück, das Sie an waitForQueueAsync übergeben.
Fügen Sie den folgenden Code zwischen den Skripttags ein, die Sie in der Prozedur So erstellen Sie die Anwendung in Visual Studio hinzugefügt haben.
// Declare global variables.
var projContext;
var projects;
// Ensure that the PS.js file is loaded before your custom code runs.
SP.SOD.executeOrDelayUntilScriptLoaded(GetProjects, "PS.js");
// Get the projects collection.
function GetProjects() {
// Initialize the current client context.
projContext = PS.ProjectContext.get_current();
// Get the projects collection.
projects = projContext.get_projects();
// Register the request for information that you want to run on the server.
// This call includes an optional "Include" parameter to request only the Name, Description,
// StartDate, and Id properties of the projects in the collection.
projContext.load(projects, 'Include(Name, Description, StartDate, Id)');
// Run the request on the server.
projContext.executeQueryAsync(IterateThroughProjects, QueryFailed);
}
// Iterate through the projects collection.
function IterateThroughProjects(response) {
// Get the enumerator and iterate through the collection.
var enumerator = projects.getEnumerator();
while (enumerator.moveNext()) {
var project = enumerator.get_current();
// Create and populate a row with the values for the project's Name, Description,
// StartDate, and Id properties.
var row = tblProjects.insertRow();
row.insertCell().innerText = project.get_name();
row.insertCell().innerText = project.get_description();
row.insertCell().innerText = project.get_startDate();
row.insertCell().innerText = project.get_id();
}
// Initialize button properties.
$get("btnSend").onclick = function () { DeleteProject(); };
$get("btnSend").innerText = "Delete";
}
// Delete the project.
function DeleteProject() {
// Get the identifier of the target project.
var targetGuid = $get("txtGuid").innerText;
// Get the target project and then remove it from the collection.
var project = projects.getById(targetGuid);
projects.remove(project);
var removeJob = projects.update();
// Register the job that you want to run on the server and specify the
// timeout duration and callback function.
projContext.waitForQueueAsync(removeJob, 10, QueueJobSent);
}
// Print the JobState return code, which gives the status of the queue job.
function QueueJobSent(response) {
$get("spanMessage").innerText = 'JobState = ' + response + '. Wait a few seconds, then refresh the page to see your changes.';
}
function QueryFailed(sender, args) {
$get("spanMessage").innerText = 'Request failed: ' + args.get_message();
}