Начало работы с объектной моделью JavaScript для Project Server 2013

  • Статья

В Project Server 2013 объектную модель JavaScript можно использовать в Project Online, мобильной и локальной разработке. В этом разделе представлен краткий обзор объектной модели JavaScript, а затем описывается создание страницы приложения, которая извлекает и выполняет итерацию по проектам с помощью объектной модели JavaScript.

Использование объектной модели JavaScript для Project Server

Использование объектной модели JavaScript — отличный способ создания приложения, которое выполняется на стороне клиента (в отличие от управляемого клиентского кода, который должен выполняться удаленно). Приложения могут использовать объектную модель JavaScript для получения или изменения объектов путем отправки асинхронных вызовов на сервер. Приложения, использующие объектную модель JavaScript, обычно развертываются как пользовательские надстройки SharePoint, страницы приложений и веб-части. Дополнительные сведения см. в разделе "Типы компонентов SharePoint, которые могут быть в приложении для SharePoint" статьи Хост-сайты, веб-сайты надстроек и компоненты SharePoint в SharePoint 2013.

Объектная модель JavaScript реализует функциональность main Project Server 2013, но объектная модель JavaScript и серверная объектная модель не имеют четности "один к одному". Точка входа в объектную модель JavaScript — это объект ProjectContext , который представляет контекст клиента для Project Server 2013 и предоставляет доступ к содержимому и функциям сервера. Объектная модель JavaScript для Project Server 2013 определена в файле PS.js, который находится в пути %ProgramFiles%\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\LAYOUTS по умолчанию на сервере приложений. Project Server 2013 также устанавливает файл PS.Debug.js в том же расположении. PS.Debug.js — это неоценимая версия PS.js, которая предоставляет сведения о IntelliSense.

Объектная модель JavaScript разрешает проверку подлинности с помощью форм, и все запросы проходят проверку подлинности от имени текущего пользователя. Дополнительные сведения о безопасности и других рекомендациях по проектированию пользовательских приложений и решений см . в разделах Проверка подлинности, авторизация и безопасность в SharePoint 2013, Важные аспекты архитектуры и разработки надстроек SharePoint, а также Надстройки SharePoint по сравнению с решениями SharePoint.

Примечание.

Для удаленного доступа к данным с сайта SharePoint SharePoint 2013 предоставляет междоменной библиотеке, которая позволяет выполнять междоменные вызовы на стороне клиента. Дополнительные сведения см. в статье Доступ к данным SharePoint 2013 из надстроек с помощью междоменной библиотеки.

Многие понятия и процессы использования объектной модели JavaScript для Project Server 2013 похожи на концепции и процессы в связанных клиентских объектных моделях. Дополнительные сведения об управляемой клиентской объектной модели Project Server 2013 см. в статье Microsoft.ProjectServer.Client. Дополнительные сведения о объектной модели SharePoint 2013JavaScript и управляемой клиентской объектной модели см. в разделах Завершение базовых операций с помощью кода библиотеки JavaScript в SharePoint 2013 и Завершение базовых операций с помощью кода клиентской библиотеки SharePoint 2013.

Пошаговое руководство. Создание страницы приложения, которая извлекает и выполняет итерацию по проектам

Узнайте, как создать страницу приложения, отображающую идентификатор, имя и дату создания каждого опубликованного проекта на сайте.

Предварительные требования для создания страницы приложения, которая извлекает и выполняет итерацию по проектам

Чтобы разработать страницу приложения, описанную в этом разделе, необходимо установить и настроить следующие продукты:

  • SharePoint Server 2013
  • Project Server 2013 с по крайней мере одним опубликованным проектом
  • Visual Studio 2012
  • Инструменты разработчика Office для Visual Studio 2012

Кроме того, необходимо иметь разрешения на развертывание расширения в 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. В Обозреватель решений измените значение свойства URL-адрес сайта для проекта ProjectsJSOM в соответствии с URL-адресом экземпляра Project Web App (например, https://ServerName/PWA).

  4. Откройте контекстное меню для проекта GetProjectsJSOM и добавьте сопоставленную папку SharePoint Layouts.

  5. В папке Макеты откройте контекстное меню для папки GetProjectsJSOM , а затем добавьте новую страницу приложения SharePoint с именем ProjectsList.aspx.

    Примечание.

    В этом примере не используется файл кода программной части, создаваемый Visual Studio 2012 для страницы приложения.

  6. Откройте контекстное меню для страницы ProjectsList.aspx и выберите Задать в качестве элемента запуска.

  7. В разметке для страницы ProjectsList.aspx определите таблицу и заполнитель сообщения в тегах asp:Content "Main" следующим образом.

    <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 добавьте тег SharePoint:ScriptLink , который ссылается на файл PS.js, как показано ниже.

     <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 перед вызовом функции 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>

См. также