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.
Si vous n'avez jamais personnalisé le ruban SharePoint, nous vous conseillons fortement de lire le cours précédent.
Ajouter un groupe
Nous allons maintenant voir comment ajouter un groupe dans le ruban SharePoint. La première chose à faire est de déclarer une nouvelle Custom action. Utilisez le squelette nécessaire à l'ajout d'un élément dans le ruban :
Pour l'instant, rien ne vous est inconnu. Nous allons maintenant devoir utiliser l'élément CommandUIDefinition pour débuter la définition du groupe, tapez donc ceci entre l'élément CommandUIDefinitions :
Ici, nous devons ajouter notre action au sein des groupes de la liste, pour cela, la Location utilisée sera Ribbon.Library.Groups._children. Nous allons maintenant devoir définir notre groupe, tapez donc ceci :
L'attribut Template sera expliqué dans le cours suivant, ne vous en préoccupez donc pas pour l'instant et laissez la valeur de l'exemple. L'attribut Sequence permet de définir la position du groupe. Mettre un grand nombre assure qu'il sera en dernière position. Il est possible de retrouver dans le fichier CMDUI.XML les numéros de séquence des autres groupes.
L'étape suivante consiste à définir la collection de contrôles de ce groupe. Cette collection permettra de contenir les boutons et autres contrôles du groupe. Pour ce faire, tapez :
Ensuite, il nous suffit de peupler notre collection de contrôle devant apparaître dans le groupe. Voici un exemple :
Ici, nous ajoutons simplement 4 boutons dans le groupe. Encore une fois, ne vous inquiétez pas sur la signification de l'attribut TemplateAlias, nous expliquerons ça dans le cours suivant. Cependant, ce n'est pas fini, il est nécessaire de définir un Scaling pour les groupes, cela permet de définir de quelle manière ceux-ci s'affichent. Tapez donc ceci en tant que nouvel élément de CommandUIExtensions :
Nous n'entrerons pas dans les détails du Scaling pour l'instant, effectivement, nous verrons cela plus en détails dans un autre cours. La dernière chose à faire pour cette action est de définir les commandes pour chaque bouton. Ici, nous allons encore une fois utiliser du JavaScript. Tapez donc ceci entre les éléments
Il n'y a rien de bien compliqué dans ce code. Nous reprenons à chaque fois l'attribut Command des boutons et nous leur lions une commande JavaScript. Si vous déployez votre feature et que vous vous placez dans une librairie de document, vous devriez voir apparaitre ce groupe dans l'onglet Library (ou Bibliothèque).
Vous pourrez constater que si vous cliquez sur les boutons, la commande appropriée est bien exécutée. Vous pourrez aussi remarquer qu'étant donné que les 3 boutons de droite apparaissent en 16x16, c'est bien l'image de l'attribut Image16by16 qui apparaît. Voici le code complet de notre action :
