SharePoint【Ribbon系列】-- 02.在Ribbon中添加新Tab

有了上面的基础,我们来看看如何向Sharepoint网站的Ribbon中添加我们定义的Tab。

    直接进入操作步骤  

    一、创建 SharePoint 项目

    要添加新选项卡,应首先创建一个空白 SharePoint 项目。如下:
   

    把此方案设置成Farm解决方案

    然后在此项目中分别加入新的Feature与新的空白Element如下图

  

 

   二、使用自定义操作中的功能区 XML 定义功能区自定义项

   方法是 打开 Elements.xml 文件,其内容如下:   

View Code
<?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">

        <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>

  下面对其内容作如下说明: 

复制代码
<?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">

         <CommandUIExtension>
             <CommandUIDefinitions>
                 <CommandUIDefinition
                   
Location="Ribbon.Tabs._children">

 
复制代码

在对Ribbon进行自定义时,你需要把CustomAction 元素与Ribbon的XML 一起使用。CustomAction元素的Location 属性告知 CustomAction 在何处应用自定义项(即此元素内的所有自定义内容)。

下表对这些Location可能的值进行了说明。本例我们把Location值设置为CommandUI.Ribbon.ListView 也即我们此处定义的自定义项(Tab)将在我们显示列表视图的WebPart时出现在Ribbon区域,而基其它时候我们是看不见它的。 

                    值

                              说明

CommandUI.Ribbon

对于指定的 RegistrationId,自定义项出现在任何地方。

CommandUI.Ribbon.ListView

当存在列表视图 Web 部件时出现自定义项。

CommandUI.Ribbon.EditForm

自定义项出现在编辑表单上。

CommandUI.Ribbon.NewForm

自定义项出现在新建表单上。

CommandUI.Ribbon.DisplayForm

自定义项出现在显示表单上。

 关于RegistrationId属性:用于指定与此操作(CustomAction )关联的列表或项内容类型的标识符,或文件类型或编程标识符 (ProgID)。关于它们的含义请参见

                                     Sharepoint学习笔记—Ribbon系列-- Reference :List definitions Type and BaseType ,此处我们设置为101也即我们自定义的CustomAction与

                                    Document library //文档库 进行关联。也就是说当我们选择Sharepoint网站的某个DocumentLibrary List时,就会出现我们自下定义的CustomAction选项卡(Tab),也就是说,

                                   在CustomAction的相关属性设置中,我们解决了它显示的“时机”问题。

RegistrationType属性: 用于给每项操作指定注册附件。可能的值包括:ContentType,FileType,List,ProgId

 

复制代码
<CommandUIExtension>
             <CommandUIDefinitions>
                 <CommandUIDefinition
                   
Location="Ribbon.Tabs._children">

                     <Tab
                       
Id="Ribbon.CustomTabExample"
                       Title
="My Custom Tab"
                       Description
="This holds my custom commands!"
                       Sequence
="501">

 
复制代码

CommandUIDefinition 元素上的 Location 定义其内部控件呈现的位置。在本示例中,您将引用服务器功能区(Ribbon)的 Tabs 集合(Ribbon.Tabs._childern)。_children 约定告知功能区将以下 XML 插入到输出中以便呈现功能区。在本例中,您将插入 Tab 元素 XML。

Tab元素中的Sequence 属性将定义Tab相对于其他Tabs所呈现的位置。Sharepoint系统默认的Tab使用 100 的整倍数作为它们的Sequence值,因此用户自定义的Tab的Sequence 属性不应是 100 的整倍数以防止与系统的默认Sequence值出现冲突。应避免冲突,以确保对功能区 XML 进行适当处理。

 由此可见,CustomAction影响了显示的“时机”,此处CommandUIDefinition与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"
                               Size
="OneLargeTwoMedium" />

                         </Scaling>
 
复制代码

 

在创建自定义Tab时,您必须定义在添加控件时如何对Tab进行缩放。通过将 Scaling 元素与 GroupTemplate 一起使用可对此进行处理。

MaxSize 元素对组(Group)中控件的最大大小进行定义。而 Scale 元素定义组(Group)如何在不同的情况下进行缩放。

GroupId 属性将一个组与缩放大小相关联。

Size 属性由稍后在GroupTemplate 中定义的 Layout 元素定义。

 

复制代码
                        <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"/>

 
复制代码

Groups 元素对将在选项卡上出现的组进行定义。Group 元素自身具有与其他控件相似的属性以及一个 Template 属性。

Template 属性引用我们后面将要定义的 GroupTemplate,Sharepoin要求每一个Group都必须与某个特定的GroupTemplate项进行绑定,并推荐用户尽量使用用户自已定义的GroupTemplate.

Controls 元素包含将在组中出现的控件。组内部的控件必须定义 TemplateAliasCommand 属性。与Tab类似,每个控件具有一个 Sequence 属性,用于定义这些控件将在组中出现的位置。默认控件基于 10 的整倍数,所以任何自定义控件不应使用 10 的整倍数以避免发生冲突。Command 属性由 CommandUIHandler 元素使用,并且即使在未指定 CommandUIHandler 时也要求使用此属性。TemplateAlias 属性定义控件相对于 GroupTemplate 出现的位置。

 

复制代码
                 <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>
 
复制代码

 定义组模板(GroupTemplate)时,您必须将其定义为另一个 CommandUIDefinitionCommandUIDefinition 具有 Ribbon.Templates._children 位置。这与用于组和选项卡的模式相同。

GroupTemplate 元素包含一个 Layout 元素,后者又包含 SectionOverflowSection 元素。Layout 元素具有一个 Title 属性,可用于 MaxSizeScale 元素上的 Size 属性。

Section 元素具有两个属性。Alignment 属性对以下 Row 元素中的控件所处的位置进行定义。Type 属性定义将在对应的部分显示的行数。一个 Section 最多具有三个 Row 元素。

Row 元素包含一个或多个 ControlRef 元素。每个 ControlRef 元素定义一个控件在功能区的显示方式。DisplayMode 属性包含以下值(注:并非所有的控件都提供所有的 DisplayMode 值)。

   值

                  说明

Small

显示为无标签文本的小图标。

Medium

显示为带有标签文本的 16 x 16 的图标。

Large

显示为带有标签文本的 32 x 32 的图标。

Text

仅显示为文本。

还可以有一个 OverflowSection 元素而不是 Section 元素。此元素定义一个区域,在此区域中,不必使用 Row 元素即可显示多个控件。所有的控件都将显示为由 DisplayMode 属性定义的相同大小。DividerAfterDividerBefore 属性定义在显示溢出部分时分隔线将出现的位置。

向默认功能区位置添加控件时,您应该考虑组模板和缩放。向默认位置添加控件可改变组的显示。大多数默认组模板包含将随自定义控件一起增长的溢出部分。在更高级的方案中,您可以重写缩放来根据设计需要显示控件。 

复制代码
             <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>
 
复制代码

 CommandUIHandlers 元素包含所有 CommandUIHandler 元素。CommandUIHandler 元素定义功能区上的控件如何响应某个操作。Command 属性是与随控件定义的 Command 属性一起使用的命令的唯一名称。CommandAction 属性包含可对控件执行的操作。此操作可以是 ECMAScript(JavaScript、JScript)、URL 或 UrlAction 元素中以前包含的任意内容。

 

    三、部署自定义项
    按 F5。Visual Studio 2010 中的 SharePoint 开发工具将自动构建和部署功能。
    转到网站或子网站中的文档库。
   单击“My Custom Tab”选项卡,查看“自定义组”,然后单击“Hello, World”、“Good-bye, World”或“I Love You, World”按钮。


 

posted @ 2013-02-20 19:58  绿森林  阅读(284)  评论(0编辑  收藏  举报