Créer un message d’attente pour un traitement long dans SharePoint

Dans ce billet, je vais vous expliquer comment on peut afficher un message d’attente lorsqu’on vous avez un traitement long à exécuter dans SharePoint. J’utilise l’API de SharePoint afin de ne pas réinventer la roue. De plus, ça permet de rester uniforme avec l’ensemble de la plateforme si notre message d’attente à le même aspect visuel partout.

Par défaut, le message de chargement ressemble à ceci :

WorkingOnIt

On peut faire afficher cette fenêtre en utilisant le code JavaScript suivant :

 

SP.UI.ModalDialog.showWaitScreenWithNoClose(SP.Res.dialogLoading15);

Bien sûr, on peut rendre l’expérience utilisateur plus conviviale en affichant un message de chargement personnalisé.

custom

Il suffit d’appeler la même méthode mais cette fois-ci en spécifiant deux paramètres supplémentaires pour modifier les messages affichés.

 

SP.UI.ModalDialog.showWaitScreenWithNoClose('Loading', 'Custom message');

 

Maintenant comment peut-on intégrer ce code JavaScript dans un bouton avec du code serveur ?

Tout d’abord, dans un formulaire vous vous ajoutez un bouton avec un appel à une fonction « btnSoumettre_Click » sur l’événement serveur « OnClick ». Cette fonction nous servira comme une poignée pour fermer le message d’attente lorsque le traitement long sera terminé. Ensuite, on ajoute un appel au message d’attente comme vu précédemment. Bien sûr on peut mettre le code du OnClientClick dans une fonction réutilisable mais pour des raisons de simplicité de l’exemple je ne l’ai pas fait.

<asp:button ID="btnSoumettre" runat="server" Text="Soumettre" OnClick="btnSoumettre_Click" OnClientClick="javascript:SP.UI.ModalDialog.showWaitScreenWithNoClose('Veuillez patienter', 'Le formulaire est en cours d`enregistrement'); />

Finalement dans le code behind de votre formulaire personnalisé on ajoute le code suivant pour la fonction « btnSoumettre_Click ». Tout de suite après votre traitement long, ce bout de code se chargera de fermer la fenêtre de chargement.

//Insérer traitement long...

this.ClientScript.RegisterStartupScript(this.GetType(), "CloseWaitDialog", @"
<script language='javascript'>
if (window.frameElement != null) {
   if (window.parent.waitDialog != null) {
       window.parent.waitDialog.close();
   }
}
</script>");

En conclusion, c’est « Out of the box » alors c’est à mon avis l’option à privilégier au lieu de développer un « spinner » de chargement personnalisé.

Advertisements

Laisser un commentaire

Entrer les renseignements ci-dessous ou cliquer sur une icône pour ouvrir une session :

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