在Ribbon中添加新Tab
本文参考自http://www.cnblogs.com/wsdj-ITtech/archive/2012/03/07/2279774.html
根据上述文章的内容自身实践后写的一些自己的理解，如有不同见解，望讨论！
先贴一段新建Tab的代码
<Elements xmlns="http://schemas.microsoft.com/sharepoint/"> <CustomAction Id="MyCustomRibbonTab" Location="CommandUI.Ribbon.ListView" RegistrationId="0x0101010045E25FD930B6D74DB794CC4D2D7D029D" RegistrationType="ContentType"> <CommandUIExtension> <CommandUIDefinitions> <CommandUIDefinition Location="Ribbon.Tabs._children"> <Tab Id="Ribbon.CustomTabExample" Title="My Custom Tab" Description="This holds my custom commands!" Sequence="1001"> <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>
接下来对每个部分进行剖析
<?xml version="1.0" encoding="utf-8"?> <Elements xmlns="http://schemas.microsoft.com/sharepoint/"> <CustomAction Id="MyCustomRibbonTab" Location="CommandUI.Ribbon.ListView" //自定义项显示的位置（列表、编辑表单、新建表单等） RegistrationId="101" //在什么结构下显示（文档库、通用列表、表单库、日历等） RegistrationType="List"> //注册类型（ContentType,FileType,List,ProgId）
Location定义在何处应用自定义项，详请见下图
在做到这步的时候对RegistrationId和 RegistrationType有些疑问，进一步研究后，发现两者共同作用于Tab显示时机
例：
RegistrationId="101" RegistrationType="List" 在文档库下显示
RegistrationId="115" RegistrationType="List" 在表单库下显示
RegistrationId="100" RegistrationType="List" 在列表下显示
RegistrationId="0x0101010045E25FD930B6D74DB794CC4D2D7D029RegistrationType="ContentType" 在内容类型ID为RegistrationId时显示
一篇国外的博客在这方面写的很好： http://blog.alexboev.com/2011/12/registrationtype-registrationid-in.html
接下来定义Tab
<CommandUIExtension> <CommandUIDefinitions> <CommandUIDefinition Location="Ribbon.Tabs._children"> //定义呈现的位置，当前呈现在Tabs集合中 <Tab Id="Ribbon.CustomTabExample" Title="My Custom Tab" Description="This holds my custom commands!" Sequence="501"> //定义相对其他Tabs的位置，sharepoint默认是用100的倍数，所以最好使用非100倍数的数字。 //数字越大，位置越靠右
在创建Tab是需要定义控件的缩放：
<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" //绑定缩放的group Size="OneLargeTwoMedium" /> //有GroupTemplate中的Layout元素定义 </Scaling>
对Tab定义后，进一步对Group定义
<Groups Id="Ribbon.CustomTabExample.Groups"> //定义Group
<Group Id="Ribbon.CustomTabExample.CustomGroupExample" Description="This is a custom group!" Title="Custom Group" Sequence="52" //sharepoint默认是10的倍数 Template="Ribbon.Templates.CustomTemplateExample"> //每个Group都需要对应一个Template <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"/>
注意：sharepoint规定每一个Group都要有Template与之对应，Sequence属性与上面的作用一样，用来确定与其他Group的位置。
<CommandUIDefinition Location="Ribbon.Templates._children"> <GroupTemplate Id="Ribbon.Templates.CustomTemplateExample"> //定义组显示结构 <Layout Title="OneLargeTwoMedium" //对应MaxSize和Scale中的Size属性 LayoutTitle="OneLargeTwoMedium"> <Section Alignment="Top" Type="OneRow"> <Row> <ControlRef DisplayMode="Large" TemplateAlias="cust1" /> //‘cust1’与control中的 TemplateAlias对应 </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 元素的定义，用来相应用户的操作
<CommandUIHandlers> //定义如何响应用户操作，对应控件Command属性
<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>
这样，定义的过程就完成了，部署后查看效果
CommandAction定义的操作可以是ECMAScript（JavaScript、JScript）、URL 或 UrlAction 元素中以前包含的任意内容。
这里我给出一个ECMAScript的例子：
<CommandUIHandlers> <CommandUIHandler Command="emailContacts" CommandAction="javascript: function getItemIds() { var itemIds = ''; var items = SP.ListOperation.Selection.getSelectedItems(); var item; for(var i in items) { item = items[i]; if(itemIds != '') { itemIds = itemIds + ','; } itemIds = itemIds + item.id; } return itemIds; } function handleReadyStateChange() { if (client.readyState == 4) { if (client.status == 200) { // client.responseText is mailto string window.location = ('mailto:' + client.responseText); } } } function invokeEmailContacts() { var params = 'itemids=' + getItemIds(); // Posting to EmailContacts.ashx to get the mailto string var site='{SiteUrl}'; var url = site + '/_layouts/emailcontacts.ashx?listId={ListId}'; client = null; client = new XMLHttpRequest(); client.onreadystatechange = handleReadyStateChange; client.open('POST', url, true); client.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); client.setRequestHeader('Content-length', params.length); client.send(params); } invokeEmailContacts();" EnabledScript="javascript: function enableEmailContacts() { var items = SP.ListOperation.Selection.getSelectedItems(); return (items.length > 0); } enableEmailContacts();"/> </CommandUIHandlers>
