使用 Project Server JavaScript 建立、擷取、更新和刪除專案

發行項
03/18/2024

本文中的案例示範如何取得目前的 ProjectContext 實 例;擷取並逐一查看伺服器上已發佈的專案集合;使用 Project Server JavaScript 物件模型建立、擷取、取出和刪除專案;和變更項目的屬性。

注意事項

這些案例會在 SharePoint 應用程式頁面的標記中定義自定義程式代碼，但不會使用 Visual Studio 2012 為頁面建立的程式代碼後置檔案。

在 JavaScript 物件模型中使用 Project Server 2013 專案的必要條件

若要執行本文所述的案例，您必須安裝並設定下列產品：

SharePoint Server 2013
Project Server 2013
Visual Studio 2012
Visual Studio 2012 Office 開發人員工具

您也必須擁有將擴充功能部署至 SharePoint Server 2013 以及參與項目的許可權。

注意事項

這些指示假設您是在執行 Project Server 2013 的電腦上進行開發。

建立 Visual Studio 解決方案

下列步驟會建立包含 SharePoint 專案和應用程式頁面的 Visual Studio 2012 方案。此頁面包含使用項目的邏輯。

在 Visual Studio 中建立 SharePoint 專案

在執行 Project Server 2013 的電腦上，以系統管理員身分執行 Visual Studio 2012。
在功能表欄上，選擇 [ 檔案]、[ 新增]、[ 專案]。
在 [新增專案] 對話框中，從對話框頂端的下拉式清單中選擇 [.NET Framework 4.5]。
在 [Office/SharePoint 範本] 類別中，選擇 [SharePoint 方案]，然後選擇 [SharePoint 2013 專案 ] 範本。
將專案命名為 ProjectsJSOM，然後選擇 [ 確定] 按鈕。
在 [ SharePoint 自定義精靈 ] 對話方塊中，選擇 [ 部署為伺服器數位解決方案]，然後選擇 [ 完成] 按鈕。
編輯 ProjectsJSOM 專案的 [網站 URL] 屬性值，以符合 Project Web App 實例的 URL (例如 https://ServerName/PWA ，) 。

在 Visual Studio 中建立應用程式頁面

在 方案總管 中，開啟 ProjectsJSOM 專案的快捷方式功能表，然後新增 SharePoint [版面配置] 對應資料夾。
在 [ 版面配置] 資料夾中，開啟 ProjectsJSOM 資料夾的快捷方式功能表，然後新增名為 ProjectsList.aspx 的新 SharePoint 應用程式頁面。
開啟 [ ProjectsList.aspx ] 頁面的快捷方式功能表，然後選擇 [設定為啟動專案]。

在 [ ProjectsList.aspx ] 頁面的標記中，定義 “Main” asp：Content 標記內的使用者介面控件，如下所示。

 <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>

注意事項

這些控制件可能無法在每個案例中使用。例如，「建立專案」案例不會使用 textarea 和按鈕控件。

在結尾範圍卷標之後，新增 SharePoint：ScriptLink 標籤、 SharePoint：FormDigest 標記和腳本標籤，如下所示。
```
 <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>
```
SharePoint：ScriptLink 標籤會參考 PS.js 檔案，該檔案會定義 Project Server 2013 的 JavaScript 物件模型。 SharePoint：FormDigest 標籤會在更新伺服器內容的作業需要時，產生安全性驗證的訊息摘要。
將佔位元批註取代為下列其中一個程式的程式代碼：
若要測試應用程式頁面，請在功能表欄上選擇 [ 偵錯]、[ 開始偵錯]。如果系統提示您修改 web.config 檔案，請選擇 [ 確定]。

使用 JavaScript 物件模型建立 Project Server 2013 專案

本節中的程式會使用 JavaScript 物件模型建立專案。此程式包含下列高階步驟：

取得目前的 ProjectContext 實 例。
建立 ProjectCreationInformation 物件，以指定專案的初始屬性。使用 ProjectCreationInformation.set_name 函式指定必要的名稱屬性。
使用 ProjectContext.get_projects 函式，從伺服器擷取已發佈的專案。 get_projects函式會傳回 ProjectCollection 物件。
使用 ProjectCollection.add 函式並傳入 ProjectCreationInformation 物件，將新專案新增至集合。
使用 ProjectCollection.update 函式和 ProjectContext.waitForQueueAsync 函式來更新集合。更新函式會傳回您傳遞給 waitForQueueAsync 的QueueJob 物件。此呼叫也會發佈專案。

在您於 Visual Studio 中建立應用程式頁面程式中新增的腳本標籤之間貼上下列程式代碼。

    // 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();
    }

使用 JavaScript 物件模型更新 Project Server 2013 專案

本節中的程式會使用 JavaScript 物件模型來更新專案的 startDate 屬性。此程式包含下列高階步驟：

取得目前的 ProjectContext 實 例。
使用 ProjectContext.get_projects 函式，從伺服器擷取已發佈的專案。 get_projects函式會傳回 ProjectCollection 物件。
使用 ProjectContext.load 函式和 ProjectContext.executeQueryAsync 函式，在伺服器上執行要求。
使用 ProjectContext.getById 函式擷取 PublishedProject 物件。
使用 Project.checkOut 函式來查看目標專案。 checkOut 函式會傳回已發行專案的草稿版本。
使用 DraftProject.set_startDate 函式來變更項目的開始日期。
使用 DraftProject.publish 函式和 ProjectContext.waitForQueueAsync 函式來發佈專案。 publish 函式會傳回您傳遞給 waitForQueueAsync 的 QueueJob 物件。

在您於 Visual Studio 中建立應用程式頁面程式中新增的腳本標籤之間貼上下列程式代碼。

    // 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();
    }

使用 JavaScript 物件模型刪除 Project Server 2013 專案

本節中的程式會使用 JavaScript 物件模型來刪除專案。此程式包含下列高階步驟：

取得目前的 ProjectContext 實 例。
使用 ProjectContext.get_projects 函式，從伺服器擷取已發佈的專案。 get_projects函式會傳回 ProjectCollection 物件。
使用 ProjectContext.load 函式和 ProjectContext.executeQueryAsync 函式，在伺服器上執行要求。
使用 ProjectCollection.getById 函式擷取 PublishedProject 物件。
將項目傳遞至 ProjectCollection.remove 函式，以刪除專案。
使用 ProjectCollection.update 函式和 ProjectContext.waitForQueueAsync 函式來更新集合。更新函式會傳回您傳遞給 waitForQueueAsync 的QueueJob 物件。

在您於 Visual Studio 中建立應用程式頁面程式中新增的腳本標籤之間貼上下列程式代碼。

    // 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();
    }

共用方式為

使用 Project Server JavaScript 建立、擷取、更新和刪除專案

在 JavaScript 物件模型中使用 Project Server 2013 專案的必要條件

建立 Visual Studio 解決方案

在 Visual Studio 中建立 SharePoint 專案

在 Visual Studio 中建立應用程式頁面

使用 JavaScript 物件模型建立 Project Server 2013 專案

使用 JavaScript 物件模型更新 Project Server 2013 專案

使用 JavaScript 物件模型刪除 Project Server 2013 專案

另請參閱

其他資源