Comenzar con el modelo de objetos de JavaScript de Project Server 2013Getting started with the Project Server 2013 JavaScript object model

En Project Server 2013, el modelo de objetos de JavaScript se puede usar en proyectos de Project online, móviles y en desarrollo local.In Project Server 2013, the JavaScript object model can be used in Project Online, mobile, and on-premise development. 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.This topic provides a brief overview of the JavaScript object model and then describes how to create an application page that retrieves and iterates through projects by using the JavaScript object model.

Uso del modelo de objetos de JavaScript de Project ServerUsing the Project Server JavaScript object model

Usar el modelo de objetos de JavaScript es una excelente manera de crear una aplicación que se ejecuta en el lado cliente (frente al código de cliente administrado que debe ejecutarse de forma remota).Using the JavaScript object model is a great way to create an app that runs client-side (as opposed to managed client code which needs to run remotely). 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.Apps can use the JavaScript object model to retrieve or change objects by sending asynchronous calls to the server. Las aplicaciones que usan el modelo de objetos de JavaScript se suelen implementar como complementos de SharePoint, páginas de aplicación y elementos Web personalizados.Apps that use the JavaScript object model are typically deployed as custom SharePoint Add-ins, application pages, and Web Parts. Para obtener más información, vea "tipos de componentes de SharePoint que pueden estar en una aplicación para SharePoint" en webs de host, webs de complemento y componentes de SharePoint en sharepoint 2013.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.

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.The JavaScript object model implements the main functionality of Project Server 2013, but the JavaScript object model and the server object model do not have one-to-one parity. 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 a la funcionalidad del servidor.The entry point to the JavaScript object model is the ProjectContext object, which represents the client context for Project Server 2013 and provides access to server content and functionality. El modelo de objetos de JavaScript para Project Server 2013 se define en el archivo PS. js, que se encuentra en la %ProgramFiles%\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\LAYOUTS ruta de acceso predeterminada en el servidor de aplicaciones.The JavaScript object model for Project Server 2013 is defined in the PS.js file, which is located in the default path %ProgramFiles%\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\LAYOUTS on the application server. Project Server 2013 también instala el PS. Archivo debug. js en la misma ubicación.Project Server 2013 also installs the PS.Debug.js file in the same location. PS.Debug.js es una versión no reducida de PS.js que proporciona información de IntelliSense.PS.Debug.js is an unminified version of PS.js that provides IntelliSense information.

El modelo de objetos de JavaScript permite la autenticación de formularios y todas las solicitudes se autentican como el usuario actual.The JavaScript object model allows Forms authentication, and all requests are authenticated as the current user. Para obtener más información sobre seguridad y otras consideraciones sobre el diseño de aplicaciones y soluciones personalizadas, vea autenticación, autorización y seguridad en SharePoint 2013, aspectos importantes de la arquitectura y el desarrollo de complementos de SharePoint horizontaly complementos de SharePoint en comparación con las soluciones de SharePoint.For more information about security and other considerations for designing custom apps and solutions, see Authentication, authorization, and security in SharePoint 2013, Important aspects of the SharePoint Add-in architecture and development landscape, and SharePoint Add-ins compared with SharePoint solutions.

Nota

Para obtener acceso a los datos de un sitio de SharePoint de forma remota, SharePoint 2013 proporciona una biblioteca entre dominios que permite realizar llamadas entre dominios del lado cliente.To access data from a SharePoint site remotely, SharePoint 2013 provides a cross-domain library that enables you to make client-side cross-domain calls. Para obtener más información, vea acceso a datos de SharePoint 2013 desde complementos con la biblioteca entre dominios.For more information, see 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.Many concepts and processes for using the JavaScript object model for Project Server 2013 resemble those in related client object models. Para obtener más información sobre el modelo de objetos de cliente administrado de Project Server 2013, vea Microsoft. ProjectServer. Client.For more information about the Project Server 2013 managed client object model, see 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 completar operaciones básicas con código de biblioteca de JavaScript en SharePoint 2013 y completar operaciones básicas con el cliente de SharePoint 2013 código de biblioteca.For more information about the SharePoint 2013JavaScript object model and managed client object model, see Complete basic operations using JavaScript library code in SharePoint 2013 and Complete basic operations using SharePoint 2013 client library code.

Tutorial: creación de una página de aplicación que recupera e itera a través de proyectosWalkthrough: Creating an application page that retrieves and iterates through projects

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.Learn how to create an application page that displays the ID, name, and created date of each published project in a site.

Requisitos previos para crear una página de aplicación que recupera e itera a través de proyectosPrerequisites for creating an application page that retrieves and iterates through projects

Para desarrollar la página de aplicación que se describe en este tema, debe instalar y configurar los siguientes productos:To develop the application page that is described in this topic, you must install and configure the following products:

  • SharePoint Server 2013SharePoint Server 2013
  • Project Server 2013 con al menos un proyecto publicadoProject Server 2013 with at least one published project
  • Visual Studio 2012Visual Studio 2012
  • Office Developer Tools para Visual Studio 2012Office Developer Tools for Visual Studio 2012

También debe tener permisos para implementar la extensión en SharePoint Server 2013 y para recuperar proyectos.You must also have permissions to deploy the extension to SharePoint Server 2013 and to retrieve projects.

Nota

En estas instrucciones se da por supuesto que está desarrollando en el equipo que ejecuta Project Server 2013.These instructions assume that you are developing on the computer that is running Project Server 2013.

Creación de la página de aplicación en Visual Studio 2012Creating the application page in 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.The following steps create a SharePoint project and an application page that contains a table and label. The table displays information about the projects and the label displays error messages.

  1. En el equipo que ejecuta Project Server 2013, ejecute Visual Studio 2012 como administrador.On the computer that is running Project Server 2013, run Visual Studio 2012 as an administrator.

  2. Cree un proyecto de SharePoint 2013 vacío, como se indica a continuación:Create an empty SharePoint 2013 project, as follows:

    1. En el cuadro de diálogo Nuevo proyecto, elija .NET Framework 4.5 de la lista desplegable en la parte superior del cuadro de diálogo.In the New Project dialog box, choose .NET Framework 4.5 from the drop-down list at the top of the dialog box.

    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.In the list of template categories, choose the Office SharePoint category, and then choose the SharePoint 2013 Project template.

    3. Asigne al proyecto el nombre GetProjectsJSOM y, a continuación, elija el botón Aceptar .Name the project GetProjectsJSOM, and then choose the OK button.

    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.In the SharePoint Customization Wizard dialog box, choose Deploy as a farm solution, and then choose the OK button.

  3. En el explorador de soluciones, edite el valor de la propiedad dirección URL del sitio para el proyecto ProjectsJSOM de manera que se corresponda con la dirección https://ServerName/PWAURL de la instancia de Project Web App (por ejemplo,).In Solution Explorer, edit the value of the Site URL property for the ProjectsJSOM project to match the URL of the Project Web App instance (for example, https://ServerName/PWA).

  4. Abra el menú abreviado del proyecto GetProjectsJSOM y, a continuación, agregue una carpeta asignada "Diseños" de SharePoint.Open the shortcut menu for the GetProjectsJSOM project, and then add a SharePoint "Layouts" mapped folder.

  5. En la **** carpeta Layouts, abra el menú contextual de la carpeta GetProjectsJSOM y, a continuación, agregue una nueva página de aplicación de SharePoint denominada ProjectsList. aspx.In the Layouts folder, open the shortcut menu for the GetProjectsJSOM folder, and then add a new SharePoint application page named ProjectsList.aspx.

    Nota

    Este ejemplo no usa el archivo de código subyacente que crea Visual Studio 2012 para la página de aplicación.This example does not use the code-behind file that Visual Studio 2012 creates for the application page.

  6. Abra el menú abreviado de la página ProjectsList.aspx y elija Definir como elemento de inicio.Open the shortcut menu for the ProjectsList.aspx page and choose Set as Startup Item.

  7. 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.In the markup for the ProjectsList.aspx page, define a table and a message placeholder inside the "Main" asp:Content tags, as follows.

    <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">
        <br/>
        <span id="spanMessage" style="color: #FF0000;"></span>
    </div>
    

Recuperar la colección de proyectosRetrieving the projects collection

Lo siguientes pasos recuperan e inicializan la colección de proyectos.The following steps retrieve and initialize the projects collection.

  1. Después de la etiqueta de cierre div, agregue una etiqueta SharePoint:ScriptLink que haga referencia al archivo PS.js, de la siguiente manera.After the closing div tag, add a SharePoint:ScriptLink tag that references the PS.js file, as follows.

     <SharePoint:ScriptLink name="PS.js" runat="server" ondemand="false" localizable="false" loadafterui="true" />
    
  2. Debajo de la etiqueta SharePoint:ScriptLink, agregue las etiquetas de script, de la siguiente manera.Below the SharePoint:ScriptLink tag, add script tags, as follows.

     <script type="text/javascript">
         // Paste the remaining code snippets here, in the order that they are presented.
     </script>
    
  3. Declare una variable global para almacenar la colección de proyectos, de la siguiente manera.Declare a global variable to store the projects collection, as follows.

    var projects;
    
  4. 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.Call the SP.SOD.executeOrDelayUntilScriptLoaded method to ensure that the PS.js file is loaded before your custom code runs.

    SP.SOD.executeOrDelayUntilScriptLoaded(GetProjects, "PS.js");
    
  5. Agregue una función que conecte con el contexto actual y recupere la colección de proyectos, de la siguiente manera.Add a function that connects to the current context and retrieves the projects collection, as follows.

     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.Some client objects that you retrieve through the context contain no data until they are initialized; that is, you cannot access the property values of the object until the object is initialized. Asimismo, para las propiedades de tipo ValueObject, debe solicitar explícitamente la propiedad antes de poder obtener acceso a su valor.Moreover, for properties of type ValueObject, you must explicitly request the property before you can access its value. (Si intenta tener acceso a una propiedad antes de que se inicialice, recibirá una excepción excepción propertyorfieldnotinitializedexception ).(If you try to access a property before it is initialized, you receive a PropertyOrFieldNotInitializedException exception.)

    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.To initialize an object, you call the load method (or the loadQuery method) and then the executeQueryAsync method.

    • Al llamar la función load o la función loadQuery se registra una solicitud de que se desea ejecutar en el servidor.Calling the load function or the loadQuery function registers a request that you want to run on the server. Ingresa un parámetro que representa el objeto que desea recuperar.You pass in a parameter that represents the object that you want to retrieve. Si está trabajando con una propiedad de ValueObject, entonces también solicita la propiedad en el parámetro.If you are working with a ValueObject property, then you also request the property in the parameter.

    • Al llamar la función executeQueryAsync se envía la solicitud de consulta al servidor de manera asincrónica.Calling the executeQueryAsync function sends the query request to the server asynchronously. 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.You pass in a success callback function and a failure callback function to invoke when the server response is received.

    Para reducir el tráfico de red, solicite solamente las propiedades con las que desee trabajar cuando llame la función load.To reduce network traffic, request only the properties that you want to work with when you call the load function. 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.In addition, if you are working with multiple objects, group multiple calls to the load function before you call the executeQueryAsync function when it is possible.

Iterar a través de la colección de proyectosIterating through the projects collection

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).The following steps iterate through the projects collection (if the server call is successful) or render an error message (if the call fails).

  1. 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.Add a success callback function that iterates through the projects collection, as follows.

     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. Agregue una función de devolución de llamada no satisfactoria que entregue un mensaje de error, de la siguiente manera.Add a failure callback function that renders an error message, as follows.

    function onQueryFailed(sender, args) {
        $get("spanMessage").innerText = 'Request failed: ' + args.get_message();
    }
    
  3. 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.To test the application page, on the menu bar, choose Debug, Start Debugging. If you are prompted to modify the web.config file, choose OK.

Ejemplo de código completoComplete code example

A continuación se muestra el código completo del archivo ProjectsList.aspx.Following is the complete code from the ProjectsList.aspx file.

<%@ 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">
    <br/>
    <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>

Vea tambiénSee also