Commencez par créer un nouveau projet Visual Studio de type Empty SharePoint Project et nommez le AreaProg.Ribbon.AppPage :
Dans l'exemple que nous allons décrire, nous allons devoir utiliser une page applicative. Celle-ci sera déployée dans le dossier layouts de SharePoint. Autrement dit, nous ne pourrons pas faire de solution de type "Sandboxées". Laissez donc "Deploy as a farm solution" cliqué dans l'écran suivant la création de votre solution :
La première chose que nous allons faire va être de créer la custom action qui va permettre d'ajouter un groupe contenant 2 boutons dans le Ribbon. Ici, nous n'expliquerons pas le code XML utilisé car nous l'avons déjà fait dans les cours précédents. Cliquez donc avec le bouton droit de votre souris sur votre projet et choisissez Add > New Item. Dans la fenêtre qui apparait, choisissez Empty element et nommez le ShowItems :
L'ajout de cet élément provoquera la création d'une feature appelée Feature1. Nous allons donc la renommer pour plus de propreté. Ouvrez donc le petit dossier Features de l'arborescence de votre projet et localisez la feature nommée Feature1. Cliquez une fois dessus et pressez F2 pour renommer l'élément avec le nom ShowItems. Doublez-cliquez ensuite sur cette feature et dans l'écran de configuration, nommez la ShowItems.
Cliquez maintenant avec le bouton droit de votre souris sur votre projet et choisissez Add > SharePoint "Images" Mapped Folder. En sélectionnant cette option, Visual Studio va créer un dossier Images dans votre solution qui sera mappé sur le dossier image de SharePoint. Ce dossier va contenir les images représentants nos boutons. Nous utiliserons la même image (mais en deux tailles différentes) car les deux boutons serviront à faire la même chose mais de façon différente. Voici donc les images à mettre dans ce dossier :
- 
Si vous utilisez ces images, renommez les en "View16by16.png" et "View32by32.png" avant de les ajouter à votre solution. Pour cela, il vous suffit de cliquer avec le bouton droit de votre souris sur le dossier contenu dans le dossier Images, de choisir Add > Existing Item et d'aller chercher les images. Passons maintenant au code de notre custom action. Ouvrez le fichier Elements.xml et insérez-y le code suivant :
Si vous ne comprenez pas ce code, nous vous conseillons de relire les cours précédents car tout est expliqué dedans. Ici, nous n'allons pas grossir le code avec des Scaling et des Templates personnalisés. Nous utilisons donc un template déjà existant et nous ne nous occupons pas de la mise à l'échelle du groupe. Pour l'instant, le résultat de cette custom action est le suivant :
Actuellement, les boutons ne font strictement rien. C'est maintenant que nous allons commencer à développer le gros du projet. La première chose à faire est bien évidemment de créer la page qui va devoir afficher les éléments sélectionnés dans la liste. Pour cela, faites un click droit sur votre projet et choisissez Add > New Item. Dans la fenêtre qui apparait, sélectionnez Application Page et nommez la ShowItems.aspx :
Visual Studio va automatiquement créer le dossier "mappé" Template qui sera chargé de contenir votre page applicative. Nous n'allons pas encore modifier cette page. Nous allons d'abord voir comment faire pour l'afficher lors du click sur les boutons du Ribbon.
Pour faire cela, nous allons devoir utiliser du code JavaScript dans le fichier Elements.xml. Ouvrez le et repérez l'élément CommandUIHandler ayant "FirstShowItemButtonCommand" comme valeur de l'attribut Command. Insérez le code suivant comme valeur de son attribut CommandAction :
Ce code va nous permettre d'afficher notre page applicative de la manière la plus basique possible. Soyez vigilent et faites démarrer ce code directement après le guillemet d'ouverture. Nous allons maintenant l'analyser pour mieux le comprendre.
Pour l'instant, ne tenez pas compte de la fonction PopupCallBack, nous y reviendrons après. La première chose à faire pour utiliser SharePoint via le JavaScript, c'est de récupérer le contexte actuel. Pour utiliser les objets SharPoint, vous disposez d'un objet nommé SP qui va vous permettre de faire ce que vous désirez. La première ligne va donc nous permettre de récupérer le contexte d'exécution actuel de SharePoint. Une fois que nous l'avons récupéré, nous allons devoir récupérer les éléments sélectionnés dans la liste. Pour cela, nous devons utiliser la fonction getSelectedItems en lui faisant passer le contexte actuel en paramètre.
Nous déclarons ensuite une variable nommée itemsId qui va nous permettre de stocker une chaine de caractères représentant les ID des éléments sélectionnés. Effectivement, nous allons passer cette chaine de caractères à notre page applicative pour que celle-ci soit informée des éléments sélectionnés dans la liste et puisse les afficher. Nous parcourons donc la collection items pour analyser chaque élément. Ici, nous nous contentons de concaténer l'id de ces éléments en les séparant par le signe tiret (-).
Nous appelons ensuite la fonction OpenPopUpPage. Celle-ci va nous permettre d'ouvrir une page applicative SharePoint en tant que popup. Le premier paramètre qu'attend cette fonction est simplement l'URL de la page à ouvrir. Ici, nous faisons passer le chemin d'accès vers notre page applicative. Ce chemin est assez simple : /_layouts/ suivi du dossier contenant notre page applicative (visible sous Visual Studio) suivi du nom de notre page applicative.
Nous allons également devoir passer des informations à cette page pour que celle-ci ait tous les paramètres nécessaires à la récupération des éléments. Le premier paramètre se nommera ItemsId et contiendra les id des éléments sélectionnés, séparés par des tirets. Le deuxième paramètre sera l'id de la liste contenant les éléments. Pour ce faire, nous utilisons encore l'objet SP.ListOperation.Selection et nous appelons sa fonction getSelectedList pour récupérer l'ID de la liste. Enfin, nous faisons passer le traditionnel paramètre Source à la page. Ce paramètre contiendra l'url de la page ayant appelée le popup. Pour récupérer cela, il suffit d'appeler la fonction GetSource.
Le deuxième paramètre de la fonction OpenPopUpPage sera le nom d'une fonction. Celle-ci sera automatiquement appelée une fois que nous page applicative sera fermée. Ici, nous appelons la fonction PopupCallback. Cette fonction a été déclarée quelques lignes auparavant dans le code. Cette fonction va simplement utiliser addNotification pour afficher un message à l'écran. Nous allons voir sous peu où se placera ce message. Pour l'instant, déployez votre projet et afficher l'onglet Liste. Une fois que vous avez localisé nos deux boutons, cliquez sur le premier pour voir apparaître ceci :
Comme vous pouvez le constater, notre page applicative s'affiche bien et ô bonheur, le design est correct. Chose étrange d'ailleurs. Effectivement, si vous regardez le code de notre page applicative, vous remarquerez que celle-ci utilise default.master comme page maitre. Le design du site devrait donc apparaître. Et bien non, et tout ca, grâce à la fonction OpenPopUpPage. Effectivement, celle-ci va automatiquement rajouter le paramètre IsDlg=1 à l'url de votre site. Une page chargée avec ce paramètre ne contiendra donc pas le design de la page maitre mais contiendra bien les références au fichier CSS et JavaScript. Maintenant, si vous fermez votre fenêtre, vous remarquerez certainement ceci :
Vous avez certainement remarqué le petit cadre jaune affichant le message "Application popup-page closed.". C'est à ca que sert la fonction addNotification utilisée dans la fonction appelée lors de la fermeture de la page. Effectivement, il suffit de faire passer le message à afficher en paramètre et cette fonction fait le reste.
Les deux derniers paramètres de la fonction OpenPopUpPage vont simplement permettre de définir la taille de la page, donc ici, 800x600. Passons maintenant à la commande de notre deuxième bouton. Celle-ci va également afficher une page applicative en mode popup mais en utilisant une autre fonction. Tapez donc ce code dans l'attribut CommandAction de votre deuxième élément CommandUIHandler :
Le code est sensiblement le même que toute à l'heure. En tout cas, la fonction DialogCallback va avoir exactement la même fonction que PopupCallback dans le code précédent, nous ne la ré-expliquerons donc pas. Comme tout à l'heure, nous récupérons le contexte, les éléments sélectionnés et nous les concaténons en les séparant par des tirets, tout cela ne change pas.
La nouveauté provient de l'utilisation de la fonction showModalDialog de l'objet SP.UI.ModalDialog. Celle si va permettre d'afficher une page applicative comme un popup mais avec quelque options en plus. Ces options prennent la forme de l'objet déclaré un peu avant. Enfin, nous nous contentons de définir certaines propriétés d'affichage et les stocker dans l'objet options. La propriété [U]url[/I] va simplement définir l'URL de la page à afficher. Par rapport à la fonction OpenPopUpPage, vous remarquez que nous pouvons définir le titre de la page affichée (propriété title) ainsi que le fait d'afficher ou non la croix de fermeture (showClose) ou le carré d'agrandissement (allowMaximize). width et height serviront respectivement à définir la largeur et la hauteur de la page affichée. Enfin, le dernier paramètre permet d'indiquer la fonction appelée lors de la fermeture de la page.
Si vous cliquez sur le deuxième bouton dans le Ribbon, vous obtiendrez donc ceci :
La page est donc exactement la même (normal, c'est la même page ^^), à l'exception pres que cette fois, l'icone d'agrandissement de la page n'apparaître pas car nous avons définit allowMaximize sur false.
Voilà donc comment faire pour afficher une page applicative depuis le Ribbon et également comment accéder au contexte SharePoint depuis JavaScript. Par acquis de conscience, nous allons maintenant afficher les éléments sélectionnés. Modifiez donc le code ASPX de votre page de cette manière :
Si vous faites un copier/coller de ce code, nous vous conseillons de ne copier que ce qui se trouve en dessous de l'élément Page. Nous définissions deux contrôles Content pour remplir les ContentPlaceHolder de la page default.master. Le deuxième (PlaceHolderPageTitle) permet simplement de définir le titre de la page. PlaceHolderMain quant à lui va permettre de contenir le contenu de la page.
J'ai remarqué que si nous faisons directement un Controls.Add depuis le code behind de la page, les contrôles ne s'ajoutaient pas correctement. Nous ajoutons donc un Panel qui contiendra les contrôles que nous ajouterons dynamiquement. Ouvrez donc le code-behind de votre page et ajoutez les deux directives suivantes :
Tapez ensuite cette fonction :
Nous allons survoler ce code car ce n'est pas exactement le but de ce tutoriel. Nous commençons par vérifier que les deux paramètres normalement joints à l'URL sont bien présents. Si ce n'est pas le cas, nous affichons un message d'erreur.
Dans le cas contraire, nous plaçons la valeur du paramètre ItemsId dans la variable itemsId et nous récupérons une référence à la liste SharePoint grâce au paramètre ListId. Une fois que nous avons ces deux informations, nous "splitons" itemsId pour récupérer l'ID de tous les éléments sélectionnés. Nous parcourons donc tous ces ID et récupérons chaque fois l'élément lié à cet ID. Ensuite, pour chacun de ses éléments, nous parcourons la liste des champs et nous n'affichons la valeur que de ceux qui ne sont pas cachés. Au final, votre page applicative ressemblera à ceci :
Plutôt réussie non ? Voilà, nous avons donc vu comment effectuer plus qu'un simple alert lors d'un click sur le bouton du Ribbon. Bien entendu, il peut être utile d'exécuter des opérations sur les éléménts sans forcément avoir beson de passer par une page applicative, mais pour ce faire, il faudra utiliser le client object model JavaScript. Nous aborderons cette notion dans d'autres cours.
Télécharger l'exemple
