Archives mensuelles : juin 2014

Déployer une page contenant une webpart via un module (XML déclaratif)

Introduction

Il y a plusieurs façon de créer une page avec une WebPart mais bien souvent cela requiert plusieurs lignes de codes. C’est pourtant si simple avec un module XML et cela comporte de nombreux avantages.

Comment faire?

1 – Ajout du module

Pour commencer, on crée un projet vide SharePoint 2013 et on y ajoute un module.

ModuleDeployerPage

On retrouve alors dans le fichier elements.xml du module le contenu suivant :

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
 <Module Name="ModuleDeployerPage">
 <File Path="ModuleDeployerPage\Sample.txt" Url="ModuleDeployerPage/Sample.txt" />
 </Module>
</Elements>

Au lieu de copier le contenu d’une page, on va réutiliser un modèle de page natif (viewpage.aspx) alors peut tout simplement supprimer le fichier Sample.txt.

Dans la balise <Module> on ajoute le paramètre SetupPath= »pages\ » 

Ce paramètre permet d’indiquer le chemin d’accès physique à un dossier dans le répertoire d’installation de SharePoint Foundation (%ProgramFiles%\Common Files\Microsoft Shared\web server extensions\15\TEMPLATE) qui contient un fichier à inclure dans le module.

Par la suite dans la balise <File> on ajoute deux paramètres très important soit Url et Path  :

Url= »PageDeployeParModuleXML.aspx » Path= »viewpage.aspx »

Le paramètre Url permet d’indiquer le chemin d’accès virtuel pour le fichier.

Le paramètre Path permet d’indiquer le chemin d’accès physique au fichier par rapport au fichiers template contenu dans le répertoire d’installation de SharePoint Foundation (%ProgramFiles%\Common Files\Microsoft Shared\web server extensions\15\TEMPLATE\SiteTemplates\Site_Definition)

Il y a plusieurs autres modèles de pages natives que l’on peut utiliser.

Ex : spstd1.aspx

ModuleDeployerPageTemplate

Ces autres fichiers se retrouvent sous : C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\1033\STS\DOCTEMP\SMARTPG

Jusqu’à maintenant, notre fichier elements.xml devrait ressembler à ceci :

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<Module Name="ModuleDeployerPage" <strong>SetupPath="pages\">
<File Url="PageDeployeParModuleXML.aspx" Path="viewpage.aspx">
</File>
</Module>
</Elements>

2 – Ajout d’une webpart

Pour les besoins de cet exemple, j’utilise une Visual WebPart mais il est aussi possible de le faire avec les autres types de Webpart.

ModuleDeployerPageWebPart

Si on ouvre le fichier VisualWebPart.webpart on peut voir le contenu XML suivant :

<?xml version="1.0" encoding="utf-8"?>
<webParts>
 <webPart xmlns="http://schemas.microsoft.com/WebPart/v3">
 <metaData>
 <type name="POC.SharePoint.Module.VisualWebPart.VisualWebPart, $SharePoint.Project.AssemblyFullName$" />
 <importErrorMessage>$Resources:core,ImportErrorMessage;</importErrorMessage>
 </metaData>
 <data>
 <properties>
 <property name="Title" type="string">POC.SharePoint.Module - VisualWebPart</property>
 <property name="Description" type="string">My Visual Web Part</property>
 </properties>
 </data>
 </webPart>
</webParts>

On peut alors copier le contenu XML de la balise <WebParts> dans la balise  <File> du fichier Elements.xml du Module créé précédemment.

Ensuite, il reste seulement à ajouter une balise  <AllUsersWebPart> afin de spécifier l’ordre et la zone dans laquelle se retrouvera la WebPart.

Votre fichier Elements.xml devrait finalement ressembler à ceci :

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
 <Module Name="ModuleDeployerPage" SetupPath="pages\" RootWebOnly="FALSE">
 <File Url="PageDeployeParModuleXML.aspx" Path="viewpage.aspx">
 <AllUsersWebPart WebPartOrder="0" WebPartZoneID="Main" ID="g_2afba91e_8dab_4004_bb10_feddbb8a1cd3">
 <![CDATA[<webParts>
 <webPart xmlns="http://schemas.microsoft.com/WebPart/v3">
 <metaData>
 <type name="POC.SharePoint.Module.VisualWebPart.VisualWebPart, $SharePoint.Project.AssemblyFullName$" />
 <importErrorMessage>$Resources:core,ImportErrorMessage;</importErrorMessage>
 </metaData>
 <data>
 <properties>
 <property name="Title" type="string">POC.SharePoint.Module - VisualWebPart</property>
 <property name="Description" type="string">My Visual Web Part</property>
 </properties>
 </data>
 </webPart>
</webParts>]]>
 </AllUsersWebPart>
 </File>
 </Module>
</Elements>

3 – On déploie et on test

Lorsqu’on déploie on obtient notre page avec la WebPart à l’intérieur :

ModuleDeployerPageWebPartFinal

Conclusion

À partir d’un module, on a déployé une page basé sur un modèle natif de SharePoint sans dupliquer son contenu. Ensuite on a tout simplement ajouté une WebPart dans cette page. Dans l’ensemble, c’est relativement simple une fois qu’on s’est familiarisé avec les différentes balises XML. De plus, on utilise seulement du code XML en comparaison à utiliser plusieurs lignes de code pour faire le travail.

Le code source de ce billet est disponible ici et la référence complète sur les différentes balises d’un module est disponible sur MSDN.

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é.