> Mobilité > Développement d’un Page Component avancé

Développement d’un Page Component avancé

Mobilité - Par Sébastien Sougnez - Publié le 07 octobre 2011
email

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.

Développement d’un Page Component avancé

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

Microsoft 365 : HP Subscription Management Services en détail

Microsoft 365 : HP Subscription Management Services en détail

Collaboration à distance, environnements de travail et productivité optimisés, gestion évolutive des licences, accélérez la transformation de votre business pour le faire entrer dans l’ère de la collaboration hybride. Découvrez comment le service de gestion des abonnements HP peut vous aider à optimiser vos investissements et votre stratégie de gestion de vos abonnements Microsoft 365.

Mobilité - Par Sébastien Sougnez - Publié le 07 octobre 2011