共用方式為

開始使用 Project Server 2013 JavaScript 物件模型

  • 發行項

在 Project Server 2013 中，JavaScript 物件模型可用於 Project Online、行動和內部部署開發。 本主題提供 JavaScript 物件模型的簡短概觀，然後說明如何建立應用程式頁面，以使用 JavaScript 物件模型來擷取及逐一查看專案。

使用 Project Server JavaScript 物件模型

使用 JavaScript 物件模型是建立執行用戶端 (的應用程式的絕佳方式，而不是需要從遠端) 執行的受管理客戶端程式代碼。 應用程式可以藉由將異步呼叫傳送至伺服器，使用 JavaScript 物件模型來擷取或變更物件。 使用 JavaScript 物件模型的應用程式通常會部署為自定義 SharePoint 載入宏、應用程式頁面和網頁元件。 For more information, see "Types of SharePoint components that can be in an app for SharePoint" in Host webs, add-in webs, and SharePoint components in SharePoint 2013.

JavaScript 物件模型實作 Project Server 2013 的主要功能，但 JavaScript 物件模型和伺服器物件模型沒有一對一同位。 JavaScript 物件模型的進入點是 ProjectContext 物件，代表 Project Server 2013 的用戶端內容，並提供伺服器內容和功能的存取權。 Project Server 2013 的 JavaScript 物件模型定義於 PS.js 檔案中，該檔案位於應用程式伺服器的預設路徑 %ProgramFiles%\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\LAYOUTS 中。 Project Server 2013 也會在相同位置安裝 PS.Debug.js 檔案。 PS.Debug.js 是提供 IntelliSense 資訊的非 PS.js 版本。

JavaScript 物件模型允許窗體驗證，而且所有要求都會以目前的使用者身分進行驗證。 如需設計自定義應用程式和解決方案的安全性和其他考慮的詳細資訊，請參閱 SharePoint 2013 中的驗證、授權和安全性、 SharePoint 載入宏架構和開發環境的重要層面，以及 SharePoint 載入宏與 SharePoint 解決方案的比較。

注意事項

若要從遠端訪問 SharePoint 網站的數據，SharePoint 2013 提供跨網域連結庫，可讓您進行用戶端跨網域呼叫。 如需詳細資訊，請參閱 使用跨網域連結庫從載入宏存取 SharePoint 2013 數據。

許多針對 Project Server 2013 使用 JavaScript 物件模型的概念和程式，類似於相關客戶端物件模型中的概念和程式。 如需 Project Server 2013 受控客戶端物件模型的詳細資訊，請參閱 Microsoft.ProjectServer.Client。 如需 SharePoint 2013JavaScript 物件模型和受控客戶端物件模型的詳細資訊，請參閱 在 SharePoint 2013 中使用 JavaScript 連結庫程式代碼完成基本作業和使用 SharePoint 2013 用戶端連結 庫程式代碼完成基本作業。

逐步解說：建立可擷取並逐一查看專案的應用程式頁面

瞭解如何建立應用程式頁面，以顯示網站中每個已發佈專案的標識碼、名稱和建立日期。

建立可擷取並逐一查看專案的應用程式頁面的必要條件

若要開發本主題中所述的應用程式頁面，您必須安裝並設定下列產品：

  • SharePoint Server 2013
  • 具有至少一個已發佈專案的 Project Server 2013
  • Visual Studio 2012
  • Visual Studio 2012 Office 開發人員工具

您也必須擁有將延伸模組部署至 SharePoint Server 2013 及擷取項目的許可權。

注意事項

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

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

下列步驟會建立 SharePoint 專案，以及包含數據表和標籤的應用程式頁面。 數據表會顯示專案的相關信息，且標籤會顯示錯誤訊息。

  1. 在執行 Project Server 2013 的電腦上，以系統管理員身分執行 Visual Studio 2012。

  2. 建立空的 SharePoint 2013 專案，如下所示：

    1. 在 [新增專案] 對話框中，從對話框頂端的下拉式清單中選擇 [.NET Framework 4.5]。

    2. 在範本類別清單中，選擇 [Office SharePoint ] 類別，然後選擇 [SharePoint 2013 專案 ] 範本。

    3. 將專案命名為 GetProjectsJSOM，然後選擇 [ 確定] 按鈕。

    4. 在 [ SharePoint 自定義精靈 ] 對話方塊中，選擇 [ 部署為伺服器數位解決方案]，然後選擇 [ 確定] 按鈕。

  3. 在 方案總管 中，編輯 ProjectsJSOM 專案的 [網站 URL] 屬性值，以符合 Project Web App 實例的 URL (例如 https://ServerName/PWA ，) 。

  4. 開啟 GetProjectsJSOM 專案的快捷方式功能表，然後新增 SharePoint “Layouts” 對應資料夾。

  5. 在 [ 版面配置] 資料夾中，開啟 GetProjectsJSOM 資料夾的快捷方式功能表，然後新增名為 ProjectsList.aspx 的新 SharePoint 應用程式頁面。

    注意事項

    此範例不會使用 Visual Studio 2012 為應用程式頁面建立的程式代碼後置檔案。

  6. 開啟 [ ProjectsList.aspx ] 頁面的快捷方式功能表，然後選擇 [設定為啟動專案]。

  7. 在 [ProjectsList.aspx ] 頁面的標記中，定義 “Main” asp：Content 標記內的數據表和訊息佔位符，如下所示。

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

擷取專案集合

下列步驟會擷取並初始化專案集合。

  1. 在結尾 div 標記之後，新增參考 PS.js 檔案的 SharePoint：ScriptLink 標記，如下所示。

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

  2. 在 SharePoint：ScriptLink 標籤 ，新增 腳本 標記，如下所示。

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

  3. 宣告全域變數以儲存專案集合，如下所示。

    var projects;

  4. 呼叫 SP。SOD.executeOrDelayUntilScriptLoaded 方法可確保在自定義程式碼執行之前載入 PS.js 檔案。

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

  5. 新增連接到目前內容並擷取專案集合的函式，如下所示。

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

    您透過內容擷取的某些客戶端物件在初始化之前不會包含任何數據;也就是說，在初始化 物件之前，您無法存取 物件的屬性值。 此外，對於 ValueObject 類型的屬性，您必須明確要求 屬性，才能存取其值。 (如果您嘗試在初始化之前存取屬性，您會收到 PropertyOrFieldNotInitializedException 例外狀況.)

    若要初始化 物件，您可以呼叫 load 方法 (或 loadQuery 方法) ，然後呼叫 executeQueryAsync 方法。

    • 呼叫 load 函式或 loadQuery 函式會註冊您想要在伺服器上執行的要求。 您傳入的參數代表您想要擷取的物件。 如果您使用 ValueObject 屬性，則您也會在 參數中要求 屬性。

    • 呼叫 executeQueryAsync 函式會以異步方式將查詢要求傳送至伺服器。 您會傳入成功回調函式和失敗回調函式，以便在收到伺服器回應時叫用。

    若要減少網路流量，請在呼叫 load 函式時，只要求您想要使用的屬性。 此外，如果您使用多個物件，請在可能時，先將 load 函式的多個呼叫分組在一起，然後再呼叫 executeQueryAsync 函式。

逐一查看專案集合

下列步驟會逐一查看專案集合 (伺服器呼叫是否成功) 或在呼叫失敗時轉譯錯誤訊息 () 。

  1. 新增可逐一查看專案集合的成功回調函式，如下所示。

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

  2. 新增轉譯錯誤訊息的失敗回調函式，如下所示。

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

  3. 若要測試應用程式頁面，請在功能表欄上選擇 [ 偵錯]、[ 開始偵錯]。 如果系統提示您修改 web.config 檔案，請選擇 [ 確定]。

完整程式代碼範例

以下是來自 ProjectsList.aspx 檔案的完整程序代碼。

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

另請參閱