Comenzar con el modelo de objetos de JavaScript de Project Server 2013

Artículo
04/04/2023

En Project Server 2013, el modelo de objetos de JavaScript se puede usar en el desarrollo Project Online, móvil y local. En este tema se proporciona una breve introducción al modelo de objetos de JavaScript y, a continuación, se describe cómo crear una página de aplicación que recupera e itera a través de proyectos mediante el modelo de objetos de JavaScript.

Uso del modelo de objetos de JavaScript de Project Server

El uso del modelo de objetos de JavaScript es una excelente manera de crear una aplicación que ejecute el lado cliente (en lugar de código de cliente administrado que necesita ejecutarse de forma remota). Las aplicaciones pueden usar el modelo de objetos de JavaScript para recuperar o cambiar objetos mediante el envío de llamadas asincrónicas al servidor. Las aplicaciones que usan el modelo de objetos de JavaScript se implementan normalmente como complementos de SharePoint personalizados, páginas de aplicación y elementos web. Para obtener más información, vea "Tipos de componentes de SharePoint que pueden estar en una aplicación para SharePoint" en webs host, webs de complemento y componentes de SharePoint en SharePoint 2013.

El modelo de objetos de JavaScript implementa la funcionalidad principal de Project Server 2013, pero el modelo de objetos de JavaScript y el modelo de objetos de servidor no tienen paridad uno a uno. El punto de entrada al modelo de objetos de JavaScript es el objeto ProjectContext , que representa el contexto de cliente de Project Server 2013 y proporciona acceso al contenido y la funcionalidad del servidor. El modelo de objetos de JavaScript para Project Server 2013 se define en el archivo PS.js, que se encuentra en la ruta de acceso %ProgramFiles%\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\LAYOUTS predeterminada del servidor de aplicaciones. Project Server 2013 también instala el archivo PS.Debug.js en la misma ubicación. PS.Debug.js es una versión no reducida de PS.js que proporciona información de IntelliSense.

El modelo de objetos de JavaScript permite la autenticación de formularios y todas las solicitudes se autentican como el usuario actual. Para obtener más información sobre la seguridad y otras consideraciones para diseñar aplicaciones y soluciones personalizadas, vea Autenticación, autorización y seguridad en SharePoint 2013, Aspectos importantes de la arquitectura y el entorno de desarrollo de complementos de SharePoint y Complementos de SharePoint en comparación con las soluciones de SharePoint.

Nota:

Para acceder a datos desde un sitio de SharePoint de forma remota, SharePoint 2013 proporciona una biblioteca entre dominios que le permite realizar llamadas entre dominios del lado cliente. Para obtener más información, vea Access SharePoint 2013 data from add-ins using the cross-domain library.

Muchos conceptos y procesos para usar el modelo de objetos de JavaScript para Project Server 2013 son similares a los de los modelos de objetos de cliente relacionados. Para obtener más información sobre el modelo de objetos de cliente administrado de Project Server 2013, vea Microsoft.ProjectServer.Client. Para obtener más información sobre el modelo de objetos de SharePoint 2013JavaScript y el modelo de objetos de cliente administrado, vea Complete basic operations using JavaScript library code in SharePoint 2013 and Complete basic operations using SharePoint 2013 client library code (Completar operaciones básicas con código de biblioteca cliente de SharePoint 2013).

Tutorial: creación de una página de aplicación que recupera e itera a través de proyectos

Aprenda a crear una página de aplicación que muestra el Id., el nombre y la fecha de creación de cada proyecto publicado en un sitio.

Requisitos previos para crear una página de aplicación que recupera e itera a través de proyectos

Para desarrollar la página de aplicación que se describe en este tema, debe instalar y configurar los siguientes productos:

SharePoint Server 2013
Project Server 2013 con al menos un proyecto publicado
Visual Studio 2012
Office Developer Tools para Visual Studio 2012

También debe tener permisos para implementar la extensión en SharePoint Server 2013 y recuperar proyectos.

Nota:

En estas instrucciones se supone que está desarrollando en el equipo que ejecuta Project Server 2013.

Creación de la página de la aplicación en Visual Studio 2012

Los siguientes pasos crean un proyecto de SharePoint y una página de aplicación que contiene una tabla y una etiqueta. La tabla muestra información sobre los proyectos y la etiqueta muestra mensajes de error.

En el equipo que ejecuta Project Server 2013, ejecute Visual Studio 2012 como administrador.
Cree un proyecto de SharePoint 2013 vacío, como se indica a continuación:
1. En el cuadro de diálogo Nuevo proyecto, seleccione .NET Framework 4.5 en la lista desplegable situada en la parte superior del cuadro de diálogo.
2. En la lista de categorías de plantilla, elija la categoría SharePoint de Office y, a continuación, elija la plantilla SharePoint 2013 Project.
3. Asigne al proyecto el nombre GetProjectsJSOM y, a continuación, elija el botón Aceptar .
4. En el cuadro de diálogo Asistente para la personalización de SharePoint, elija Implementar como solución de granja y, a continuación, elija el botón Finalizar.
En Explorador de soluciones, edite el valor de la propiedad Url del sitio del proyecto ProjectsJSOM para que coincida con la dirección URL de la instancia de Project Web App (por ejemplo, https://ServerName/PWA).
Abra el menú abreviado del proyecto GetProjectsJSOM y, a continuación, agregue una carpeta asignada "Diseños" de SharePoint.
En la carpeta Diseños , abra el menú contextual de la carpeta GetProjectsJSOM y agregue una nueva página de aplicación de SharePoint denominada ProjectsList.aspx.

Nota:

En este ejemplo no se usa el archivo de código subyacente que Visual Studio 2012 crea para la página de la aplicación.
Abra el menú abreviado de la página ProjectsList.aspx y elija Definir como elemento de inicio.

En el fragmento de la página ProjectsList.aspx, defina una tabla y un marcador de posición de mensaje dentro de las etiquetas de asp:Content "principales", de la manera siguiente.

<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 la colección de proyectos

Lo siguientes pasos recuperan e inicializan la colección de proyectos.

Después de la etiqueta de cierre div, agregue una etiqueta SharePoint:ScriptLink que haga referencia al archivo PS.js, de la siguiente manera.
```
 <SharePoint:ScriptLink name="PS.js" runat="server" ondemand="false" localizable="false" loadafterui="true" />
```

Debajo de la etiqueta SharePoint:ScriptLink, agregue las etiquetas de script, de la siguiente manera.

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

Declare una variable global para almacenar la colección de proyectos, de la siguiente manera.
```
var projects;
```
Llame al método de SP.SOD.executeOrDelayUntilScriptLoaded para asegurarse de que el archivo PS.js se carga antes de que se ejecute su código personalizado.
```
SP.SOD.executeOrDelayUntilScriptLoaded(GetProjects, "PS.js");
```
Agregue una función que conecte con el contexto actual y recupere la colección de proyectos, de la siguiente manera.
```
 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);
 }
```
Algunos objetos de cliente que recupera a través del contexto no contienen ningún dato hasta que se hayan inicializado; es decir, no puede obtener acceso a los valores de propiedad del objeto hasta que el objeto se inicialice. Asimismo, para las propiedades de tipo ValueObject, debe solicitar explícitamente la propiedad antes de poder obtener acceso a su valor. (Si intenta acceder a una propiedad antes de inicializarla, recibirá una excepción PropertyOrFieldNotInitializedException ).

Para inicializar un objeto, llame al método de load (o el método de loadQuery) y, a continuación, al método de executeQueryAsync.
- Al llamar la función load o la función loadQuery se registra una solicitud de que se desea ejecutar en el servidor. Ingresa un parámetro que representa el objeto que desea recuperar. Si está trabajando con una propiedad de ValueObject, entonces también solicita la propiedad en el parámetro.
- Al llamar la función executeQueryAsync se envía la solicitud de consulta al servidor de manera asincrónica. Ingresa una función de devolución de llamada satisfactoria y una función de devolución de llamada insatisfactoria para invocar cuándo se recibe la respuesta del servidor.
Para reducir el tráfico de red, solicite solamente las propiedades con las que desee trabajar cuando llame la función load. Además, si está trabajando con varios objetos, agrupe varias llamadas en la función load antes de llamar la función executeQueryAsync cuando sea posible.

Iterar a través de la colección de proyectos

Los siguientes pasos iteran a través de la colección de proyectos (si la llamada del servidor es satisfactoria) o entregan un mensaje de error (si hay un error en la llamada).

Agregue una función de devolución de llamada satisfactoria que itere a través de la colección de proyectos, de la manera siguiente.

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

Agregue una función de devolución de llamada no satisfactoria que entregue un mensaje de error, de la siguiente manera.
```
function onQueryFailed(sender, args) {
    $get("spanMessage").innerText = 'Request failed: ' + args.get_message();
}
```
Para probar la página de aplicación, en la barra de menú, elija Depurar, Iniciar depuración. Si se le solicita modificar el archivo web.config, elija Aceptar.

Ejemplo de código completo

A continuación se muestra el código completo del archivo 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>

Compartir a través de