> 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 gratuitement cette ressource

TOP 5 des Cybermenaces et Tendances 2021

TOP 5 des Cybermenaces et Tendances 2021

Découvrez dans ce nouveau rapport Acronis, fondé sur les données recueillies par plus de 100 000 terminaux dans le monde, les tendances majeures à surveiller en termes de cybersécurité et les meilleures recommandations pour rester protégé.

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

A lire aussi sur le site

Revue Smart DSI

La Revue du Décideur IT