SharePoint 2013 : Présentation et développement d’une « App Part »

Nous allons voir dans cet article ce qu’est une « App Part », et comment les développer avec Visual Studio 2012.

Présentation

Une App Part permet d’afficher la UX de votre App directement dans le site courant (dit « host web »).

A noter que l’App Part utilise une IFrame pour afficher le contenu de votre App directement dans le site.

De la même manière qu’une webpart, une App part contient une ToolPart qui vous permet de définir des propriétés personnalisées.

Vous pouvez consulter  :

• Cet article Technet pour comprendre les concepts de « host webs » et d’ « app webs »,
• Cet ensemble d’articles concernant le développement de composants UX.

Prérequis

1. Avoir créé un site permettant le debug de votre App; référez-vous à cet article en cas de problèmes.

Pour faire simple, créez une collection de sites basée sur le template « Developer Site », site dont vous utiliserez l’URL à l’étape 2 de la procédure ci-dessous.

2. Avoir configuré votre environnement pour les Apps (voir cet article).

Exemple

L’exemple ci-dessous présente le développement d’une App Part affichant sur sa page d’accueil la valeur de sa propriété custom (nommée « TexteAAfficher »).

Développement

Sans surprise, c’est votre outil préféré que vous allez utiliser pour développer votre App Part : Visual Studio 2012 .

Vous pouvez consulter les articles suivants le concernant :

• Installer Visual Studio 2012 (Windows 8),
• Visual Studio 2012 : Installer les templates de projet pour SharePoint 2013.

1. Créez un nouveau projet avec comme template « App for SharePoint 2013 ».

2. Saisissez le nom de votre projet, le site utilisé pour debugger et le mode d’hébergement de votre App (ici « SharePoint-hosted »).

3. Le projet est créé.

4. Ajoutez au projet un nouvel élément, de type « Client Web Part (Host Web) ».

5. Définissez la page utilisée par votre « Client Web Part » : soit celle créée par défaut dans le projet (Default.aspx), soit une nouvelle – C’est cette seconde option que je choisis ici.

6. La page est bien créée dans le module « Pages »

7. Et la page est bien référencée dans le fichier « Elements.xml ». Jusque là tout va bien.

8. Ouvrez ensuite le fichier « Elements.xml » de la Client Web part.

Voici le fichier après modification, que j’ai découpé en 3 parties :

• Partie 1 : Nom, titre, description et dimensions (qui ne peuvent être modifiées via l’interface),
• Partie 2 : Ajout dans la partie « src » du paramètre « TexteAAfficher »,
• Partie 3 : Ajout de la ligne définissant une propriété custom, nommée « texteAAfficher ».

Notez que la propriété de l’App Part est passée en QueryString à sa page d’accueil.

9. Modifiez la page d’accueil « MaPageCustom.aspx » pour lui faire afficher la valeur du paramètre : vous pouvez utiliser le code javascript décrit dans cet article Technet  et l’adapter à votre besoin.

10. Y’a plus qu’à : F5 pour lancer le déploiement de l’App, et vous vous retrouvez sur la page d’accueil de l’App (default.aspx).

Ne confondez pas la page de l’App (Default.aspx) avec la page d’accueil de votre App Part (MaPageCustom.aspx).

11. Cliquez sur le lien en haut à gauche pour revenir à la page d’accueil.

On aperçoit notre App listée en bas de page, dans la partie « Apps in Testing ».

12. Sur une page (ici la page d’accueil), cliquez sur « Page/Edit/Insert/App Part », sélectionnez votre App Part (ici « Mon App Part de Demo »), et cliquez sur « Add ».

13. L’App Part affiche bien ce qu’on lui demande : son paramètre « TexteAAfficher », dont la valeur par défaut (définie à l’étape 8 – partie 3) est bien affichée.

14. Cliquez sur « Edit Web part ».

15. On retrouve bien notre bloc « Propriétés persos » définie à l’étape 8 – partie 3, et la propriété custom.

Modifiez la valeur de la propriété, validez le toolpart.

16. Et au final :

Conclusion

Au delà de cet exemple trivial, cet article vous permet (je l’espère !) d’envisager les formisables choses que vous allez pouvoir faire avec les App Parts 🙂