Prise en main du modèle objet JavaScript Project Server 2013

Dans Project Server 2013, le modèle objet JavaScript peut être utilisé dans le développement Project Online, mobile et local. Cette rubrique fournit une brève vue d’ensemble du modèle objet JavaScript, puis décrit comment créer une page d’application qui récupère et itère dans des projets à l’aide du modèle objet JavaScript.

Utilisation du modèle objet JavaScript Project Server

L’utilisation du modèle objet JavaScript est un excellent moyen de créer une application qui exécute côté client (par opposition au code client managé qui doit s’exécuter à distance). Les applications peuvent utiliser le modèle objet JavaScript pour récupérer ou modifier des objets en envoyant des appels asynchrones au serveur. Les applications qui utilisent le modèle objet JavaScript sont généralement déployées en tant que compléments SharePoint personnalisés, pages d’application et composants WebPart. Pour plus d’informations, voir « Types de composants SharePoint qui peuvent se trouver dans une application pour SharePoint » dans Sites web hôtes, sites web de complément et composants SharePoint dans SharePoint 2013.

Le modèle objet JavaScript implémente la fonctionnalité main de Project Server 2013, mais le modèle objet JavaScript et le modèle objet serveur n’ont pas de parité un-à-un. Le point d’entrée du modèle objet JavaScript est l’objet ProjectContext , qui représente le contexte client de Project Server 2013 et fournit l’accès au contenu et aux fonctionnalités du serveur. Le modèle objet JavaScript pour Project Server 2013 est défini dans le fichier PS.js, qui se trouve dans le chemin d’accès %ProgramFiles%\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\LAYOUTS par défaut sur le serveur d’applications. Project Server 2013 installe également le fichier PS.Debug.js au même emplacement. Ce fichier est une version déminifiée de PS.js qui fournit des informations sur IntelliSense.

Le modèle objet JavaScript autorise l’authentification par formulaire, et toutes les demandes sont authentifiées en tant qu’utilisateur actuel. Pour plus d’informations sur la sécurité et d’autres considérations relatives à la conception d’applications et de solutions personnalisées, voir Authentification, autorisation et sécurité dans SharePoint 2013, Aspects importants de l’architecture et du développement des compléments SharePoint et Compléments SharePoint comparés aux solutions SharePoint.

Remarque

Pour accéder aux données à partir d’un site SharePoint à distance, SharePoint 2013 fournit une bibliothèque inter-domaines qui vous permet d’effectuer des appels inter-domaines côté client. Pour plus d’informations, voir Accéder aux données SharePoint 2013 à partir de compléments à l’aide de la bibliothèque inter-domaines.

De nombreux concepts et processus d’utilisation du modèle objet JavaScript pour Project Server 2013 ressemblent à ceux des modèles objet clients associés. Pour plus d’informations sur le modèle objet client managé Project Server 2013, consultez Microsoft.ProjectServer.Client. Pour plus d’informations sur le modèle objet SharePoint 2013JavaScript et le modèle objet client managé, voir Effectuer des opérations de base à l’aide du code de bibliothèque JavaScript dans SharePoint 2013 et Effectuer des opérations de base à l’aide du code de la bibliothèque cliente SharePoint 2013.

Procédure : Création d’une page d’application qui récupère et parcourt les projets

Apprenez à créer une page d’application qui affiche l’ID, le nom et la date de création de chaque projet publié dans un site.

Conditions préalables à la création d’une page d’application qui récupère et parcourt les projets

Pour développer la page d’application décrite dans cette rubrique, vous devez installer et configurer les produits suivants :

• SharePoint Server 2013
• Project Server 2013 avec au moins un projet publié
• Visual Studio 2012
• Outils de développement Office pour Visual Studio 2012

Vous devez également disposer des autorisations nécessaires pour déployer l’extension sur SharePoint Server 2013 et récupérer des projets.

Remarque

Ces instructions supposent que vous développez sur l’ordinateur qui exécute Project Server 2013.

Création de la page d’application dans Visual Studio 2012

Les étapes suivantes permettent de créer un projet SharePoint et une page d’application qui contient un tableau et un libellé. Le tableau affiche des informations sur les projets et le libellé affiche des messages d’erreur.

1. Sur l’ordinateur qui exécute Project Server 2013, exécutez Visual Studio 2012 en tant qu’administrateur.

2. Créez un projet SharePoint 2013 vide, comme suit :

   1. Dans la boîte de dialogue Nouveau projet, sélectionnez .NET Framework 4.5 dans la liste déroulante située en haut.

   2. Dans la liste des catégories de modèles, choisissez la catégorie Office SharePoint, puis sélectionnez le modèle SharePoint 2013 Project.

   3. Nommez le projet GetProjectsJSOM, puis choisissez le bouton OK .

   4. Dans la boîte de dialogue Assistant Personnalisation de SharePoint, choisissez Déployer en tant que solution de batterie, puis sélectionnez le bouton OK.

3. Dans Explorateur de solutions, modifiez la valeur de la propriété URL du site pour le projet ProjectsJSOM pour qu’elle corresponde à l’URL du Project Web App instance (par exemple, https://ServerName/PWA).

4. Ouvrez le menu contextuel pour le projet GetProjectsJSOM, puis ajoutez un dossier mappé SharePoint nommé « Dispositions ».

5. Dans le dossier Dispositions , ouvrez le menu contextuel du dossier GetProjectsJSOM , puis ajoutez une nouvelle page d’application SharePoint nommée ProjectsList.aspx.

   Remarque

   Cet exemple n’utilise pas le fichier code-behind créé par Visual Studio 2012 pour la page de l’application.

6. Ouvrez le menu contextuel de la page ProjectsList.aspx et choisissez Définir comme élément de démarrage.

7. Dans le balisage pour la page ProjectsList.aspx, définissez un tableau et un espace réservé de message dans les balises asp:Content « principales », comme suit.

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

Récupération de la collection de projets

Les étapes suivantes permettent de récupérer et d’initialiser la collection de projets.

1. Après la fermeture de la balise div, ajoutez une balise SharePoint:ScriptLink qui fait référence au fichier PS.js, comme suit.

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

2. Sous la balise SharePoint:ScriptLink, ajoutez des balises script, comme suit.

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

3. Choisissez une variable globale pour stocker la collection de projets, comme suit.

   var projects;
   

4. Appelez la méthode SP.SOD.executeOrDelayUntilScriptLoaded pour vous assurer que le fichier PS.js est chargé avant l’exécution de votre code personnalisé.

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

5. Ajoutez une fonction qui se connecte au contexte actuel et qui récupère la collection de projets, comme suit.

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

   Certains objets clients que vous récupérez via le contexte ne contiennent pas de données tant qu’ils ne sont pas initialisés . autrement dit, vous ne pouvez pas accéder aux valeurs de propriété de l’objet tant que l’objet n’est pas initialisé. En outre, pour les propriétés de type ValueObject, vous devez demander explicitement la propriété avant de pouvoir accéder à sa valeur. (Si vous essayez d’accéder à une propriété avant son initialisation, vous recevez une exception PropertyOrFieldNotInitializedException .)

   Pour initialiser un objet, appelez la méthode load (ou la méthode loadQuery), puis la méthode executeQueryAsync.

   • L’appel de la fonction load ou loadQuery permet d’enregistrer une demande que vous souhaitez exécuter sur le serveur. Vous transmettez un paramètre qui représente l’objet que vous souhaitez récupérer. Si vous utilisez une propriété ValueObject, vous devez également demander la propriété dans le paramètre.

   • L’appel de la fonction executeQueryAsync envoie la demande de requête au serveur de manière asynchrone. Vous transmettez une fonction de rappel de succès et d’échec à invoquer lorsque vous recevez la réponse du serveur.

   Pour réduire le trafic réseau, demandez uniquement les propriétés que vous souhaitez utiliser lorsque vous appelez la fonction load. En outre, si vous utilisez plusieurs objets, si possible, regroupez plusieurs appels de la fonction load avant d’appeler la fonction executeQueryAsync.

Parcourir la collection de projets

Les étapes suivantes permettent de parcourir la collection de projets (si l’appel au serveur aboutit) ou d’afficher un message d’erreur (si l’appel échoue).

1. Ajoutez une fonction de rappel de succès qui parcourt la collection de projets, comme suit.

    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. Ajoutez une fonction de rappel d’échec qui affiche un message d’erreur, comme suit.

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

3. Pour tester la page d’application, dans la barre de menus, sélectionnez Déboguer, puis Démarrer le débogage. Si vous êtes invité à modifier le fichier web.config, cliquez sur OK.

Exemple de code complet

Vous trouverez ci-dessous l’ensemble du code du fichier 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>

Voir aussi

• Créer, récupérer, mettre à jour et supprimer des projets à l’aide du modèle objet JavaScript Project Server
• Modèle objet côté client (CSOM) pour Project 2013
• Prise en main du modèle CSOM Project Server et de .NET