Référencer le fichier JavaScript

/>

Pour cela, nous allons devoir créer un « User Control » que nous allons insérer dans le « Delegate Control ». Faites donc un clic droit sur votre projet et choisissez Add > New > SharePoint Mapped Folder. Dans la fenêtre qui s’affiche, déroulez le dossier « TEMPLATE » et choisissez le dossier « CONTROLTEMPLATES ». Faites ensuite un clic droit sur le dossier contenu dans le dossier mappé, choisissez Add > New Item > User Control et nommez-le « ITProMag.MyPC.DelegateControl.ascx ». Supprimez le fichier « ITProMag.MyPC.DelegateControl.ascx.cs », ouvrez le fichier « ascx » et remplacez son contenu par ce code.

Cet « User Control » contient simplement une référence JavaScript vers notre fichier. Enfin, nous allons devoir insérer ce contrôle dans le « Delegate Control » des « header ». Pour cela, ouvrez votre fichier « Elements.xml » et ajoutez cette ligne.

Cela permet simplement d’insérer notre « User Control » dans le « Delegate Control AdditionalPageHead » qui se trouve dans la balise « head » de la page. Vous pouvez maintenant déployer et tester votre programme. Rendez-vous donc sur une liste générique et afficher l’onglet « Items ». Etant donné qu’aucun élément n’a été sélectionné, notre contrôle n’est pas disponible. Maintenant, si vous sélectionnez un élément (voir figure 7) et que vous cliquez sur votre bouton (voir figure 8), la commande est bien exécutée.

Référencer le fichier JavaScript

Avant de clôturer ce tutoriel, j’aimerai juste attacher le débuggeur à l’exécution de notre code JavaScript pour bien voir les fonctions qui sont exécutées. Placez donc des points d’arrêts aux différentes fonctions de notre fichier JavaScript. Exécutez ensuite votre projet en appuyant sur F5 et rendez-vous sur une liste générique. La commande « init » va alors être exécutée car notre « Page Component » va être ajouté au Ribbon de la liste générique. La fonction « getGlobalCommands » a également été exécuté permettant ainsi de renseigner le « dispatcher » sur les commandes que peut intercepter notre « Page Component ».

Allez maintenant dans l’onglet « Items ». Cette fois, c’est la commande « canHandleCommand » qui est appelée. Effectivement, la fonction « getGlobalCommands » a indiqué au « Ribbon » que notre « Page Component » peut traiter la commande « RedoButtonClick ». Donc, quand le bouton va être affiché, le Ribbon va automatiquement appeler la fonction « canHandleCommand » de notre « Page Component ».

La valeur de l’argument « commandId » est bien « RedoButtonClick ». Et vous pouvez remarquer que cette fonction n’est appelée que pour cette commande. En effet, le « dispatcher » n’appelle pas notre « Page Component » pour toutes les commandes lancées par le Ribbon, justement parce que la fonction « getGlobalCommands » a indiqué quelles commandes notre « Page Component » peut traiter.

Sélectionnez ensuite un élément. Encore une fois, la fonction « canHandleCommand » est appelée, mais cette fois, étant donné qu’un élément est sélectionné, elle renvoie « true ». Ainsi, lorsque nous cliquons sur notre bouton, la fonction « handleCommand » est exécutée et le nom de la commande est passé en paramètre.

Voilà, cette fois, c’en est bien fini de ce cours qui a expliqué comment faire un « Page Component » simple. Dans le prochain article, nous verrons comment faire un « Page Component » plus évolué pour, par exemple, remplir un « Split Button » dynamiquement.

Vous pouvez télécharger les sources de l’exemple expliqué dans ce cours à cette adresse.