Utiliser l’interface utilisateur du Ruban SharePoint 2010

Article
09/24/2014

Bannière Démarrage rapide SharePoint

Prise en main du développement Web dans SharePoint 2010 : découvrez comment modifier le nouveau menu du Ruban SharePoint 2010.

Dernière modification : mercredi 12 janvier 2011

S’applique à : Office 2010 | SharePoint Foundation 2010 | SharePoint Server 2010 | Visual Studio | Visual Studio 2010

Dans cet article
Créer un projet SharePoint 2010 vide
Ajouter le code du bouton au projet
Déployer et tester la solution
Supprimer le bouton
Étapes suivantes

Dans cet exercice, vous étendez le Ruban Microsoft SharePoint 2010 en ajoutant un bouton personnalisé qui exécute du code côté serveur. Vous pouvez utiliser cette approche pour ajouter ou remplacer des boutons, des groupes, des onglets, voire pour remplacer la totalité du Ruban. En outre, vous supprimez le bouton personnalisé du Ruban. Pour accomplir cette tâche, vous devez effectuer les opérations suivantes :

Créer un projet SharePoint 2010 vide
Ajouter le code du bouton au projet
Déployer et tester la solution
Supprimer le bouton

Créer un projet SharePoint 2010 vide

Dans cette tâche, vous créez un projet SharePoint 2010 vide dans Microsoft Visual Studio 2010.

Pour créer le projet SharePoint

Pour démarrer Visual Studio 2010, cliquez sur le menu Démarrer, sur Tous les programmes, sur Microsoft Visual Studio 2010, puis sur Microsoft Visual Studio 2010.
Dans le menu Fichier, pointez sur Nouveau, puis cliquez sur Projet.
Dans la boîte de dialogue Nouveau projet, dans la section Modèles installés, cliquez sur Visual C#, sur SharePoint, puis sur 2010.
Cliquez sur Projet SharePoint vide à partir des éléments de projet.
Dans la zone Nom, tapez RibbonDemo, puis cliquez sur OK.
Dans l’Assistant Personnalisation de SharePoint, tapez le site Web local à utiliser pour cet exercice (tel que https://localhost/SampleWebSite).
Pour le niveau de confiance, sélectionnez Déployer en tant que solution de batterie, puis cliquez sur Terminer.

Ajouter le code du bouton au projet

Dans cette tâche, vous ajoutez le code XML permettant de créer le bouton, ainsi que le code ECMAScript (JavaScript, JScript) permettant d’attribuer des fonctionnalités à celui-ci.

Pour ajouter du code XML au projet

Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le nœud RibbonDemo, pointez sur Ajouter, puis cliquez sur Nouvel élément.
Dans la boîte de dialogue Ajouter un nouvel élément, dans la section Modèles installés, cliquez sur Visual C#, sur SharePoint, sur 2010, puis sur le type d’élément Élément vide.
Conservez le nom EmptyElement1, puis cliquez sur OK.
Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le nœud EmptyElement1, puis cliquez sur Afficher le code.
Supprimez le contenu du fichier Elements.xml.

Ajoutez le code suivant au fichier Elements.xml.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="https://schemas.microsoft.com/sharepoint/">
<CustomAction
  Id="DemoHelloWorldButton"
  RegistrationType="List"
  RegistrationId="101"
  Location="CommandUI.Ribbon">
    <CommandUIExtension>
      <CommandUIDefinitions>
        <CommandUIDefinition
         Location="Ribbon.Documents.New.Controls._children">
          <Button
           Id="Ribbon.Documents.New.Controls.DemoHelloWorldButton"
           Alt="Hello World Ribbon Button"
           Sequence="10"
           Image32by32="/_layouts/images/PPEOPLE.GIF"
           Command="Demo_HelloWorld"
           LabelText="Hello World Demo"
           TemplateAlias="o2"/>
        </CommandUIDefinition>
      </CommandUIDefinitions>
      <CommandUIHandlers>
        <CommandUIHandler
         Command="Demo_HelloWorld"
         CommandAction="javascript:alert('Hello World!');" />
      </CommandUIHandlers>
    </CommandUIExtension>
  </CustomAction> 
</Elements>

L’attribut TemplateAlias détermine si le bouton qui apparaît est de taille moyenne (o2) ou grande (o1). L’élément CommandAction contient le code ECMAScript (JavaScript, JScript) qui s’exécute lorsque vous cliquez le bouton.

Notez que vous pouvez ajouter une image personnalisée au bouton en cliquant avec le bouton droit sur le nœud RibbonDemo, en pointant sur Ajouter et en double-cliquant sur Dossier mappé « Images » SharePoint. Ensuite, téléchargez l’image 32x32 ou l’image 16x16 vers le dossier Images/RibbonDemo. Enfin, définissez l’attribut Image32by32 (ou Image16by16) sur _layouts/images/ribbondemo/yourimage.png.

Déployer et tester la solution

Dans cette tâche, vous déployez la solution, puis vous vérifiez que le bouton apparaît sur le Ruban. Ensuite, vous cliquez sur le bouton pour afficher la boîte de dialogue.

Pour tester la solution

Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le nœud RibbonDemo puis cliquez sur Déployer.
Démarrez Internet Explorer et accédez au site Web précédemment spécifié.
Dans le volet de navigation de gauche, cliquez sur Documents partagés pour ouvrir la bibliothèque Documents partagés.
Cliquez sur l’onglet Documents dans le Ruban SharePoint 2010.

Le nouveau bouton Hello World Demo doit désormais apparaître dans le Ruban.
Cliquez sur Hello World Demo. La boîte de dialogue JavaScript Hello World apparaît, comme l’illustre la figure 1.

Figure 1. Boîte de dialogue Hello World

Supprimer le bouton

Dans cette tâche, vous supprimez le bouton Hello World Demo.

Pour supprimer le bouton

Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le nœud EmptyElement1, puis cliquez sur Afficher le code.
Ajoutez des marques de commentaires au code existant en tapant  après l’élément </CustomAction> fermant.

Après le code délimité par des marques de commentaires, insérez le code suivant.

<HideCustomAction Id="Ribbon.Documents.New.Controls.DemoHelloWorldButton" Location="Ribbon.Documents.New.Controls._children">
</HideCustomAction>

Déployez et testez la solution mise à jour en suivant les étapes 1 à 4 de la tâche 3, Déployer et tester la solution.

Le bouton Hello World Demo doit avoir disparu du Ruban.

Partager via