Utiliser les composants AJAX d`interface utilisateur

Utiliser les composants AJAX d’interface utilisateur
avec des messages provenant d’un formulaire infopath
2010
Rédacteur : Laurent Mrejen
Date : Mars 2011
Introduction
Infopath 2010 est un outil permettant la construction de formulaires interactifs, que l’on peut
envoyer par messagerie, visualiser hors ligne… . Les nouvelles possibilités offertes par cette nouvelle
version comme la refonte ergonomique de l’éditeur, une meilleure intégration dans SharePoint avec
la possibilité de personnaliser les formulaires de listes etc, font d’infopath 2010 un compagnon idéal
dans la personnalisation et la construction d’applications métiers sur SharePoint.
Néanmoins, malgré beaucoup de nouveautés, Infopath 2010 ne permet pas, de façon instantanée, de
communiquer avec l’interface AJAX de Sharepoint 2010. Vous ne voyez peut être pas de quoi je
parle. Sharepoint 2010 arrive avec un jeu de composants nouvellement crée permettant une
meilleure expérience utilisateur. Ainsi, une barre de statut a vu le jour en dessous du ruban. Cette
dernière affiche des messages de notifications sous différentes couleurs suivant l’état du message.
Un autre composant fort utile est la fenêtre de notification, une petite fenêtre s’affichant sur la
droite et donnant une information sur l’exécution d’un traitement.
Figure 1 : Fenêtre de notification (image du blog de Chris O’brien)
Figure 2 : Barre de statut (image du blog de Chris O’brien
Malgré de nombreuses nouveautés sur Infopath 2010, il n’était pas possible (à ma connaissance et
j’ai cherché ;-) ) d’utiliser nativement ces composants pour prévenir l’hôte qu’une action dans le
formulaire est en cours ou est terminée et qu’il faut afficher un message à l’aide d’un des deux
composants AJAX présentés plus haut. A la fin, voila ce que vous devez obtenir :
Notre formulaire
Notre notification du traitement
Dans ce tutoriel nous allons voir comment construire une liaison entre le site sharepoint hôte et le
composant form webpart affichant le formulaire.
Etat des lieux avant le développement
Avant de commencer à parler de développement, analysons déjà ce qu’infopath 2010 nous offre
comme possibilité d’intéraction avec SharePoint 2010. Nous savons que la form webpart permet
d’embarquer un formulaire infopath dans une page de composants webpart. Cette webpart est
connectable avec d’autres webpart par le biais de la connexion webpart classique. Dans infopath
2010, cela se traduit par la promotion de propriétés de connexion ci-dessous :
Par ailleurs, nous savons aussi qu’il est possible de forcer un évènement comme le clic sur un bouton
ou le changement d’une valeur dans une liste déroulante à envoyer un message au serveur et cela en
jouant sur les propriétés du contrôle comme dans la figure ci-après :
Maintenant, nous allons ajouter une demande spécifique d’envoi de données pour mettre à jour la
connexion webpart. Pour ce faire, nous rajoutons dans notre bouton la règle suivante
« SendToSharePoint ». Cette règle possède juste une action d’envoi de données vers les connexions
webparts.
Récapitulons. A l’aide des outils et composants natifs, nous pouvons :
- Intégrer un formulaire dans une page sharepoint
-
Connecter ce formulaire avec une autre webpart présente dans la page
-
Dans l’outil de conception, créer un champ utilisable pour cette connexion
-
Créer une règle ou un code .net de modification de la valeur de ce champ à la fin du traitement
considéré.
o Cela va permettre de créer une connexion de données avec une autre webpart
-
Forcer le formulaire à renvoyer toujours la valeur modifiée du champ.
o Cela forcera la page à se recharger et donc à un code javascript à s’exécuter
Ce que nous n’avons pas reste donc un interpréteur de la valeur de ce champ pour entrainer
l’affichage d’une fenêtre de notification. Il ne nous reste donc plus qu’à le créer !
Création de la webpart de consommation du message infopath
Comme nous l’avons vu précédemment, nous pouvons relier notre formulaire embarqué dans une
page via une form webpart avec un autre composant webpart. Nous allons maintenant créer cette
webpart qui va transmettre l’ordre à la page d’afficher la fenêtre de notification. Tout d’abord, nous
allons expliquer comment marche cette fenêtre de notification.
La fenêtre de notification est un composant SharePoint natif utilisant la technologie AJAX. C'est-àdire qu’il s’exécute localement sur le poste client et est instanciable à l’aide d’un code javascript
comme le suivant :
SP.UI.Notify.addNotification('Mon premier message')
Ce que nous allons faire est donc une webpart qui va générer ce code dans la page et qui va
remplacer le texte dans la parenthèse par la valeur du message provenant de la variable Message du
formulaire.
Voila un exemple de code source permettant de créer le composant webpart :
[ToolboxItemAttribute(false)]
public class DisplayFormMessageWebPart : WebPart
{
private IWebPartField MessageProvider;
private object MessageValue;
private void GetFieldValue(object fieldValue)
{
MessageValue = fieldValue;
}
[ConnectionConsumer("FormMessage")]
public void SetConnectionInterface(IWebPartField provider)
{
MessageProvider = provider;
}
protected override void CreateChildControls()
{
Literal l = new Literal();
if (MessageProvider != null)
{
MessageProvider.GetFieldValue(new FieldCallback(GetFieldValue));
if (MessageValue.ToString() != string.Empty)
{
l.Text = "<script type='text/javascript'>" +
"function ShowMessage(){" +
"SP.UI.Notify.addNotification('" + MessageValue.ToString() + "');}\n" +
"ExecuteOrDelayUntilScriptLoaded(ShowMessage, \"sp.js\");</script>";
;
}
}
this.Controls.Add(l);
}
}
Expliquons un peu ce code :
Ce composant possède une variable de type IWebPartField. C’est ce champ qui va recevoir la valeur
de la variable Message du formulaire infopath. Ce type de champ est disponible dans l’API .net pour
permettre la connexion entre webparts.
Pour recevoir la valeur d’un autre composant webpart, il est nécessaire d’instancier les deux
fonctions « GetFieldValue » et « SetConnectInterface ». La fonction « GetFieldValue » renseigne la
valeur du message du formulaire infopath et « SetConnectionInterface » rend disponible la liaison
lors du paramétrage de la webpart dans la page (n’oubliez pas de renseigner la propriété
« ConnectionConsumer »).
Le reste du code .net ne fait qu’écrire si la connexion existe et si le message n’est pas un code
javascript dans la page.
J’aimerai quand même attirer votre attention sur l’utilisation de la fonction javascript présente dans
l’api Sharepoint « ExecuteOrDelayUntilScriptLoaded() ». Cette dernière est nécessaire pour que
l’affichage de votre fenêtre de notification se fasse sans erreur et après le chargement du framework
javascript. Si vous ne l’utilisiez pas, vous auriez une erreur.
Et voila vous n’avez plus qu’à compiler votre webpart et à la déployer dans une solution (sandbox si
vous êtes sur le cloud) et à l’ajouter dans votre page.
Conclusion
Dans ce tutoriel, nous avons vu comment créer un connecteur entre un formulaire infopath 2010
embarqué dans une form webpart et les contrôles AJAX SharePoint.
Pour aller plus loin, vous pourriez modifier le code de la webpart de connexion afin de rediriger le
message vers la barre de statut et de changer la couleur de cette dernière suivant la nature du
message. Vous pourriez aussi ajouter une variable à mettre dans la toolpart permettant de
paramétrer l’endroit où la notification va s’afficher.