> Mobilité > Développement d’un Page component simple

Développement d’un Page component simple

Mobilité - Par Sébastien Sougnez - Publié le 24 août 2011
email

Pour ajouter des éléments dans le « Ribbon », une technique utilisée consiste à développer des « custom actions ». Dans le code de celles-ci, nous insérons directement le code « JavaScript » nécessaire au traitement du bouton dans le fichier XML de déclaration.

Cette technique, bien que simple, a ses inconvénients. Le premier est que nous définissons tel quel le code JavaScript relatif au bouton dans le fichier XML. Cela ne pose pas de problème quand le code JavaScript est court, mais lorsqu’il nous faut exécuter plus d’instructions, cela devient vite gênant.

Ce dossier est issu de notre publication IT Pro Magazine (12/10). Pour consulter les schémas et illustrations associés, rendez-vous dans le club ab onnés.

Développement d’un Page component simple

C’est pour cela que SharePoint a mis en place un système pour gérer les « événements » du Ribbon. Effectivement, un « dispatcher » est attaché au Ribbon et va être responsable de la redirection des commandes de celui-ci vers les bons codes JavaScript. Nous allons voir cela grâce à un exemple concret.

Avant de commencer, il faut savoir que développer un « Page component » n’est pas aussi simple que directement taper le code JavaScript dans le fichier XML. Effectivement, pour faire cela, nous allons d’une certaine manière devoir implémenter une « interface » JavaScript. Ainsi, le Ribbon saura que notre « Page Component » comporte différentes fonctions qu’il va pouvoir appeler à sa guise pour exécuter différentes opérations à différents moment.

Ouvrez Visual Studio 2010 et créez un nouveau projet de type « Empty SharePoint Project » que vous nommerez « ITProMag.MyPC ». Laissez la deuxième option cochée pour déployer la solution au niveau de la ferme. La première chose que nous allons devoir faire est bien évidemment écrire le code XML permettant d’ajouter un bouton dans le Ribbon. Ce bouton se placera dans le groupe « New » des listes génériques. Faites donc un clic droit sur votre projet et choisissez Add > New Item > « Empty Element ». Nommez cet élément « ITProMag.MyPC » et validez.
Avant de continuer, cliquez une fois sur « Feature1 », pressez F2 et rentrez « ITProMag.MyPC » pour renommer le dossier dans lequel sera déployée la feature. Ouvrez maintenant votre fichier « Elements.xml » et tapez le code suivant :

CustomAction Id= »RedoAction » RegistrationId= »100″ RegistrationType= »List » Location= »CommandUI.Ribbon.ListView »> <CommandUIExtension> <CommandUIDefinitions> <CommandUIDefinition Location= »Ribbon.ListItem.New.Controls._children »> <Button Id= »RedoButton » Command= »RedoButtonClick » LabelText= »Redo » ToolTipTitle= »Redo the last action » Image16by16= »/_layouts/images/ITProMag.MyPC/redo16x16.jpg » Image32by32= »/_layouts/images/ITProMag.MyPC/redo32x32.jpg » ToolTipDescription= »Redo Description » TemplateAlias= »o1″/> </CommandUIDefinition> </CommandUIDefinitions> </CommandUIExtension> </CustomAction>

Pour l’instant, il n’y a rien de bien compliqué. Si vous ne comprenez pas ces quelques lignes de code, nous vous conseillons fortement de lire les cours de cette page.

Implémentation d’une fonction

Implémentation d’une fonction

Utiliser le dispatcher · iTPro.fr

Téléchargez cette ressource

Guide inmac wstore pour l’équipement IT de l’entreprise

Guide inmac wstore pour l’équipement IT de l’entreprise

Découvrez toutes nos actualités à travers des interviews, avis d'experts et témoignages clients et ainsi, retrouvez les dernières tendances et solutions IT autour de nos 4 univers produits : Poste de travail, Affichage et collaboration, Impression et capture et Infrastructure.

Mobilité - Par Sébastien Sougnez - Publié le 24 août 2011