#SPC2012 : Creating apps for Excel, Word and PowerPoint

Session de 17h à 18h15 Rolando Jimenez, Lead Program Manager

L’objectif de la session est de montrer les Apps pour Office, leurs intégrations et le développement dans Visual Studio 2012.

Pour commencer, un rapide rappel sur les apps est effectué. Les apps peuvent être Client Site Logic (HTML / CSS / Javascript) ou bien Server-Side Logic (Any Language, utilisation dans SharePoint On-premise ou Online…). Dans cette session, nous allons voir la partie client-side pour Office.

Une App est une Web Page (HTML/CSS/JS) et un « App Manifest » (xml).

Trois emplacements sont possibles pour les apps pour Office :

  • « TaskPane App in » : A droite dans le panneau d’office (pour Word / Excel / PowerPoint et Project),
  • « Content app in Excel » : N’importe où dans le tableau Excel,
  • « Mail app in » (dans la zone en dessous du sujet dans Outlook).

Les Apps pour Office peuvent être multi-plateforme et Cross App

  • Excel (Web / Desktop)
  • Outlook (Web / Desktop / Mobile Web)
  • Word (Desktop)
  • PPT (Desktop)
  • Project (Desktop)

Les principes sont multiples et grâce à l’utilisation de l’API, les Apps fonctionnent à travers les plateformes (Desktop, Web), à travers des applications (Excel, Outlook). L’utilisation de « Async » permet de rendre les apps performantes (asynchrone et ne bloque pas les ressources de l’application).

L’API JavaScript d’Office est présenté : « Office.context » pour les documents, « Mailbox » et « Project ».

On commence par une démo sur la partie « Document ». Rolando ouvre Visual Studio et créé une app de type TaskPane. Une fois le projet créé, du code (html et js) est déjà initialisé. On voit le fichier manifest et on a dans Visual Studio une interface simplifiée permettant de modifier le paramétrage (pas besoin de toucher au code xml). Une fois l’application lancée, Excel s’ouvre et présente l’app sur la partie droite. Un bouton « Get » permet de récupérer la valeur de la cellule et un autre, « Set » pour la modifier. Un focus sur le code est fait. Coté html, on peut voir les différentes inclusions javascript (office.js et Microsoft.Ajax.js). Il existe un événement pour s’avoir quand Office est disponible (« Office.initalize »).

Pour modifier une valeur : « Office.context.document.setSelectedDataAsync(‘new value’) ».

L’intellisense de Visual Studio fonctionne et il est donc très facile d’écrire du code : bonne nouvelle !

On peut ajouter un paramètre à « setSelectedDataAsync » pour lui dire qu’on veut que ce soit de l’html (« coercion : Office.CoercionType.html »). Cette fois ci, c’est Word qui est lancé (à modifier dans les propriétés du projet app), et le texte html est interprété dans Word. Pour débugguer, on sauvegarde le fichier dans Visual Studio et on fait un F5 dans la zone de l’app de Word. L’app est mis à jour et le rattachement est automatique : cela est bien plaisant pour les développeur qui leur permettra de modifier l’app plus rapidement.

Une autre modification est faite pour changer le « coercion » de HTML en Ooxml (openxml). Rolando modifie la partie du bouton « set » pour récupérer les données du document et faire un replace d’une valeur à une autre : Content.replace(‘xx’, ‘yy’). Depuis Word, il créé ainsi  un objet « organigramme » avec des données : Le replace fonctionne et l’organigramme est mise à jour. Très simple et grâce à OpenXml c’est universel et flexible !

Une autre application est créée : on va intégrer « Bing Maps ». Cette fois ci l’app est créé en « Content app in Excel ». Une référence vers le fichier js de « bing maps » est ajoutée et un peu de html  / js. Assez simple à comprendre et peu de js : principalement _map = new VEMap(‘div’) et _map .LoadMap(). L’application est lancée dans Excel et Bing Maps s’ouvre au milieu.  On va plus loin avec des boutons pour interagir avec la carte : zoom, bouton qui lit la valeur d’une cellule, et positionne une punaise sur la carte en fonction de la valeur (un lieu sur la carte). Au passage, on test le debug sur un bouton. Le point d’arrêt se positionne dans Visual Studio, on peut voir les valeurs avec l’outil « espion ».

Un autre concept est présenté. Pour Excel, new Office.TableData() qui permet de construire un tableau où lui indique le header et ses valeurs. C’est puissant car en quelques lignes on modifie le document.

Maintenant le « binding ». Une fonction nous permet de sélectionner une zone (Office.context.document.binding). Les données sont récupérés par « value.rows » et elle sont disposées sur la carte.

Possibilité d’associer des événements sur une modification d’une zone par exemple : aussitôt notre tableau modifié, la carte est mise à jour.

Enfin, le « setting ». On peut sauvegarder dans le document des valeurs. => « _doc.settings ».

  • Custom XML Parts.

Rappel que les documents OpenXML sont du xml et qu’on peut interagir avec des zones. On commence par Word. Pour ajouter une zone, il faut aller dans les settings de Word afin de permettre l’affichage de l’onglet « developer » dans le ruban. On a désormais tout un tas de bouton. « CustomXMLPart » est présenté : un fichier xml décrit une hiérachie des champs, et chaque champ est intégré dans le document. Un nouveau document est créé et on voit qu’on peut simplement interagir avec le fichier sans se soucier de la mise en page.

Pour finir, un petit bonus (on va finir tout juste à l’heure sans les questions ; ça change des sessions qui finissent au moins 15 minutes en avance). Et si on se connectait à SharePoint ! En effet, on peut simplement le faire grâce à l’API. On voit une app qui va se connecter à SharePoint (on saisit son url) et va créer une liste dans SharePoint simplement en sélectionnant un tableau de Word. Avant d’effecuter l’opération, une demande d’autorisation est faite pour le site (Oauth) : Deux choix « Trust it » ou « Cancel ». Une fois acceptée : la liste est créée ! On voit à présent le code de l’app. En fait, l’app possède un fichier de config (web.config). Pour se connecter à SP Online, il faut l’autoriser via Oauth et via un clientID qui sera généré depuis la site d’Office.

Le développement d’app est prometteur et vraiment plus simple qu’avec VSTO (Visual Studio Tools for Office). Visual Studio semble bien avancé pour le modèle d’App en client side permettant de faire du debug, de l’auto-complétion, des interfaces pour éviter la modification de manifest, et le déploiement à chaud.

Jérôme

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s