Principe des WebParts SharePoint

Les composants WebPart constituent un moyen de personnaliser les pages dans SharePoint.

Comment font les enfants lorsqu’ils jouent avec un jeu de Lego ® ?

En fait, ils piochent dans le bac à Lego ®, pour en retirer celui qui leur convient en forme et en couleur.

Le principe est identique avec les WebParts. Vous allez piocher dans le bac  à WebParts pour insérer celui qui vous convient car ils ont tous des fonctionnalités différentes.

De plus, chaque fois que vous créez une bibliothèque ou une liste, vous aurez une WebPart associée que vous pourrez ajouter sur la page d’un site SharePoint.

Quelques exemples de WebPart.

  • Affiche le contenu d’une liste ou d’une bibliothèque,
  • Affiche l’organigramme de l’organisation,
  • Permet aux utilisateurs de laisser des notes courtes visibles par tous,
  • Affiche les tâches de l’utilisateur actuellement connecté,
  • Affiche les documents récents de l’utilisateur actuellement connecté,
  • Affiche le contenu d’un classeur Excel,
  • Affiche une image,
  • Permet aux utilisateurs autorisés d’entrer du texte,
  • Affiche la boîte de réception Outlook de l’utilisateur actuellement connecté,
  • Affiche un flux RSS.
  • etc.

Il existe des dizaines de WebParts. Leur nombre précis dépend de la version installée et de ceux que vous aurez créés ou importés.

Toutes les WebPart possèdent des propriétés qui permettent de les configurer.

En plus de choisir le composant WebPart qui vous convient, vous pouvez le configurer. En effet, chaque WebPart possède des propriétés générales qui permettent de configurer son apparence, sa disposition ou des paramètres avancées comme le ciblage d’audiences.

Outre ces paramètres communs, un composant WebPart peut disposer de paramètres supplémentaires selon ses fonctionnalités. Par exemple dans le WebPart qui affiche la liste des documents récents d’un utilisateur, vous pouvez indiquer le nombre maximal d’éléments affichés ou si l’affichage concerne les documents créés, modifiés ou extraits.

Connexion de WebParts

Certains WebParts peuvent se connecter à d’autres WebParts. Cela signifie qu’un WebPart (dénommé « fournisseur ») envoie des données (ligne / cellule) vers une autre WebPart (dénommé « client »).

Ce mécanisme permet d’enrichir les pages web en exposant un affichage dynamique des données.

Exemple de connexion de WebParts : Vous avez une liste de liens hypertextes qui pointent vers des images. En cliquant sur un des liens, l’image s’affiche en grand dans un WebPart Visionneuse d’image.

WebPart Dynamique

Préparation de l’environnement de développement

Afin de vous permettre de poursuivre ce cours avec les Tutoriels Microsoft pour le développement, vous pouvez utiliser un site d’équipe SharePoint 2010. Pour les labs, il est accessible via l’URL http://terre/.

Sur ce site, il existe 2 nouvelles listes : Employés et Projets que vous devrez créer à la main (pour l’instant) et alimenter.

Liste Employés

  • NomComplet : Une seule ligne de texte
  • TitreEmploi : Une seule ligne de texte
  • Equipe : Une seule ligne de texte
  • Contribution : Nombre
  • Projet : Recherche
Liste Projets

  • Titre : Une seule ligne de texte
  • Description : Une seule ligne de texte
  • DateFin : Date et heure
  • Responsable : Recherche

Contraintes : Le champ Employés.Projet pointe sur Projets.Titre. Le champ Projets.Responsable pointe sur Employés.NomComplet.

Avertissement

Débutez par le premier exercice: Développer un WebPart « Hello World ». En effet, les élements présentés en détail dans les exercices précédents ne seront pas réexpliqués par la suite.

Objectif du TP

Développer un WebPart qui affiche des informations sur les listes d’un site SharePoint 2010.

Pratique

Cliquez sur Démarrer > Tous les programmes > Microsoft Visual Studio 2010 puis Exécuter en tant qu’administrateur Microsoft Visual Studio 2010. Sur la page de démarrage de Microsoft Visual Studio 2010, cliquez sur Nouveau projet… Dans les Modèles installés (sur la gauche), développez Visual C# puis SharePoint, cliquez sur 2010 puis choisir Composant Visual Web Part.

Ensuite donnez un nom à votre projet : AffichageListe.

WebPart Dynamique

Gardez les autres options par défaut puis cliquez sur le bouton OK Dans la fenêtre qui s’ouvre, indiquez le site local (http://terre/) et choisissez de Déployer en tant que solution de batterie. Puis cliquez sur Terminer.

Sur la droite apparaît l’Explorateur de solutions. Un WebPart intitulé VisualWebPart1 apparaît. Développez VisualWebPart1 pour faire apparaître le fichier VisualWebPart1.webpart et double cliquez sur ce fichier pour l’ouvrir.

Changez le titre en Affichage du nombre de listes. Ce qui donne :
<property name=« Title«  type string>Affichage du nombre de listes</property>
Faites un clic droit sur VisualWebPart1.cs, puis sélectionnez Afficher le code. Dans la classe VisualWebPart1, après la parenthèse ouvrante, saisissez le code suivant :
protected Label lblAffichage; protected Button BtnListes;
Dans la méthode CreateChildControls(), après la parenthèse ouvrante, saisissez le code suivant :
Label lblAffichage = new Label(); Controls.Add(lblAffichage);
Controls.Add(new WebControl(HtmlTextWriterTag.Br));
Button BtnListes = new Button(); BtnListes.Text = « Nombre de listes »;
BtnListes.Click += delegate{ lblAffichage.Text = String.Format(« <br>Ce site contient {0} listes. », SPContext.Current.Web.Lists.Count); };
Controls.Add(BtnListes);

Pour télécharger le code correspondant à affichageliste.visualwebpart1.cs.

Il ne reste plus qu’à déployer la solution, puis insérer le WebPart dans le site: choisissez le WebPart Affichage du nombre de listes :

WebPart Dynamique

Remarque : le nombre de 26 est exact car le programme compte aussi les listes maquées dans le navigateur qui n’apparaissent pas lors d’un clic sur Tout le contenu du site. En revanche, ces listes et bibliothèques apparaissent bien avec SharePoint Designer 2010.

WebPart Hello World

Le traditionnel et classique « Hello World ! » va se présenter sous la forme d’un premier WebPart.

Objectif du TP

Développer un WebPart qui affiche « Hello World ! » sur une page d’un site SharePoint.

Pratique

Cliquez sur Démarrer > Tous les programmes > Microsoft Visual Studio 2010 puis Exécuter en tant qu’administrateur Microsoft Visual Studio 2010

Sur la page de démarrage de Microsoft Visual Studio 2010, cliquez sur Nouveau projet…

Dans les Modèles installés (sur la gauche), développez Visual C# puis SharePoint, cliquez sur 2010 puis choisir Composant Visual Web Part
Composant Visual Webpart

Ensuite donnez un nom à votre projet : HelloWorld.

Composant Visual Webpart

Gardez les autres options par défaut puis cliquez sur le bouton OK

Dans la fenêtre qui s’ouvre, indiquez le site local et choisissez de Déployer en tant que solution de batterie :

Composant Visual Webpart

Puis cliquez sur Terminer. Sur la droite apparaît l’Explorateur de solutions :

Composant Visual Webpart

Un WebPart intitulé VisualWebPart1 apparaît.

Développez VisualWebPart1 pour faire apparaître le fichier VisualWebPart1.webpart et double cliquez sur ce fichier pour l’ouvrir.

Composant Visual Webpart

Changez le titre en Bonjour Monde !.

Ce qui donne :
<propertyname=« Title« type=« string« >Bonjour Monde !</property>
Faites un clic droit sur VisualWebPart1.cs, puis sélectionnez Afficher le code.

Dans la classe VisualWebPart1, après la parenthèse ouvrante, saisissez le code suivant :
protected Label lblAffichage;
Dans la méthode CreateChildControls(), après la parenthèse ouvrante, saisissez le code suivant :
lblAffichage = new Label(); lblAffichage.Text = « Hello World ! »; Controls.Add(lblAffichage);
Votre code devrait ressembler à :

Composant Visual Webpart

Pour télécharger le code correspondant à VisualWebPart1.cs.

Déploiement de la solution

Grâce au déploiement, le WebPart va être accessible dans le site http://terre/. Pour cela, dans l’explorateur de solutions, faites un clic-droit sur HelloWorld puis cliquez sur Déployer:

Composant Visual Webpart

Une fenêtre de sortie apparaît en bas de l’écran central :

Composant Visual Webpart

Insérer le WebPart dans le site

Lancez Internet Explorer avec l’url http://terre/SitePages/Accueil.aspx. Ensuite, cliquez sur Actions du Site > Modifier la page. Dans les Outils d’édition, cliquez sur Insérer puis Composant WebPart.

Dans les Catégories, sur la droite, cliquez sur Custom et sélectionnez Bonjour Monde ! que vous ajoutez à la page :

Composant Visual Webpart

Puis dans l’onglet Page, cliquez sur Enregistrer et fermer. Le résultat ne se fait pas attendre :

Composant Visual Webpart

Notez qu’il s’agit d’un « vrai » WebPart. Vous pouvez donc modifier son apparence pour faire changer ou faire disparaître le titre du WebPart (« Bonjour Monde ! ») :

Composant Visual Webpart

Il ne vous reste plus qu’à faire des petites modifications dans le code pour bien comprendre comment il fonctionne: n’oubliez pas de déployer entre chaque modification.

L’intérêt de développer une WebPart est d’intégrer de l’interactivité avec l’utilisateur en charge de la conception du site.

Le prochain exercice, plus élaboré, va manipuler les informations du site SharePoint grâce à un WebPart Dynamique.