Application Power Apps en cours de développement

Développer un WebPart visuel SharePoint: Hello World !

Découvrez comment créer un WebPart visuel SharePoint avec Microsoft Visual Studio 2010 et créez « Hello World ! » sur votre page SharePoint.

En effet, vous allez développer un WebPart visuel SharePoint 2010 qui affichera la phrase consacrée des tutoriels de développement : « Hello World ! ».

Notamment, l’objectif de cet exercice est de Développer un WebPart visuel pour SharePoint, qui affiche « Hello World ! » sur une page d’un site SharePoint.

Ensuite, 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…

Développer un WebPart visuel SharePoint 2010
Développer un WebPart visuel SharePoint

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 : 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 :

Développer un WebPart visuel SharePoint 2010
Développer un WebPart visuel SharePoint : solution

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.

Développer un WebPart visuel SharePoint 2010
Développer un WebPart visuel SharePoint : 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
Développer un WebPart visuel SharePoint : public class

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:

Développer un WebPart visuel SharePoint 2010

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 :

Développer un WebPart visuel SharePoint 2010

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

Composant Visual Webpart

Développer un WebPart visuel pour SharePoint

Développer un WebPart visuel SharePoint 2010
Développer un WebPart visuel SharePoint : « Hello World! »

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 ! ») :

Ensuite, 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.

Notamment, 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.

Commentaires

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *