Ajouter un ruban personnalisé à votre site SharePoint
Ajoutez ou supprimez un ruban personnalisé sur votre site SharePoint. Ajoutez des gestionnaires d’événements JavaScript à l’aide de la technique d’incorporation JavaScript pour gérer vos événements du ruban personnalisé.
S’applique à : compléments pour SharePoint | SharePoint 2013 | SharePoint Online
L’exemple de code Core.RibbonCommands vous montre comment ajouter un ruban personnalisé à un site SharePoint. Utilisez cette solution si vous souhaitez :
Ajouter un ruban, un groupe ou un bouton personnalisé à votre site ou liste SharePoint.
Afficher un ruban personnalisé pour les types de contenu, sites ou listes spécifiques.
Remarque
Cet exemple de code montre comment appeler les fonctions JavaScript qui traitent les événements déclenchés par des boutons du ruban. Cet exemple de code ne fournit pas l’implémentation des fonctions du gestionnaire d’événement JavaScript pour les boutons du ruban. Pour implémenter les fonctions du gestionnaire d’événement JavaScript, utilisez la technique d’incorporation JavaScript pour incorporer les fonctions du gestionnaire d’événement JavaScript sur toutes les pages où apparaît votre ruban personnalisé. Pour plus d’informations sur l’incorporation de JavaScript, voir Personnaliser l’interface utilisateur de votre site SharePoint à l’aide de JavaScript.
Avant de commencer
Pour commencer, téléchargez l’exemple de complément Core.RibbonCommands à partir du projet Office 365 Modèles et pratiques du développeur sur GitHub.
Utiliser l’application Core.RibbonCommands
Lorsque vous exécutez cet exemple de code, dans la page de démarrage dans Inscrire le ruban, choisissez Ajouter un ruban. Lorsque la page s’actualise, affichez le ruban personnalisé en choisissant Documents>Onglet personnalisé.
Cet exemple de code définit un ruban personnalisé à l’aide de Models\RibbonCommands.xml. RibbonCommands.xml définit des groupes de ruban, boutons et gestionnaires d’événements de l’interface utilisateur personnalisés pour le ruban. Pour plus d’informations, voir Personnaliser et étendre le ruban SharePoint 2010 serveur et Ruban serveur XML.
Le ruban personnalisé s’affiche sur tous les sites et listes du site web hôte, car RegistrationId="0x01 » et RegistrationType="ContentType ». RegistrationId="0x01 » et RegistrationType="ContentType » spécifient que le ruban s’affiche pour tous les types de contenu qui héritent du type « 0x01 », qui sont des types de contenu qui héritent de la classe Item . Pour appliquer le ruban à un type de contenu personnalisé, remplacez "0x01" par l’identificateur de votre type de contenu personnalisé. Pour appliquer le ruban à une liste, modifiez la valeur de RegistrationType par List.
Remarque
Le code dans cet article est fourni tel quel, sans garantie d’aucune sorte, expresse ou implicite, y compris mais sans s’y limiter, aucune garantie implicite d’adéquation à un usage particulier, à une qualité marchande ou une absence de contrefaçon.
<?xml version="1.0" encoding="utf-8" ?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<CustomAction
Id="CustomCustomRibbonTab"
Location="CommandUI.Ribbon.ListView"
RegistrationId="0x01"
RegistrationType="ContentType"
Sequence="100"
>
<CommandUIExtension>
<CommandUIDefinitions>
<CommandUIDefinition
Location="Ribbon.Tabs._children">
<Tab
Id="Ribbon.CustomRibbonTab"
Title="Custom Tab"
Description="Custom Tab Description"
Sequence="501">
<Scaling
Id="Ribbon.CustomRibbonTab.Scaling">
<MaxSize
Id="Ribbon.CustomRibbonTab.MaxSize"
GroupId="Ribbon.CustomRibbonTab.ManageCustomGroup"
Size="OneLargeTwoMedium"/>
<MaxSize
Id="Ribbon.CustomRibbonTab.TabTwoMaxSize"
GroupId="Ribbon.CustomRibbonTab.NewOpenCustomGroup"
Size="TwoLarge" />
<Scale
Id="Ribbon.CustomRibbonTab.Scaling.CustomTabScaling"
GroupId="Ribbon.CustomRibbonTab.ManageCustomGroup"
Size="OneLargeTwoMedium" />
<Scale
Id="Ribbon.CustomRibbonTab.Scaling.CustomSecondTabScaling"
GroupId="Ribbon.CustomRibbonTab.NewOpenCustomGroup"
Size="TwoLarge" />
</Scaling>
<Groups Id="Ribbon.CustomRibbonTab.Groups">
<Group
Id="Ribbon.CustomRibbonTab.ManageCustomGroup"
Description="Group to Custom Functions"
Title="Manage Item"
Sequence="52"
Template="Ribbon.Templates.CustomTemplate">
<Controls Id="Ribbon.CustomRibbonTab.ManageCustomGroup.Controls">
<Button
Id="Ribbon.CustomRibbonTab.ManageCustomGroup.Accept"
Command="CustomRibbonTab.AcceptCustomCommand"
Sequence="15"
Image32by32="{SiteUrl}/_layouts/15/1033/Images/formatmap32x32.png?rev=23"
Image32by32Top="-68"
Image32by32Left="-272"
Description="Accept Item"
LabelText="Accept"
TemplateAlias="AWR" />
<Button
Id="Ribbon.CustomRibbonTab.ManageCustomGroup.Reject"
Command="CustomRibbonTab.RejectCustomCommand"
Sequence="17"
Image16by16="{SiteUrl}/_layouts/15/1033/Images/formatmap16x16.png?rev=23"
Image16by16Top="-216"
Image16by16Left="-290"
Description="Reject Item"
LabelText="Reject"
TemplateAlias="RWR"/>
<Button
Id="Ribbon.CustomRibbonTab.ManageCustomGroup.Verify"
Command="CustomRibbonTab.VerifyCustomCommand"
Sequence="19"
Image16by16="{SiteUrl}/_layouts/15/1033/Images/formatmap16x16.png?rev=23"
Image16by16Top="-126"
Image16by16Left="-144"
Description="Verify Item"
LabelText="Verify"
TemplateAlias="ACWR"/>
<Button
Id="Ribbon.CustomRibbonTab.ManageCustomGroup.Close"
Command="CustomRibbonTab.CloseCustomCommand"
Sequence="19"
Image32by32="{SiteUrl}/_layouts/15/1033/Images/formatmap32x32.png?rev=23"
Image32by32Top="-0"
Image32by32Left="-34"
Description="Close Item"
LabelText="Close"
TemplateAlias="CWR"/>
<Button
Id="Ribbon.CustomRibbonTab.ManageCustomGroup.Copy"
Command="CustomRibbonTab.CopyCustomCommand"
Sequence="19"
Image32by32="{SiteUrl}/_layouts/15/1033/Images/formatmap32x32.png?rev=23"
Image32by32Top="-442"
Image32by32Left="-67"
Description="Copy Item"
LabelText="Copy"
TemplateAlias="CPWR"/>
</Controls>
</Group>
<Group
Id="Ribbon.CustomRibbonTab.NewOpenCustomGroup"
Description="Group to manage item"
Title="New &amp; Open"
Sequence="53"
Template="Ribbon.Templates.CustomTemplate">
<Controls Id="Ribbon.CustomRibbonTab.NewOpenCustomGroup.Controls">
<Button
Id="Ribbon.CustomRibbonTab.NewOpenCustomGroup.New"
Command="CustomRibbonTab.NewCustomCommand"
Sequence="15"
Image32by32="{SiteUrl}/_layouts/15/1033/Images/formatmap32x32.png?rev=23"
Image32by32Top="-33"
Image32by32Left="-66"
Description="New Item"
LabelText="New"
TemplateAlias="LOR"/>
<Button
Id="Ribbon.CustomRibbonTab.NewOpenCustomGroup.Open"
Command="CustomRibbonTab.OpenCustomCommand"
Sequence="15"
Image32by32="{SiteUrl}/_layouts/15/1033/Images/formatmap32x32.png?rev=23"
Image32by32Top="-170"
Image32by32Left="-138"
Description="Open Item"
LabelText="Open"
TemplateAlias="LORS"/>
</Controls>
</Group>
</Groups>
</Tab>
</CommandUIDefinition>
<CommandUIDefinition Location="Ribbon.Templates._children">
<GroupTemplate Id="Ribbon.Templates.CustomTemplate">
<Layout
Title="OneLargeTwoMedium"
LayoutTitle="OneLargeTwoMedium">
<Section Alignment="Top" Type="OneRow">
<Row>
<ControlRef DisplayMode="Large" TemplateAlias="AWR" />
</Row>
</Section>
<Section Alignment="Top" Type="TwoRow">
<Row>
<ControlRef DisplayMode="Medium" TemplateAlias="RWR" />
</Row>
<Row>
<ControlRef DisplayMode="Medium" TemplateAlias="ACWR" />
</Row>
</Section>
<Section Alignment="Top" Type="OneRow">
<Row>
<ControlRef DisplayMode="Large" TemplateAlias="CWR" />
</Row>
</Section>
<Section Alignment="Top" Type="OneRow">
<Row>
<ControlRef DisplayMode="Large" TemplateAlias="CPWR" />
</Row>
</Section>
</Layout>
<Layout
Title="TwoLarge"
LayoutTitle="TwoLarge">
<Section Alignment="Top" Type="OneRow">
<Row>
<ControlRef DisplayMode="Large" TemplateAlias="LOR" />
</Row>
</Section>
<Section Alignment="Top" Type="OneRow">
<Row>
<ControlRef DisplayMode="Large" TemplateAlias="LORS" />
</Row>
</Section>
</Layout>
</GroupTemplate>
</CommandUIDefinition>
</CommandUIDefinitions>
<CommandUIHandlers>
<CommandUIHandler
Command="CustomRibbonTab.AcceptCustomCommand"
CommandAction="javascript:GetCurrentItem('AP');"/>
<CommandUIHandler
Command="CustomRibbonTab.RejectCustomCommand"
CommandAction="javascript:GetCurrentItem('RJ');"/>
<CommandUIHandler
Command="CustomRibbonTab.VerifyCustomCommand"
CommandAction="javascript:GetCurrentItem('AK');"/>
<CommandUIHandler
Command="CustomRibbonTab.NewCustomCommand"
CommandAction="javascript:AddNewCustom();"/>
<CommandUIHandler
Command="CustomRibbonTab.OpenCustomCommand"
CommandAction="javascript:OpenExistingCustom();"/>
<CommandUIHandler
Command="CustomRibbonTab.CloseCustomCommand"
CommandAction="javascript:CloseExistingCustom();"/>
<CommandUIHandler
Command ="CustomRibbonTab.CopyCustomCommand"
CommandAction="Javascript:CopyCustom();"/>
</CommandUIHandlers>
</CommandUIExtension>
</CustomAction>
</Elements>
Remarque
Si vous utilisez la technique JavaScript incorporée pour implémenter la gestion des événements pour les boutons de vos rubans, votre fichier JavaScript doit implémenter les méthodes définies dans les éléments CommandUIHandler . Par exemple, votre fichier JavaScript incorporé dois-je implémenter des fonctions telles que GetCurrentItem et AddNewCustom.
InitializeButton_Click dans Default.aspx effectue les tâches suivantes :
Appelle GetCustomActionXmlNode pour lire le fichier XML et renvoyer l’objet CustomAction défini dans RibbonCommands.xml. L’objet CustomAction contient le balisage de personnalisation du ruban.
Lit plusieurs éléments et valeurs d’attribut à partir de l’objet CustomAction .
Convertit l’élément CommandUIExtension (qui définit les groupes de ruban, les boutons et les gestionnaires d’événements d’interface utilisateur) en une chaîne appelée xmlContent.
Crée une nouvelle action personnalisée à l’aide de clientContext.Web.UserCustomActions.Add.
Ajoute le balisage de personnalisation du ruban (dans xmlContent) au site SharePoint à l’aide de CustomAction.CommandUIExtension.
Inscrit le ruban personnalisé en définissant CustomAction.RegistrationId et CustomAction.RegistrationType sur les valeurs d’attribut de l’objet CustomAction lu à l’étape 2.
protected void InitializeButton_Click(object sender, EventArgs e) {
var spContext = SharePointContextProvider.Current.GetSharePointContext(Context);
using (var clientContext = spContext.CreateUserClientContextForSPHost()) {
clientContext.Load(clientContext.Web, web => web.UserCustomActions);
clientContext.ExecuteQuery();
// Get the XML elements file and get the CommandUIExtension node.
var customActionNode = GetCustomActionXmlNode();
var customActionName = customActionNode.Attribute("Id").Value;
var commandUIExtensionNode = customActionNode.Element(ns + "CommandUIExtension");
var xmlContent = commandUIExtensionNode.ToString();
var location = customActionNode.Attribute("Location").Value;
var registrationId = customActionNode.Attribute("RegistrationId").Value;
var registrationTypeString = customActionNode.Attribute("RegistrationType").Value;
var registrationType = (UserCustomActionRegistrationType)Enum.Parse(typeof(UserCustomActionRegistrationType), registrationTypeString);
var sequence = 1000;
if (customActionNode.Attribute(ns + "Sequence") != null) {
sequence = Convert.ToInt32(customActionNode.Attribute(ns + "Sequence").Value);
}
// Determine if the custom action exists already.
var customAction = clientContext.Web.UserCustomActions.FirstOrDefault(uca => uca.Name == customActionName);
// If the custom action does not exist, create it.
if (customAction == null) {
// create the ribbon.
customAction = clientContext.Web.UserCustomActions.Add();
customAction.Name = customActionName;
}
// Set custom action properties.
customAction.Location = location;
customAction.CommandUIExtension = xmlContent; // CommandUIExtension xml
customAction.RegistrationId = registrationId;
customAction.RegistrationType = registrationType;
customAction.Sequence = sequence;
customAction.Update();
clientContext.Load(customAction);
clientContext.ExecuteQuery();
}
}