Dans la lignée du cours précédents, nous allons voir les notifications. C'est encore plus simple étant donné qu'il n'existe que 2 fonctions d'EcmaScript pour les gérer. Pour ceux qui ne voient pas ce que sont les notifications, voyez la capture d'écran ci-dessous :



Le petit cadre jaune contenant le libellé "Chargement" est une notification. Généralement, ce sont des petits messages indiquant ce que SharePoint est en train de faire et qui disparaissent assez rapidement. Il est très facile d'ajouter ou de supprimer nos propres messages de notifications, nous allons donc créer une Visual Web Part permettant d'illustrer cela.

Ouvrez donc Visual Studio 2010 et créez un nouveau projet de type Empty SharePoint Project que vous nommerez AreaProg.Ecma.Notifications.



Choisissez Deploy as farm solution dans l'écran suivant car nous allons devoir déployer un dossier dans le dossier Layouts de SharePoint. Cliquez ensuite avec le bouton droit de votre souris sur votre projet et choisissez Add > New Item. Dans la fenêtre qui apparaît, choisissez Visual Web Part et nommez-la EcmaNotification :



Pour une question de propreté, cliquez une fois sur l'élément Feature1 et modifiez sa propriété Folder Name sur EcmaNotification (fenêtre de propriété). Rendez-vous ensuite dans le fichier ASCX de votre projet et insérez-y le code suivant :

<input type="text" id="tbValue" /> <input type="checkbox" id="cbSticky" /> <input type="button" id="btnAdd" onclick="javascript:EcmaAddNotification();" value="Add" /><br /><br /> <div id="divNotifications"></div>

Nous commençons par insérer une zone de texte qui permettra d'indiquer le texte à mettre dans la notification. La case à cocher va permettre d'indiquer si la notification disparait automatiquement après quelques secondes ou non. Nous avons ensuite un bouton qui permet d'ajouter la notification sur la page. Enfin, nous plaçons un div qui va contenir le résumé des notifications pouvant être cachés.

Nous allons ensuite ajouter un fichier JavaScript au projet pour contenir notre code. Cliquez donc avec le bouton droit sur votre projet et choisissez Add > Shared "Layouts" Mapped Folder. Cliquez ensuite avec le bouton droit de votre souris sur le dossier AreaProg.Ecma.Notifications et choisissez Add > New Item et choisissez JScript File nommé core.js :



La première chose à faire maintenant est de charger le fichier sp.js au projet et d'inclure le fichier core.js (le nôtre) dans la page. Pour cela, cliquez avec le bouton droit de votre souris sur le fichier ascx et choisissez View Code. Ajoutez ensuite le code suivant :

protected override void OnPreRender(EventArgs e) { ScriptLink.RegisterOnDemand(this.Page, "sp.js", false); Page.ClientScript.RegisterClientScriptInclude("core", "/_layouts/VWPNotification/core.js"); }

Et ajoutez également la directive suivante :

using Microsoft.SharePoint.WebControls;

La première ligne nous permet de charger le fichier sp.js et la seconde ligne permet d'inclure notre fichier JavaScript dans notre page. Rendez-vous ensuite dans le fichier core.js et tapez :

ExecuteOrDelayUntilScriptLoaded(Go, "sp.js"); var loaded = false; function Go() { loaded = true; }

La première ligne appelle la fonction permettant d'attendre que le fichier sp.js soit chargé avant d'exécuter une fonction, en l'occurrence Go. Nous avons également une variable loaded qui va nous permettre de savoir si le fichier est chargé ou non. Ainsi, la fonction Go va simplement initialiser cette variable sur true. Nous faisons cela car le fichier sp.js doit être totalement chargé pour que nous puissions utiliser les objets qu'il contient. Nous devons donc nous assurer qu'il soit entièrement chargé avant de l'utiliser.

Si vous regardez le code ASPX que nous avons introduit dans le code du contrôle, vous remarquerez que le bouton appelle la fonction EcmaAddNotification. Nous implémentons donc celle-ci de la manière suivante :

function EcmaAddNotification() { if (loaded && document.getElementById('tbValue').value != '') { var sticky = document.getElementById('cbSticky').checked; var tbValue = document.getElementById('tbValue'); var nid = SP.UI.Notify.addNotification(tbValue.value, sticky); if (sticky) document.getElementById('divNotifications').innerHTML += "<p id='p_" + nid + "'>" + nid + " - " + tbValue.value + " - <a href='#' onclick=\"EcmaDeleteNotification('" + nid + "')\">Delete</a></p>"; tbValue.value = ''; } }

Nous commençons tout d'abord par vérifier que la variable loaded contient bien true (donc que le fichier sp.js est bien chargé) et que la zone de texte contient quelque chose. Nous initialisons ensuite la variable sticky avec l'état coché ou non du checkbox. sticky contiendra donc true ou false. Nous allons voir à quoi servira cette valeur.

La ligne suivante permet de récupérer une référence à la zone de texte. Enfin, nous utilisons la fonction addNotification de l'objet SP.UI.Notify pour ajouter une notification. Cette fonction prend 2 paramètres. Le premier permet simplement de définir le message qui sera affiché dans la notification. Le deuxième paramètre, quant à lui, permet d'indiquer si la notification sera sticky ou non. Si nous passons true à ce paramètre, la notification ne disparaîtra pas d'elle-même. Dans le cas contraire, la notification disparaitra après quelques secondes. Nous récupérons également la valeur renvoyée dans la variable nid. Cette valeur est simplement l'id de la notification.

Si la notification est sticky, celle-ci ne disparaîtra pas automatiquement, il faudra donc ajouter un lien de suppression dans le div que nous avons placé dans le code ASPX du contrôle, c'est l'utilité de la condition. Comme vous voyez, nous utilisons la fonction EcmaDeleteNotification pour supprimer la notification. Ajoutez donc le code suivant dans votre fichier core.js :

function EcmaDeleteNotification(nid) { document.getElementById("p_" + nid).style.display = 'none'; SP.UI.Notify.removeNotification(nid) }

Ce code permet tout d'abord de cacher le paragraphe contenant le lien de suppression sur lequel nous venons de cliquer. Ensuite, nous utilisons la fonction removeNotification en faisons passer le nid de la notification. Compilez, déployez votre solution et placez la Web Part sur une page de votre site. Ajoutez ensuite une notification sans cliquer la case à cocher :



Si vous attendez quelques secondes, le message disparaitra automatiquement. Ajoutez maintenant 3 notifications en cliquant la case à cocher :



Cette fois, les 3 notifications s'affichent mais ne disparaissent pas automatiquement. Cliquez maintenant sur le deuxième Delete :



Comme vous le voyez, la notification a bien disparue, mais les autres restent affichée.

Télécharger les sources de l'exemple