> Mobilité > Intégrer un Page Component au ruban

Intégrer un Page Component au ruban

Mobilité - Par Sébastien Sougnez - Publié le 31 août 2011
email

Nous avons défini dans le précédent dossier la fonction permettant au Ribbon de savoir quelles commandes notre « Page Component » peut traiter et la fonction permettant d’indiquer si notre « Page Component » est capable de traiter la demande.

Nous allons maintenant implémenter la fonction permettant d’exécuter les commandes.

Intégrer un Page Component au ruban

handleCommand: function (commandId, properties, sequence) {

alert(‘The command « ‘ + commandId + ‘ » has been fired’);
return true;

}

Cette fonction sera automatiquement appelée si notre « Page Component » reçoit une commande et que celui-ci a renvoyé « true » dans sa fonction « canHandleCommand ». Le paramètre « commandId » est encore une fois le nom de la commande à traiter. « properties » contient certaines propriétés relatives à notre contrôle. Enfin « sequence » est l’ordre de la commande.

Notre « prototype » est maintenant terminé. Nous allons maintenant devoir créer quelques fonctions pour pouvoir enregistrer notre « Page Component » dans le Ribbon. La première de celle-ci va permettre de récupérer une instance de notre « Page Component ». Ici, nous allons nous baser sur le « Design Pattern » du « Singleton » pour être sûr de créer qu’une seule instance de notre « Page Component » :

ITProMag.MyPC.PageComponent.get_instance = function () {

if (SP.ScriptUtility.isNullOrUndefined(ITProMag.MyPC.PageComponent.singleton))
ITProMag.MyPC.PageComponent.singleton = new ITProMag.MyPC.PageComponent();

return ITProMag.MyPC.PageComponent.singleton;
}

Le « Design Pattern » du « Singleton », pour ceux qui ne connaissent pas, est assez simple. En gros, si un objet ne contient pas une référence, il va créer cet objet et le renvoyer, tout en le gardant en mémoire. Ainsi, quand nous allons devoir accéder de nouveau à cet objet, il suffira de renvoyer cette référence et non de la recréer. Cela permet d’être sûr qu’on ne crée pas plus d’une instance du même objet. Ici, nous regardons si l’objet « ITProMag.MyPC.PageComponent.singleton » est null. Si c’est le cas nous le créons. Enfin, nous renvoyons cet objet.

Passons maintenant à la fonction qui va permettre d’ajouter notre « Page Component » à ceux du Ribbon.

ITProMag.MyPC.PageComponent.registerWithPageManager = function () {
SP.Ribbon.PageManager.get_instance().addPageComponent(ITProMag.MyPC.PageComponent.get_instance());
}

Nous récupérons simplement l’instance du « Page Manager » grâce à son API et nous appelons sa fonction « addPageComponent » pour ajouter le nôtre. Nous faisons passer la référence à celui-ci pour l’enregistrer. Nous allons également implémenter une fonction permettant de retirer notre « Page Component ».

ITProMag.MyPC.PageComponent.unregisterWithPageManager = function () {
if (SP.ScriptUtility.isNullOrUndefined(ITProMag.MyPC.PageComponent.singleton) == false)
SP.Ribbon.PageManager.get_instance().removePageComponent(ITProMag.MyPC.PageComponent.get_instance());
}

Ici, nous vérifions d’abord que l’objet « singleton » n’est pas null. Effectivement, seule la fonction « registerWithPageManager » crée une référence à notre « Page Component », donc si cette référence n’existe pas, c’est que notre « Page Component » n’a pas été ajouté au Ribbon. Dans le cas contraire, nous appelons la fonction « removePageComponent » du « Page Manager » pour retirer notre « Page Component ».

Nous allons maintenant exécuter cette instruction pour enregistrer la classe que nous venons de créer :

ITProMag.MyPC.PageComponent.registerClass(« ITProMag.MyPC.PageComponent »,
CUI.Page.PageComponent);

La fonction registerClass est définie dans la classe « Type » et permet d’enregistrer notre classe comme étant un « Page Component » (deuxième paramètre). Ensuite, nous appelons notre fonction « registerWithPageManager » pour ajouter notre « Page Component » au « Ribbon ».

ITProMag.MyPC.PageComponent.registerWithPageManager();

Tapez également l’instruction suivante :

NotifyScriptLoadedAndExecuteWaitingJobs(« ITProMag.MyPC.js »);

Cette fonction n’est en rien obligatoire, mais elle permet simplement de notifier que notre « Page Component » a fini de se charger (au cas où d’autre fichier JavaScript attendrait cela pour s’exécuter).

Téléchargez cette ressource

Les 10 tendances clés de l’Expérience Client (CX) pour 2025

Les 10 tendances clés de l’Expérience Client (CX) pour 2025

Dans le contexte actuel, l'expérience client est un levier clé de réussite. Pour rester compétitives, les entreprises doivent adopter des stratégies CX audacieuses, en s'appuyant sur le cloud, le digital et l'IA. Alors quelles stratégies mettre en place pour garder une longueur d’avance ?

Mobilité - Par Sébastien Sougnez - Publié le 31 août 2011