Implémentation d’une fonction

de notre « namespace ». Nous allons ensuite créer un objet représentant notre « Page Component » :

ITProMag.MyPC.PageComponent = function () {
ITProMag.MyPC.PageComponent.initializeBase(this);
};

Comme vous le voyez, nous utilisons bien le « namespace ITProMag.MyPC » enregistré un peu plus haut. Ici, quand nous allons créer un objet du type « ITProMag.MyPC.PageComponent », cette fonction (une sorte de constructeur) va simplement appeler la fonction « initializeBase » de la classe parent (« Type ») en lui faisant passer l’objet courant.

Nous allons maintenant créer le prototype de notre classe. Le prototype va donc permettre de définir toutes les méthodes et propriétés attachées à notre objet.

ITProMag.MyPC.PageComponent.prototype = {
}

Nous rajoutons simplement « .prototype » au nom de notre objet. Nous allons devoir indiquer au « Ribbon » le nom des différentes commandes que notre « Page Component » va être en mesure de traiter. Ici, nous allons faire simple, le bouton affichera simplement une boite de dialogue lorsque l’on cliquera dessus. Cependant, même si notre « Page Component » ne doit gérer qu’une seule commande, nous devons renvoyer celle-ci dans un tableau. Nous déclarons donc celui-ci :

commands: null,

Nous allons ensuite devoir implémenter une fonction « init » qui sera appelée par le « Ribbon » lors de l’initialisation de notre « Page Component ».

init: function () { },

Même si celle-ci est vide, nous la déclarons pour que SharePoint ne soit pas bloqué lorsqu’il va essayer de l’exécuter via le « Ribbon ». Comme nous l’avons vu tout à l’heure, nous allons devoir indiquer au « Ribbon » le nom des différentes commandes que notre « Page Component » va pouvoir traiter. Nous allons donc implémenter une fonction qui va permettre de construire ce tableau.

buildCommands: function () {
if (SP.ScriptUtility.isNullOrUndefined(this.commands)) {
this.commands = [];
this.commands[this.commands.length] = ‘RedoButtonClick’;
}

return this.commands;
},

Nous commençons tout d’abord par vérifier que le tableau n’a pas encore été initialisé. Nous allons bien entendu utiliser le tableau « commands » déclaré précédemment. Pour vérifier la nullité d’un objet en JavaScript, SharePoint met à disposition une fonction nommée « isNullOrUndefined » qui va renvoyer « true » si l’objet est null ou « false » dans le cas contraire.

SI ce tableau n’est pas défini, nous le créons et nous lui ajoutons l’élément « RedoButtonClick ». Cet élément correspond à une commande que notre « Page Component » va pour intercepter. Si nous avons défini ce tableau, ce n’est pas pour rien. Effectivement, le « Ribbon » de SharePoint va appeler une fonction de notre « Page Component » pour connaitre ce tableau. Cette fonction se nomme « getGlobalCommands », nous allons donc devoir l’implémenter :

getGlobalCommands: function () {
return this.buildCommands();
},

Ici, nous nous contentons simplement de renvoyer le tableau renvoyé par la fonction « buildCommands » que nous avons implémenté un peu avant. La chose à bien comprendre est que le Ribbon va automatiquement appeler cette fonction pour connaître le nom des fonctions que notre « Page Component » PEUT traiter. Autrement dit, dès que la commande « RedoButtonClick » sera exécutée, le « dispatcher » redirigera l’exécution du code dans notre « Page Component ».

Maintenant que nous avons rerouté le « dispatcher » dans notre « Page Component », nous allons devoir implémenter une fonction qui permet d’indiquer si le « Page Component » est capable de traiter la commande.

canHandleCommand: function (commandId) {

var items = SP.ListOperation.Selection.getSelectedItems();

if (SP.ScriptUtility.isNullOrUndefined(items) || items.length == 0)
return false;

return true;

},

Ici, il faut bien faire la différence entre le fait de « pouvoir recevoir la commande » et « être capable de traiter la commande ». Imaginons que notre bouton sert à supprimer des éléments. Nous pourrions indiquer au Ribbon que nous pouvons recevoir la commande « DeleteItem », ainsi, notre « Page Component » sera appelé. Cependant, si aucun élément n’est sélectionné, nous sommes dans l’impossibilité de supprimer l’élément, notre « Page Component » n’est donc pas capable de traiter la commande. Cependant, il est primordial qu’il soit informé que la commande a été lancée. Justement pour vérifier qu’un élément a été sélectionné ou non.

Pour en revenir à la commande « canHandleCommand », celle-ci va donc permettre d’indiquer si oui ou non elle peut traiter la commande en l’état actuel des choses. L’argument « commandId » est simplement le nom de la commande à traiter.

Nous récupérons d’abord une référence aux éléments sélectionnés dans la liste et la plaçons dans la variable « items ». Nous vérifions ensuite que cette variable n’est pas null et qu’au moins un élément a été sélectionné. Si ce n’est pas le cas, nous renvoyons « false », ce qui aura pour effet de griser le bouton. Par contre, si un élément a bien été sélectionné, nous renvoyons « true » pour activer le bouton.

À suivre la suite du dossier :

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