PCNote: 使用Elements.xml 客製化 SharePoint 中的 Ribbon ( 自定Tab )

1. 建立一個空的 SharePoint 專案

2. 建立為「沙箱式」方案

3. 加入> 新增項目 > 空元素

<?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="客製化頁籤"
Description="這是客製化的頁籤!!!"
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="底下文字"
Sequence="52"
Template="Ribbon.Templates.myExample">
<Controls Id="Ribbon.CustomTabExample.CustomGroupExample.Controls">
<Button
Id="Ribbon.CustomTabExample.CustomGroupExample.Button1"
Command="CustomTabExample.Button1Command"
Sequence="15"
Description="按鈕一"
LabelText="按鈕一號"
TemplateAlias="cust1"/>

</Controls>
</Group>
</Groups>
</Tab>
</CommandUIDefinition>
<CommandUIDefinition Location="Ribbon.Templates._children">
<GroupTemplate Id="Ribbon.Templates.myExample">
<Layout
Title="OneLargeTwoMedium"
LayoutTitle="OneLargeTwoMedium">
<Section Alignment="Top" Type="OneRow">
<Row>
<ControlRef DisplayMode="Large" TemplateAlias="cust1" />
</Row>
</Section>

</Layout>
</GroupTemplate>
</CommandUIDefinition>
</CommandUIDefinitions>
<CommandUIHandlers>
<CommandUIHandler
Command="CustomTabExample.Button1Command"
CommandAction="javascript:
var dialogOptions = {
url: '/_layouts/SPSRibbon/Demo.aspx',
title: 'Demo測試頁',
allowMaximize: true,
showClose: true,
width:500,
height:400
};
SP.UI.ModalDialog.showModalDialog(dialogOptions); " />

</CommandUIHandlers>
</CommandUIExtension>
</CustomAction>
</Elements>

4. 因為上面的 javascript 按鈕去讀取一個「_layouts/SPSRibbon/Demo.aspx」的應用程式頁面

所以現在要產生一個頁面，這個頁面要放在「_layouts/SPSRibbon/」，在SharePoint 2010的作法如下：

加入 > SharePoint 配置對應資料夾