#SPC2012 : An overview of developing SharePoint-hosted apps

Tuesday, 13h45, Yina Arenas – Program Manager, Microsoft

Résumé :

Cette session se répète par rapport à des sessions précédentes mais rentre en détails sur des points précis. Elle explique comme récupérer des données via REST et JSOM et WebProxy, comment travailler avec les librairies SP pour créer des contrôles pour améliorer l’interface et la logique. Elle conclut enfin sur la manière d’utiliser les styles CSS ms- et les App Web Template pour avoir des app dont le style est celui des sites qui les héberge. Elle soigne enfin son app avec des éléments SharePoint 2013 comme par exemple les callouts ou popover de SharePoint 2013.

Agenda :

  • Overview
  • Data
  • Logic
  • UX

// Overview – Définition

Apps for SharePoint are self-contained pieces of functionality that extend the capabilities of a SharePoint website. Apps integrate the best of the web and SharePoint; they are targeted and easy to use, and do a great job at solving a user need.

Elle présente que les Apps est une nouvelle façon de répondre aux scénarios et problématiques.

Elles proposent un cycle de vie flexible grâce à l’Office Store notamment.

Elles utilisent des outils et langages qui sont connus ou des standards sur le net (JS/OAuth/html/REST voire C#).

// App Hosting

On revient sur le modèle d’hébergement encore une fois.

Cloud-hosted apps

* Provider hosted apps : SP + hébergement custom

* Autohosted : SP + Azure

SharePoint hosted App : Utilisation d’artefacts SP via un sous-site représentant l’App Web.

Aujourd’hui nous allons nous concentrer sur les SP hosted apps Les avantages sont

* Fonctionnement iso entre O365 et On permises.

* Les permissions sont gérées automatiquement

* Multi tenancy et isolation : profite de l’infra de SharePoint

* Pas de coûts additionnels : encore une fois, on profite de SP existant

* Pas d’infra additionnels

On a donc un sous-site pour une App. Son URL est particulière en revanche : prefix-appUID.sitesharepoint.com/sites/app

appUID étant un GUID.

On utilise la sécurité navigateur pour typiquement les problématiques de cross domain isolation.

// DEMO : SharePoint Hosted App – App Web Components

Utilisation de la fonctionnalité WebProxy qui permet de récupérer des résultats de Bing Son app permet de garder un oeil sur l’activité de ses concurrents.

Elle récupère les articles de Bing à propos de concurrents qui sont stockés dans une liste SP.

Pour chaque article elle a implémenté la possibilité de poster l’article sur son newsfeed.

C’est l’App qu’elle va construire tout le long de la sessions.

// Retour sur les slides : //DATA

Données peuvent être stockées dans des listes ou en BDD. Ils peuvent constituer des données types configurations de l’App ou encore des données utilisateurs.

Elle explique les différentes techniques d’appels aux données.

* JSONP, CORS, XDR : quand ils sont autorisés par les serveurs externes.

* SharePoint Web Proxy : permet à l’app de faire un appel à SP qui sert de proxy pour faire un appel à un service/serveur externe pour retourner les données. Pour palier les problèmes d’appels cross-domain

* BCS : Créer un service BCS connecté à des données externes comme par ex un service ODATA

// DEMO : Data

Elle a créé une App SP Hosted.

Elle a ajouté des images et des pages.

Dans la default.aspx, elle va utiliser un Web Proxy requérant Bing, elle a placé une div id articles pour charger ses données.

Elle ajoute au projet, une liste SP « Competitors » de type Custom List. Elle a un titre, et ajoute un champs « Notes ». Dans sa liste, elle va ajouter des données (Google, Dropbox, Box, Jive) dans son listinstance.

Elle va dans son App.js qui est le js de base lors de la création du projet et insert des snippets de codes pour accélérer la démo.

Elle récupère les éléments de sa liste de Competitors (en JSOM), et va construire une chaine de query string qu’elle va passer à Bing.

Elle passe ensuite à un getData en passant par un SP.WebRequestInfo() et un SP.WebProxy.invoke() pour passer par le serveur pour qu’il fasse effectivement la requête.

Pour ce faire, il faut néanmoins déclarer les différents services qui peuvent être appelés via le AppManifest. Pour ça elle déclare les endpoints dans le Designer de l’AppManifest.

Test : ça marche.

// Retour sur les slides // Logic

Elle représente le JSOM mais aussi les nouvelles API REST/OData via l’API _api/ Ceci a déjà été évoqué dans d’autres sessions.

ClientContext et cross site calls : il faut faire attention à l’objet ClientContext car avec l’isolation des apps, accéder à d’autres ressources peut être problématiques avec des messages Unauthorized. Il faut utiliser l’objet AppClientContext pour ce faire. Nous passons rapidement dessus.

En ce qui concerne la logique métier, il faut utiliser Javascript pour accéder aux données et les manipuler. En revanche pour des actions plus longues et demandant des actions et événements, il est faut considérer l’utilisation des workflows.

// DEMO : Logic

Retour sur Visual Studio où elle change son AppManifest pour passer à une page Post.aspx en start page.

Dans la partie permissions de son App, elle définit l’autorisation sur le UserProfile pour faire un read, et un droit Write sur le Tenant pour pouvoir écrire dans le feed.

Sur sa page, elle a inclus des javascript ScriptLink pour avoir des scripts javascript à la volée (people picker etc. via clienttemplates.js et clientforms.js) Elle passe à son javascript où elle configure son people picker avec un tableau schéma de configuration où elle met une clé OnUserResolvedClientScript dans lequel est mis une fonction qui va récupérer les utilisateurs sélectionner et les afficher dans la bonne div.

A noter qu’elle a préparé beaucoup de codes dans lequel elle ne rentre pas en détail.

Déploiement … son people picker set en place et fonctionne. Lorsqu’un utilisateur est sélectionné, toutes ses informations sont affichées. Celui qui l’intéresse est l »User Key, qui est l’identifiant unique pour chaque utilisateur.

Elle retour dans VS 2012, où elle va utiliser le SP.Social.SocialFeedManager. Elle créé un post grâce à l’objet SocialDataItem et SocialAttachment ainsi que SocialPostCreationData.

Elle enchaine sur l’explication rapide de la récupération de la timeline en REST via la librairie Knockout pour databinder des éléments sur sa page en javascript.

// Retour sur les slides : UX

Elle explique que SharePoint propose déjà des CSS à appliquer à ses app. Les callouts, dialogs, menu, ruban et custom actions existent déjà.

App Web Template : c’est la possibilité d’appliquer un style en partant d’une app.master assez vide. C’est un canvas assez vide pour pouvoir designer notre app à notre volonté.

App Web Custom Actions : utiliser les Custom Actions pour ajouter des boutons sur le Ribbon, ECB, et ScriptLink. Dans une App Web on peut mettre du script, alors que sur le host web on ne peut mettre qu’une URL

// DEMO : UX

Elle retourne sur VS 2012 et modifie encore sa starting page pour une page déjà créée.

Pour créer un callout (communément appelé popover), elle a utilisé un SP.SOD.executeFunc(‘callout.js’, ‘Callout’). Ensuite elle utilise le CalloutManager pour faire un createNew en passant des options (orientations, events et contenu). Elle y attache des CalloutAction() pour ajouter des entrées d’actions sur le callout.

Elle enchaine en création une liste de Tiles grâce à la Promoted Links (type 170). Elle ajoute des données pour faire le menu de son app avec des Tiles. Le promoted links gère tout seul la possibilité d’ouvrir des tiles en dialog etc.

Elle retourne sur sa page pour ajouter une XsltListViewWebpart avec l’attribut ListUrl pour pointer sur la liste de PromotedLinks afin de créer son menu sur sa page.

Déploiement : ça marche.

Elle ouvre alors différentes pages vers son app et montre que grâce à son utilisation de classes CSS ms-, des App Web Template, elle a les Apps qui prennent le design des sites qui les héberge.

Christian

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