Agregar una cinta de opciones personalizada a un sitio de SharePoint
Obtenga información sobre cómo agregar o quitar una cinta de opciones personalizada de un sitio de SharePoint. Agregue controladores de eventos de JavaScript con la técnica para insertar JavaScript y controlar los eventos de la cinta de opciones personalizada.
Se aplica a: Complementos de SharePoint | SharePoint 2013 | SharePoint Online
El ejemplo de código Core.RibbonCommands muestra cómo agregar una cinta personalizada a un sitio de SharePoint. Use esta solución si quiere:
Agregar una cinta de opciones, un grupo o un botón personalizados a un sitio o lista de SharePoint.
Mostrar una cinta personalizada para determinados tipos de contenido, sitios o listas.
Nota:
Este código de ejemplo muestra cómo llamar a las funciones de JavaScript que controla los eventos generados por los botones de la cinta de opciones. Este ejemplo de código no incluye la implementación de las funciones de controlador de eventos de JavaScript para los botones de la cinta de opciones. Para implementar las funciones de controlador de eventos de JavaScript, use la técnica Insertar JavaScript para insertar las funciones de controlador de eventos de JavaScript en todas las páginas donde aparezca la cinta de opciones personalizada. Para obtener más información sobre la inserción de JavaScript, vea Personalización de la interfaz de usuario del sitio de SharePoint mediante JavaScript.
Antes de empezar
Para empezar, descargue el complemento de ejemplo Core.RibbonCommands del proyecto Office 365 Patrones y prácticas para desarrolladores en GitHub.
Uso de la aplicación Core.RibbonCommands
Al ejecutar este ejemplo de código, en la página de inicio de Registrar la cinta de opciones, elija Agregar cinta de opciones. Cuando se actualice la página, vea la cinta de opciones personalizada; para ello, elija Lapestaña Documentos >personalizados.
Este ejemplo de código define una cinta personalizada mediante Models\RibbonCommands.xml. RibbonCommands.xml define los controladores de eventos de la interfaz de usuario, los botones y los grupos de la cinta de opciones personalizada. Para obtener más información, vea Personalizar y ampliar la cinta de opciones del servidor SharePoint 2010 y Cinta de opciones del servidor XML.
La cinta de opciones personalizada se muestra en todos los sitios y listas de la web host porque RegistrationId="0x01" y RegistrationType="ContentType". RegistrationId="0x01" y RegistrationType="ContentType" especifican que la cinta de opciones aparecerá para todos los tipos de contenido que hereden del tipo "0x01", que son tipos de contenido que heredan de la clase Item . Para aplicar la cinta de opciones a un tipo de contenido personalizado, reemplace el "0 x 01" por el Id. del tipo de contenido personalizado Para aplicar la cinta de opciones a una lista, cambie el valor de RegistrationType a Lista.
Nota:
El código de este artículo se proporciona tal cual, sin garantía de ningún tipo, expresa o implícita, incluidas las garantías implícitas de aptitud para un propósito particular, comerciabilidad o ausencia de infracción.
<?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>
Nota:
Si usa la técnica insertar JavaScript para implementar el control de eventos para los botones de las cintas de opciones, el archivo JavaScript debe implementar los métodos definidos en los elementos CommandUIHandler . Por ejemplo, el archivo incrustado de JavaScript debe implementar funciones como GetCurrentItem y AddNewCustom.
InitializeButton_Click en Default.aspx realiza las siguientes tareas:
Llama a GetCustomActionXmlNode para leer el archivo XML y devolver el objeto CustomAction definido en RibbonCommands.xml. El objeto CustomAction contiene el formato de personalización de la cinta de opciones.
Lee varios elementos y valores de atributo del objeto CustomAction .
Convierte el elemento CommandUIExtension (que define los grupos de la cinta de opciones, los botones y los controladores de eventos de la interfaz de usuario) en una cadena denominada xmlContent.
Crea una nueva acción personalizada mediante clientContext.Web.UserCustomActions.Add.
Agrega el marcado de personalización de la cinta de opciones (en xmlContent) al sitio de SharePoint mediante CustomAction.CommandUIExtension.
Registra la cinta personalizada estableciendo CustomAction.RegistrationId y CustomAction.RegistrationType en los valores de atributo del objeto CustomAction leídos en el paso 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();
}
}