Procédure pas à pas : ajout d’un onglet au Ruban serveur

Article
09/24/2014

Dernière modification : lundi 7 février 2011

S’applique à : SharePoint Foundation 2010

Dans cet article
Création d’un projet SharePoint
Ajout d’une nouvelle fonctionnalité
Définition de l’action personnalisée
Déploiement de la personnalisation

Cette rubrique indique comment ajouter un nouvel onglet au Ruban serveur dans Microsoft SharePoint Foundation.

Conditions requises

SharePoint Foundation 2010

Outils de développement SharePoint dans Microsoft Visual Studio 2010

Création d’un projet SharePoint

Pour ajouter un nouvel onglet, vous commencez par créer un projet SharePoint vide.

Pour créer un projet SharePoint

Démarrez Visual Studio 2010.
Dans le menu Fichier, pointez sur Nouveau, puis cliquez sur Projet.
Dans Types de projets, sous Visual Basic ou C#, sélectionnez Projet SharePoint vide.
Tapez AjouterUnOngletAuRuban comme nom de projet. Cliquez sur OK.
Dans l’Assistant Personnalisation de SharePoint, choisissez Déployer en tant que solution bac à sable (sandbox). Cliquez sur Terminer.

Ajout d’une nouvelle fonctionnalité

Pour personnaliser le Ruban, utilisez une fonctionnalité. Les étapes suivantes permettent d’ajouter une nouvelle fonctionnalité à votre solution.

Pour ajouter une nouvelle fonctionnalité

Dans l’Explorateur de solutions, cliquez avec le bouton droit sur Fonctionnalités et sélectionnez Ajouter une fonctionnalité.
Affectez à la fonctionnalité le titreOnglet de Ruban personnalisé.
Dans l’Explorateur de solutions, cliquez avec le bouton droit sur Fonctionnalité1, puis sélectionnez Renommer. Tapez OngletRubanPersonnalisé comme nouveau nom.
Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le projet AjouterUnOngletAuRuban, pointez sur Ajouter, puis cliquez sur Nouvel élément.
Dans la boîte de dialogue Ajouter un nouvel élément, sélectionnez le modèle Élément vide. Entrez OngletRubanPersonnalisé comme nom.

Définition de l’action personnalisée

La personnalisation du Ruban se définit à l’aide du code XML du Ruban dans une action personnalisée. Pour obtenir une explication détaillée du code XML du Ruban, voir XML du Ruban serveur.

Pour définir l’action personnalisée

Ouvrez le fichier Elements.xml.

Collez le code XML de Ruban suivant dans le fichier Elements.xml. Cette opération ajoute un nouvel onglet My Custom Tab avec un groupe et trois boutons sur une bibliothèque de documents.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="https://schemas.microsoft.com/sharepoint/">
  <CustomAction
    Id="MyCustomRibbonTab"
    Location="CommandUI.Ribbon.ListView"
    RegistrationId="101" 
    RegistrationType="List">
      <CommandUIExtension>
        <CommandUIDefinitions>
          <CommandUIDefinition
            Location="Ribbon.Tabs._children">
            <Tab 
              Id="Ribbon.CustomTabExample" 
              Title="My Custom Tab" 
              Description="This holds my custom commands!" 
              Sequence="501">
            <Scaling
              Id="Ribbon.CustomTabExample.Scaling">
              <MaxSize
                Id="Ribbon.CustomTabExample.MaxSize" 
                GroupId="Ribbon.CustomTabExample.CustomGroupExample" 
                Size="OneLargeTwoMedium"/>
              <Scale 
                Id="Ribbon.CustomTabExample.Scaling.CustomTabScaling"
                GroupId="Ribbon.CustomTabExample.CustomGroupExample" 
                Size="OneLargeTwoMedium" />
            </Scaling>
            <Groups Id="Ribbon.CustomTabExample.Groups">
              <Group 
                Id="Ribbon.CustomTabExample.CustomGroupExample" 
                Description="This is a custom group!" 
                Title="Custom Group" 
                Sequence="52" 
                Template="Ribbon.Templates.CustomTemplateExample">
                <Controls Id="Ribbon.CustomTabExample.CustomGroupExample.Controls">
                  <Button 
                    Id="Ribbon.CustomTabExample.CustomGroupExample.HelloWorld" 
                    Command="CustomTabExample.HelloWorldCommand" 
                    Sequence="15" 
                    Description="Says hello to the World!" 
                    LabelText="Hello, World!" 
                    TemplateAlias="cust1"/>
                  <Button 
                    Id="Ribbon.CustomTabExample.CustomGroupExample.GoodbyeWorld" 
                    Command="CustomTabExample.GoodbyeWorldCommand" 
                    Sequence="17" 
                    Description="Says good-bye to the World!" 
                    LabelText="Good-bye, World!" 
                    TemplateAlias="cust2"/>
                  <Button 
                    Id="Ribbon.CustomTabExample.CustomGroupExample.LoveWorld" 
                    Command="CustomTabExample.LoveWorldCommand" 
                    Sequence="19" 
                    Description="Says I love the World!" 
                    LabelText="I love you, World!" 
                    TemplateAlias="cust3"/>
                </Controls>
              </Group>
            </Groups>
          </Tab>
        </CommandUIDefinition>
        <CommandUIDefinition Location="Ribbon.Templates._children">
          <GroupTemplate Id="Ribbon.Templates.CustomTemplateExample">
            <Layout 
              Title="OneLargeTwoMedium" 
              LayoutTitle="OneLargeTwoMedium">
              <Section Alignment="Top" Type="OneRow">
                <Row>
                  <ControlRef DisplayMode="Large" TemplateAlias="cust1" />
                </Row>
              </Section>
              <Section Alignment="Top" Type="TwoRow">
                <Row>
                  <ControlRef DisplayMode="Medium" TemplateAlias="cust2" />
                </Row>
                <Row>
                  <ControlRef DisplayMode="Medium" TemplateAlias="cust3" />
                </Row>
              </Section>
            </Layout>
          </GroupTemplate>
        </CommandUIDefinition>
      </CommandUIDefinitions>
      <CommandUIHandlers>
        <CommandUIHandler
          Command="CustomTabExample.HelloWorldCommand" 
          CommandAction="javascript:alert('Hello, world!');" />
        <CommandUIHandler 
          Command="CustomTabExample.GoodbyeWorldCommand" 
          CommandAction="javascript:alert('Good-bye, world!');" />
        <CommandUIHandler 
          Command="CustomTabExample.LoveWorldCommand" 
          CommandAction="javascript:alert('I love you, world!');" />
      </CommandUIHandlers>
    </CommandUIExtension>
  </CustomAction>
</Elements>

Déploiement de la personnalisation

Dans la mesure où le projet a été configuré en tant que solution en bac à sable (sandbox), il est déployé dans la galerie de solutions.

Pour déployer la personnalisation

Appuyez sur la touche F5. Les Outils de développement SharePoint dans Visual Studio 2010 génèrent et déploient automatiquement la fonctionnalité.
Accédez à une bibliothèque de documents dans votre site ou sous-site.
Cliquez sur l’onglet My Custom Tab, observez le groupe Custom Group, et cliquez sur les boutons Hello, World, Good-bye, World ou I Love You, World.

Voir aussi

Concepts

Personnalisation déclarative du Ruban serveur

Partager via