Utiliser le dispatcher

Ce code va donc ajouter un nouveau bouton dans le groupe « New » des listes génériques. Celui-ci va utiliser deux images. Faites donc un clic droit sur votre projet de choisissez Add > New > SharePoint « Images » Mapped Folder.

Toutes les images se trouvant dans ce dossier seront automatiquement uploadées dans le dossier système « Images » de Sharepoint. Visual Studio crée automatiquement un dossier du nom de votre projet pour bien séparer vos différents développements. Nous ajoutons ces images dans ce dossier.

Celles-ci doivent être nommées « redo16x16.jpg » et « redo32x32.jpg ». Bien que ces images soient au format jpg, nous vous conseillons d’opter pour des images au format png, ainsi le Ribbon pourra mieux gérer la transparence de celles-ci.

A l’heure actuelle, votre « feature » se contente simplement d’ajouter un bouton dans le Ribbon. Si vous vouliez effectuer des actions lors du clic du bouton, il vous suffirait de lui attribuer une commande et de faire un « CommandUIHandler » interceptant celle-ci pour effectuer différentes opérations.

C’est effectivement une solution, mais ici, nous allons voir comment le faire en passant par un « Page Component ». Comme vous vous en doutez, un « Page Component » est une série d’instructions JavaScript qui vont permettre d’ajouter votre contrôle/groupe/onglet comme élément à part entière du Ribbon. Avant d’aller plus loin dans les explications, faites un clic droit sur votre projet et choisissez Add > New > SharePoint « Layouts » Mapped Folder. Faites ensuite un clic droit sur le dossier créé dans le dossier « Layouts » et faites Add > New Item. Dans la fenêtre qui s’ouvre, sélectionnez « JScript File » et nommez-le « ITProMag.MyPC.js ».

Comme nous l’avons vu précédemment, le Ribbon dispose d’un « dispatcher ». En fait, celui-ci va se charger de rediriger les différentes commandes vers les différents fichiers JavaScript de SharePoint. Il faut voir ce « dispatcher » comme un routeur. Le Ribbon est un ensemble de contrôles pouvant lancer un ensemble de commande. Lorsque l’on va cliquer sur un bouton, le Ribbon va passer la commande au « dispatcher ». De manière simplifiée, celui-ci dispose d’une table des commandes indiquant quelles fonctions JavaScript sont attachées à ces commandes. Ainsi, lorsqu’il reçoit une commande, il exécute directement les fonctions JavaScript attachées à celle-ci.

Pour pouvoir faire cela, le « dispatcher » doit être capable de discuter avec votre « Page Component » comme il le fait avec ceux de SharePoint. Pour cela, nous allons devoir implémenter une « interface » JavaScript pour assurer au « dispatcher » que les commandes qu’il essaye d’exécuter sont bien présentes.

Avant toute chose, pour pouvoir enregistrer votre « Page Component » dans le Ribbon, vous allez devoir attendre que celui-ci soit entièrement chargé, tapez donc ceci dans votre fichier « JavaScript » :

ExecuteOrDelayUntilScriptLoaded(registerMyPC, ‘SP.Ribbon.js’);
function registerMyPC() {
}

Ici, nous allons simplement attendre que le fichier JavaScript relatif au Ribbon (SP.Ribbon.js) soit entièrement chargé. Une fois celui-ci chargé, nous passons le relai à la fonction « registerMyPC » qui va se charger d’enregistrer votre « Page Component » dans le Ribbon. Bien entendu, le code va être légèrement plus compliqué que dans notre ancienne méthode mais sa logique le rend très accessible.

Pour aller plus loin sur iTPro.fr

Développement d’un Page component simple

Développement d’un Page component simple

Implémentation d’une fonction

Implémentation d’une fonction

Utiliser le dispatcher · iTPro.fr

Utiliser le dispatcher