Dans ce cours, nous allons encore utiliser un « Page Component » mais dans le but d’insérer une « Flyout Anchor » qui sera rempli dynamiquement grâce à de l’Ecma Script. Nous verrons ainsi toute la puissance et l’utilité des « Page Components ».
Nous avons vu dans le précédent dossier comment développer un Page Component simple et intégrer ce Page Component au ruban.
Ce dossier est issu de notre publication IT Pro Magazine (01/11). Pour consulter les schémas et illustrations associés, rendez-vous dans le club abonnés.
Notre exemple va se baser sur une liste nommée « Student » contenant les champs « FirstName », « LastName », « Age » et « Gender ». Le dernier champ est de type « Choice » et permet de choisir soit la valeur « Male », soit « Female ». Nous allons ajouter un bouton dans l’onglet « Insert » d’une « wiki page » pour permettre d’insérer des étudiants directement dans le « Rich Text Editor ». Voir figures 1 et 2.
Commençons donc directement en créant notre solution. Pour cela, ouvrez Visual Studio 2010 et créez un nouveau projet du type « Empty SharePoint Project » que vous nommerez « ITProMag.InsertUser ».
Nous allons devoir déployer des images et des fichiers JavaScript via notre solution. Sélectionnez donc la seconde option de la fenêtre qui est apparue pour déployer votre solution au niveau de la ferme.
La première chose que nous allons faire est ajouter le bouton au « Ribbon ». Dans un premier temps, nous allons utiliser les deux images suivantes que nous appellerons respectivement « adduser16x16.png » et « adduser32x32.png ». Voir figures 4 et 5.
Avant de pouvoir ajouter ces fichiers dans notre solution, nous allons devoir créer un dossier « mappé Images ». Faites donc un clic droit sur votre projet et choisissez Add > SharePoint « Images » Mapped Folder. Ajoutez ensuite les deux images précédemment enregistrées dans le dossier créé par Visual Studio. Faites ensuite un clic droit sur votre projet et choisissez Add > New Item > Empty Element que vous nommerez « InsertButtonElement ». Voir figure 6.
Téléchargez cette ressource
Guide inmac wstore pour l’équipement IT de l’entreprise
Découvrez les dernières tendances et solutions IT autour des univers de Poste de travail, Affichage et Collaboration, Impression et Infrastructure, et notre dossier Green IT sur les actions engagés par inmac wstore pour réduire son impact environnemental
Mobilité - Par
Sébastien Sougnez - Publié le 07 octobre 2011
