Cette façon de présenter les données permet d'économiser beaucoup de place et de ne présenter que les actions possibles selon l'endroit où l'on se trouve dans le site.
L'architecture du Ribbon peut être décomposée en trois éléments de base. Le premier de ces élément sont les onglets. Dans la capture d'écran ci-dessous, vous pouvez remarquer qu'il y a deux onglets : Browse et Page. Dans chacun de ces onglets, sont présentes différentes actions. Ces actions sont regroupées dans des groupes. Par exemple, nous avons le groupe Edit, Manage, Share & Track,... Enfin, le dernier élément constituant le Ribbon sont les éléments eux-même, autrement dit, les actions (Edit, Check Out,...).
SharePoint offre bien évidemment la possibilité aux développeurs de personnaliser le Ribbon. Cela se fait à l'aide d'une Custom Action. Nous allons immédiatement nous plonger dans le vif du sujet..
Commencez par créer un projet Visual Studio 2010 de type Empty SharePoint Project et nommez le AreaProg.Feature.Ribbon.
Cliquez ensuite avec le bouton droit sur votre projet et choisissez Add > New Item. Dans la fenêtre qui apparait, choisissez Empty Element et nommez le RibbonExample.
La dernière chose que nous allons faire est de renommer la feature qui a été automatiquement créée. Ouvrez donc le petit dossier Feature, Cliquez sur Feature1 et pressez ensuite F2 pour renommer l'élément. Nommez le RibbonFeature et validez.
Doublez-cliquez ensuite sur cette feature et dans la fenêtre qui apparait, modifiez le titre de la feature en AreaProg.Feature.RibbonFeature et sauvegardez votre projet. Au final, l'arborescence de votre projet devrait ressembler à ceci :
Nous allons partir de ce projet pour les besoins de notre exemple mais vous devez avant tout savoir une chose ; Tout la définition du ruban se trouve dans le fichier C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\GLOBAL\XML\CMDUI.XML. Nous nous réfèrerons de temps à en temps à ce fichier dans ce cours.
Ajouter un bouton
Comme nous l'avons vu, la technique pour ajouter des éléments au Ribbon consiste à créer des Custom Action. Cette technique implique donc de tout faire en déclaratif grâce au XML. Ouvrez donc votre fichier Elements.xml et commencez la déclaration de votre Custom action comme ceci :
Cet élément permet de déclarer une custom action. Le premier attribut permet de lui attribuer un identifiant. Pour le ruban, il est de bon aloi de taper Ribbon, suivi de l'endroit où l'action devra se trouver (nous y reviendrons) suivi du nom de l'action. L'attribut Location permet d'indiquer où va se placer l'action, ici, c'est dans CommandIUI.Ribbon pour indiquer que l'action concerne le ruban. Les deux paramètres suivants vont de paire. RegistrationType permet de définir à quel type de contenu l'action sera appliquée, cela peut être :
ContentType
FileType
List
ProgId
Ici, nous voulons appliquer notre action à une liste, nous choisissons donc List. L'attribut RegistrationId permet de définir l'id de la liste à laquelle l'action sera appliquée. Ici, nous choisissons 101 pour indiquer qu'il s'agit d'une document library. Voici quelques unes des valeurs possibles :
Custom List : 100
Document Library : 101
Survey : 102
Links List : 103
Annoucement List : 104
Contacts List : 105
Events List : 106
Task List : 107
Discussion Board : 108
Picture Library : 109
Le but de notre action sera d'étendre l'interface utilisateur, nous devons donc introduire l'élément suivant dans notre élément CustomAction :
Cet élément peut en contenir deux autres : CommandUIDefinitions et CommandUIHandlers. Nous allons utiliser les deux éléments, tapez donc ceci dans l'élément CommandUIExtension :
Nous sommes maintenant près à définir notre action. Nous allons tout d'abord entrer du code dans l'élément CommandUIDefinitions. Comme vous l'avez surement remarqué, le nom de cet élément se termine par "s", il devra donc certainement contenir un élément du même nom mais sans le "s". Effectivement, tapez par exemple ceci :
Cet élément va contenir la définition de l'élément à ajouter dans le ruban. Il n'attend qu'un seul attribut qui est Location. C'est grâce à cet attribut que nous allons définir ou notre bouton va être ajouté dans le ruban. Ici, nous choisissons Ribbon.Library.Share.Controls._children.
Cette Location est construite de manière logique et descendante. Le premier élément sera toujours Ribbon. Ensuite, nous allons ajouter notre bouton dans une document library => .Library. Nous voulons ensuite ajouter l'élément au groupe Share & Track qui se nomme Share => .Share. Enfin, nous indiquons que notre bouton devra être ajouté à la liste des contrôles contenus dans ce groupe, => ._children. Vous trouverez la liste des Location possibles ici.
Ceci définit, nous allons maintenant devoir définir le bouton à ajouter dans ce groupe. Plusieurs éléments sont possibles et nous les verrons à peu près tous au cours des tutoriels contenus dans la section Ribbon. Nous allons commencer par le plus simple c'est-à-dire un simple bouton. Tapez donc ceci :
Cet élément est très simple mais comporte beaucoup d'attributs. Le premier est bien évidemment l'ID du bouton. Nous vous conseillons de définir cet ID en suivant le chemin du bouton. Le deuxième argument permet de nommer l'action qui sera déclenchée lorsque l'on cliquera sur ce bouton. Ce nom sera utilisé plus tard, soyez donc le plus explicite possible. Les deux arguments suivants permettent de définir les images affichées sur le bouton. Le premier attribut permet de définir l'image de taille 16x16 et le deuxième, l'image de taille 32x32.
L'attribut suivant permet simplement de définir le texte affiché en dessous de l'image du bouton. TemplateAlias est utilisé pour indiquer où le contrôle sera placé dans le groupe. Pour l'instant, laissez o2, nous verrons dans le cours sur les template ce que cela signifie. Les deux derniers attributs permettent simplement de définir les propriétés de l'info-bulle qui apparait lorsque vous passez votre curseur sur votre bouton. Le premier définit le titre de l'infobulle et le deuxième définit la description de l'infobulle.
Maintenant que l'affichage du bouton est défini, nous allons passer à l'action de ce dernier. Tout à l'heure, nous avons définit le nom de la commande à exécuter sur ButtonHelloCommand. Tapez donc ceci entre l'élément CommandUIHandlers :
Cet élément va permettre d'indiquer quel commande sera exécutée lorsque l'on cliquera sur le bouton. Le premier attribut de cet élément devra contenir le nom de la commande interceptée. C'est bien évidemment un nom de commande qui devra être associés à un contrôle déclaré précédemment. Ici, nous entrons ButtonHelloCommand qui a été appliquée au contrôle Ribbon.Library.Share.ButtonHello. L'attribut CommandAction permet de définir l'action réalisée. Ici, nous passons simplement du code JavaScript permettant d'afficher une boite à message disant Hello, world.
Voilà, notre première Custom action est terminée. Cliquez maintenant avec le bouton droit sur votre projet et cliquez sur Deploy.
Allez ensuite sur votre site SharePoint, créez une nouvelle librairie de document et cliquez sur l'onglet Library (ou Bibliothèque) et vous verrez ceci :
Notre bouton apparait donc correctement dans le ruban. Et si vous cliquez dessus, vous devriez obtenir :
La fonction JavaScript est donc bien exécutée comme définit dans notre feature]. Pour ceux qui n'auraient pas bien suivi, le code final de notre action est celui-ci :
