Adicionar uma faixa de opções personalizada ao seu site do SharePoint
Adicionar ou remover uma faixa de opções personalizada no seu site do SharePoint. Adicione manipuladores de eventos JavaScript usando a técnica de JavaScript incorporada para manipular eventos de sua faixa de opções personalizada.
Aplica-se a: suplementos do SharePoint | SharePoint 2013 | SharePoint Online
O exemplo de código Core.RibbonCommands mostra como adicionar uma faixa de opções personalizada a um site do SharePoint. Use esta solução se desejar:
Adicionar um gruo, um botão ou uma faixa de opções personalizada à sua lista ou site do SharePoint.
Exibir uma faixa de opções personalizada para listas, sites ou tipos de conteúdo específicos.
Observação
Este exemplo de código mostra como chamar as funções JavaScript que manipulam eventos gerados pelos botões da faixa de opções. Este exemplo de código não fornece a implementação das funções do manipulador de eventos do JavaScript para os botões da faixa de opções. Para implementar as funções do manipulador de eventos do JavaScript, use a técnica de incorporação de JavaScript para incorporar as funções do manipulador de eventos do JavaScript em todas as páginas em que sua faixa personalizada aparecer. Para obter mais informações sobre como inserir o JavaScript, consulte Personalizar a interface do usuário do site do SharePoint usando JavaScript.
Antes de começar
Para começar, baixe o suplemento de exemplo Core.RibbonCommands do projeto de padrões e práticas do desenvolvedor Office 365 no GitHub.
Usar o aplicativo Core.RibbonCommands
Ao executar este exemplo de código, na página inicial em Registrar a faixa de opções, escolha Adicionar Faixa de Opções. Quando a página for atualizada, exiba a faixa de opções personalizada escolhendo aguiaDocumentos Personalizados>.
Este exemplo de código define uma faixa de opções personalizada usando Models\RibbonCommands.xml. RibbonCommands.xml define grupos de faixas de opções personalizadas, botões e manipuladores de eventos da interface do usuário para a faixa de opções. Para saber mais, confira Personalizar e estender a faixa de opções de servidor do SharePoint 2010 e Faixa de opções de servidor XML.
A faixa de opções personalizada é exibida em todos os sites e listas na Web do host porque RegistrationId="0x01" e RegistrationType="ContentType". RegistrationId="0x01" e RegistrationType="ContentType" especificam que a faixa de opções será exibida para todos os tipos de conteúdo que herdam do tipo "0x01", que são tipos de conteúdo que herdam da classe Item . Para aplicar sua faixa de opções a um tipo de conteúdo personalizado, substitua "0x01" pela ID do tipo de conteúdo personalizado. Para aplicar sua faixa de opções a uma lista, altere o valor de RegistrationType para Lista.
Observação
The code in this article is provided as-is, without warranty of any kind, either express or implied, including any implied warranties of fitness for a particular purpose, merchantability, or non-infringement.
<?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>
Observação
Se você usar a técnica JavaScript inserida para implementar o tratamento de eventos para os botões de suas faixas de opções, o arquivo JavaScript deverá implementar os métodos definidos nos elementos CommandUIHandler . Por exemplo, seu arquivo JavaScript incorporado deve implementar funções como GetCurrentItem e AddNewCustom.
InitializeButton_Click em Default.aspx executa as seguintes tarefas:
Chama GetCustomActionXmlNode para ler o arquivo XML e retornar o objeto CustomAction definido em RibbonCommands.xml. O objeto CustomAction contém a marcação de personalização da faixa de opções.
Lê vários elementos e valores de atributo do objeto CustomAction .
Converte o elemento CommandUIExtension (que define os grupos de faixa de opções, botões e manipuladores de eventos da interface do usuário) em uma cadeia de caracteres chamada xmlContent.
Cria uma nova ação personalizada usando clientContext.Web.UserCustomActions.Add.
Adiciona a marcação de personalização de faixa de opções (em xmlContent) ao site do SharePoint usando o CustomAction.CommandUIExtension.
Registra a faixa de opções personalizada definindo o CustomAction.RegistrationId e CustomAction.RegistrationType como os valores de atributo do objeto CustomAction lidos na etapa 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();
}
}