[SharePoint 2010] Statuts et notifications pour vos développements

Grâce à l’api SharePoint ECMA Script (communication JavaScript et SharePoint), nous avons accès à plusieurs fonctions très utiles pour nos développements. Ce qui nous permet de les rendre dynamique et moderne.

Je vais vous présenter ici 2 systèmes permettant de gérer des états ainsi que des messages de notifications de manière très simple et sans postback.

imageimage

 

Gérer des statuts:

Vous l’avez surement remarqué dans votre console d’administration, ce genre de message :

image

 

Ce message est un statut. Nous allons voir ici comment ajouter/modifier et supprimer ce genre de statuts.

Il faut utiliser l’objet SP.UI.Status (lien msdn) qui possède différentes fonctions:

SP.UI.Status.addStatus => Ajouter un statut dans la page.

SP.UI.Status.appendStatus  => Rajouter du texte à un statut déjà existant dans la page.

SP.UI.Status.updateStatus => Mettre à jour un statut.

SP.UI.Status.setStatusPriColor => Choisir une couleur de fond.

SP.UI.Status.removeStatus => Supprimer un statut spécifique.

SP.UI.Status.removeAllStatus => Supprimer tous les statuts.

Je pense que les fonctions parlent d’elle-même, il n’y a plus qu’à choisir.

Voyons quand même un petit exemple :

var statusId = '';

function AddStatus() {
    statusId = SP.UI.Status.addStatus("Statut", "Opérationnel", false);
    SP.UI.Status.setStatusPriColor(statusId, 'green');
}

function UpdateStatus() {
    statusId = SP.UI.Status.updateStatus(statusId, "Erreur");
    SP.UI.Status.setStatusPriColor(statusId, 'red');
}

function RemoveStatus() {
    SP.UI.Status.removeStatus(statusId);
}

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, « Courier New », courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, « Courier New », courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Le boolean dans la fonction “addStatus” permet de gérer le placement dans le cas ou il y a plusieurs statuts sur la même page (à true, il apparaitra en haut de la liste).

On sauvegarde l’id du statut afin de pouvoir le gérer (rajout de texte, mise à jour, supprimer ou encore couleur de fond).

Pour finir, il faut savoir que le script sp.js doit être complètement chargé pour que l’objet SP.UI.Status fonctionne.  Il faut utiliser la fonction “ExecuteOrDelayUntilScriptLoaded” qui exécutera votre fonction une fois le fichier sp.js totalement chargé (vous pouvez bloquer ou cacher vos boutons en attendant par exemple).

ExecuteOrDelayUntilScriptLoaded(Show, 'sp.js');  
   
function Show() {  
    document.getElementById('btnAdd').style.display = "block";  
}  

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, « Courier New », courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Gestion des notifications :

Il y a de multiple notification lorsque vous naviguez dans votre portail SharePoint :

image

Il s’agit du même principe que précédemment tout en utilisant cette fois l’objet SP.UI.Notify qui ne possède que 2 fonctions associées :

SP.UI.Notify.addNotification => Ajouter une notification.

SP.UI.Notify.removeNotification => Supprimer une notification.

Exemple:

var notifyId = '';

function AddNotification() {
    notifyId = SP.UI.Notify.addNotification("Statut opérationnel", true);
}

function RemoveNotification() {
    SP.UI.Notify.removeNotification(notifyId);
}

Le deuxième paramètre dans la fonction addNotification permet d’indiquer si la notification sera permanente ou non. Ici, avec le paramètre à true, la notification ne disparaitra pas toute seule. A l’inverse, à false, la notification disparaitra après quelques secondes.

Comme pour le statut, nous sauvegardons l’id de la notification afin de pouvoir le supprimer.

De même que précédemment, le script sp.js doit être totalement chargé, alors faites pareil que plus haut !

About these ads

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

Suivre

Recevez les nouvelles publications par mail.

%d blogueurs aiment cette page :