PCNote: Ribbon

SharePoint 上 Ribbon 的 Javascript 語法收集

請先參之前的文章使用Elements.xml 客製化 SharePoint 中的 Ribbon ( 自定Tab )

CommandAction="javascript:

var notificationId = SP.UI.Notify.addNotification('大家好!!!');


var statusId = SP.UI.Status.addStatus('Quite important status message');

latestId = statusId;

enableRemoveStatusButton();

最後在 </Elements> 前面加上 enableRemoveStatusButton() 這段程式碼

<CustomAction Id="NewRibbonButtonCommand.CheckEnable" Location="ScriptLink"

            ScriptBlock="

                var latestId = '';

                        

                function enableRemoveStatusButton()

                {

                  if (latestId == '')

                  {

                    return false;

                  }

                  else

                  {

                    return true;

                  }

                }"

                />

底色變成紅色

var statusId = SP.UI.Status.addStatus('Very important status message');

SP.UI.Status.setStatusPriColor(statusId, 'red');

latestId = statusId;

enableRemoveStatusButton();

清除某個Id的訊息

SP.UI.Status.removeStatus(latestId);

 latestId = '';

enableRemoveStatusButton();"

清除所有訊息

SP.UI.Status.removeAllStatus(true);

 latestId = '';

enableRemoveStatusButton();"

參考網址：http://www.sharepointnutsandbolts.com/2010/01/customizing-ribbon-part-1-creating-tabs.html

使用Elements.xml 客製化 SharePoint 中的 Ribbon ( Library )

SharePoint 上 Ribbon 的元件

Tab
Contextual tab group
Group
Control

使用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 配置對應資料夾