Introdução ao modelo de objeto do JavaScript do Project Server 2013

Artigo
04/04/2023

No Project Server 2013, o modelo de objeto do JavaScript pode ser usado no Project Online para desenvolvimento móvel e local. Este tópico fornece uma visão geral breve do modelo de objeto JavaScript e descreve como criar uma página de aplicativo que recupera e itera por meio de projetos usando o modelo de objeto do JavaScript.

Usar o modelo de objeto do JavaScript do Project Server

Usar o modelo de objeto do JavaScript é uma ótima maneira de criar um aplicativo executado no lado do cliente (ao invés do código de cliente gerenciado, que precisa ser executado remotamente). Os aplicativos podem usar o modelo de objeto do JavaScript para recuperar ou alterar objetos enviando chamadas assíncronas ao servidor. Os aplicativos que usam o modelo de objeto do JavaScript normalmente são implantados como suplementos do SharePoint, páginas de aplicativo e Web Parts personalizadas. Para saber mais, consulte "Tipos de componentes do SharePoint que podem estar em um aplicativo do SharePoint" em Sites de host, sites de suplemento e componentes do SharePoint no SharePoint 2013.

O modelo de objeto do JavaScript implementa a funcionalidade principal do Project Server 2013, mas o modelo de objeto do JavaScript e o modelo de objeto do servidor não têm paridade um para um. O ponto de entrada para o modelo de objeto do JavaScript é o objeto ProjectContext, que representa o contexto de cliente do Project Server 2013 e fornece acesso ao conteúdo e à funcionalidade do servidor. O modelo de objeto JavaScript para Project Server 2013 é definido no arquivo PS.js, que está localizado no caminho %ProgramFiles%\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\LAYOUTS padrão no servidor de aplicativo. O Project Server 2013 também instala o arquivo PS.Debug.js no mesmo local. O PS.Debug.js é uma versão não reduzida do PS.js que fornece informações do IntelliSense.

O modelo de objeto do JavaScript permite a autenticação de Formulários e todas as solicitações são autenticadas de acordo com o usuário atual. Para saber mais sobre segurança e outras considerações ao criar soluções e aplicativos personalizados, consulte Autenticação, autorização e segurança no SharePoint 2013, Aspectos importantes do cenário de desenvolvimento e arquitetura dos suplementos do SharePoint e Suplementos do SharePoint em comparação a soluções do SharePoint.

Observação

Para acessar remotamente os dados de um site do SharePoint, o SharePoint 2013 oferece uma biblioteca de domínio cruzado que permite fazer chamadas de domínio cruzado no lado do cliente. Para saber mais, consulte Acessar dados do SharePoint 2013 a partir de suplementos usando a biblioteca de domínio cruzado.

Muitos conceitos e processos para usar o modelo de objeto do JavaScript para o Project Server 2013 se parecem com diferentes modelos de objetos de cliente relacionados. Para saber mais sobre o modelo de objeto de cliente gerenciado do Project Server 2013, consulte Microsoft.ProjectServer.Client. Para saber mais sobre o modelo de objeto do JavaScript e o modelo de objeto de cliente gerenciado do SharePoint 2013, consulte Concluir operações básicas usando código da biblioteca JavaScript no SharePoint 2013, e Realizar operações básicas usando o código de biblioteca do cliente no SharePoint 2013.

Passo a passo: criar uma página de aplicativo que recupera e itera por projetos

Saiba como criar uma página do aplicativo que exibe a ID, o nome e a data de criação de cada projeto publicado em um site.

Pré-requisitos para criar uma página de aplicativo que recupera e itera por projetos

Para desenvolver a página de aplicativo descrita neste tópico, instale e configure os seguintes produtos:

SharePoint Server 2013
Project Server 2013 com pelo menos um projeto publicado
Visual Studio 2012
Office Developer Tools para Visual Studio 2012

Você também deve ter permissões para implantar a extensão do SharePoint Server 2013 e para recuperar projetos.

Observação

Essas instruções pressupõem que você esteja desenvolvendo em um computador que executa o Project Server 2013.

Criar a página de aplicativo no Visual Studio 2012

As etapas a seguir criam um projeto do SharePoint e uma página de aplicativo que contém uma tabela e um rótulo. A tabela exibe informações sobre projetos e o rótulo exibe mensagens de erro.

No computador que executa o Project Server 2013, execute o Visual Studio 2012 como administrador.
Crie um projeto vazio do SharePoint 2013 da seguinte maneira:
1. Na caixa de diálogo Novo Projeto, escolha .NET Framework 4.5 na lista suspensa na parte superior da caixa de diálogo.
2. Na lista de categorias de modelos, escolha a categoria Office SharePoint e o modelo Projeto do SharePoint 2013.
3. Nomeie o projeto como GetProjectsJSOM e escolha o botão OK.
4. Na caixa de diálogo Assistente de Personalização do SharePoint, selecione Implantar como uma solução de farm e, em seguida, escolha o botão OK.
Em Gerenciador de Soluções, edite o valor da propriedade URL do Site para o projeto ProjectsJSOM para corresponder à URL da instância do Project Web App (por exemplo, https://ServerName/PWA).
Abra o menu de atalho do projeto GetProjectsJSOM e, em seguida, adicione a pasta mapeada "Layouts" do SharePoint.
Na pasta Layouts, abra o menu de atalho da pasta GetProjectsJSOM e, em seguida, adicione uma nova página de aplicativo do SharePoint denominada ProjectsList.aspx.

Observação

Este exemplo não usa o arquivo code-behind que o Visual Studio 2012 cria para a página do aplicativo.
Abra o menu de atalho da página ProjectsList.aspx e escolha Definir como item de inicialização.

Na marcação da página ProjectsList.aspx, defina uma tabela e um espaço reservado de mensagem dentro das marcas "Main" asp:Content, como a seguir.

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

Recuperar a coleção de projetos

As etapas a seguir recuperam e inicializam a coleção de projetos.

Após o encerramento da marca div, adicione uma marca SharePoint:ScriptLink que faz referência ao arquivo PS.js, como a seguir.
```
 <SharePoint:ScriptLink name="PS.js" runat="server" ondemand="false" localizable="false" loadafterui="true" />
```

Abaixo da marca SharePoint:ScriptLink, adicione a marca script, como a seguir.

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

Informe uma variável global para armazenar a coleção de projetos, da maneira a seguir.
```
var projects;
```
Chame o método SP.SOD.executeOrDelayUntilScriptLoaded para garantir que o arquivo PS.js esteja carregado antes de executar o código personalizado.
```
SP.SOD.executeOrDelayUntilScriptLoaded(GetProjects, "PS.js");
```
Adicione uma função que conecta-se ao contexto atual e recupera a coleção de projetos, como a seguir.
```
 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);
 }
```
Alguns objetos de clientes, que você recupera pelo contexto, não contêm dados até serem iniciados; ou seja, não é possível acessar valores de propriedades do objeto até que o objeto seja iniciado. Além disso, para as propriedades do tipo ValueObject, é necessário solicitar explicitamente a propriedade antes de poder acessar o valor. (Se você tentar acessar uma propriedade antes que seja iniciada, verá a exceção PropertyOrFieldNotInitializedException.)

Para iniciar um objeto, chame o método load (ou loadQuery) e, depois, o método executeQueryAsync.
- Chamar as funções load ou loadQuery registra uma solicitação de que você deseja executar no servidor. Passe um parâmetro que representa o objeto que você deseja recuperar. Se você estiver trabalhando com uma propriedade ValueObject, então também deve solicitar a propriedade do parâmetro.
- Chamar a função executeQueryAsync envia a solicitação de consulta ao servidor de forma assíncrona. Passe uma função de retorno de chamada bem-sucedida e outra com falha a fim de analisar quando a resposta do servidor é recebida.
Para reduzir o tráfego de rede, solicite somente as propriedades que você deseja usar chamando a função load. Além disso, se estiver trabalhando com vários objetos, agrupe as várias chamadas para a função load antes de chamar a função executeQueryAsync quando possível.

Iterar pela coleção de projetos

As etapas a seguir iteram pela coleção de projetos (se a chamada do servidor for bem-sucedida) ou renderizam uma mensagem de erro (se a chamada falhar).

Adicione uma função de retorno de chamada bem-sucedida que itera pela coleção de projetos, como a seguir.

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

Adicione uma função de retorno de chamada com falha que processa uma mensagem de erro, como a seguir.

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

Para testar a página de aplicativo, na barra de menus, escolha Depurar, Iniciar Depuração. Se for solicitado a modificar as configurações, escolha OK.

Exemplo de código completo

A seguir apresentamos o código completo do arquivo 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>