如何:使用 JavaScript 添加和修改用户自定义操作

上次修改时间: 2011年6月20日

适用范围: SharePoint Foundation 2010

本文内容
使用 ECMAScript(JavaScript、JScript)为列表项添加用户自定义操作
使用 JavaScript 修改用户自定义操作
向网站的"网站操作"中添加用户自定义操作

可以使用客户端对象模型向用户界面中添加自定义操作。UserCustomActions 属性返回网站集、网站或列表的自定义操作的集合。若要在其中一个集合中创建自定义操作,可调用 UserCustomActionCollection 对象的 add() 函数。在返回的 UserCustomAction 上设置新操作的属性,然后在通过调用 executeQueryAsync(succeededCallback, failedCallback) 执行查询之前调用 update() 函数。用户自定义操作的位置可以由其命名空间位置、自定义操作组以及相对于其他用户自定义操作的顺序确定。有关列出自定义操作位置和组的可能值的表,请参阅默认自定义操作位置和 ID

使用 ECMAScript(JavaScript、JScript)为列表项添加用户自定义操作

以下示例向为列表项显示的下拉菜单中添加用户自定义操作。为了将新操作放置到菜单上,location 属性指定 EditControlBlock,sequence 指定相对于其他用户自定义操作的放置顺序,而 url 指定用于定义该操作的页面的绝对路径。该示例假定 %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\LAYOUTS 中存在 .aspx 文件。

var siteUrl = '/sites/MySiteCollection';

function createUserCustomActionList() {

    var clientContext = new SP.ClientContext(siteUrl);
    var oWebsite = clientContext.get_web();
    this.oList = oWebsite.get_lists().getByTitle('My List');
    var collUserCustomAction = oList.get_userCustomActions();
        
    var oUserCustomAction = collUserCustomAction.add();
    oUserCustomAction.set_location('EditControlBlock');
    oUserCustomAction.set_sequence(100);
    oUserCustomAction.set_title('My First User Custom Action');
    oUserCustomAction.set_url(siteUrl + '/_layouts/MyPage.aspx');
    oUserCustomAction.update();
        
    clientContext.load(oList, 'Title' ,'UserCustomActions');
    
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}

function onQuerySucceeded() {

    alert('Custom action created for ' + this.oList.get_title());}

function onQueryFailed(sender, args) {

    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

使用 JavaScript 修改用户自定义操作

以下示例从用户自定义操作集合中为列表项的下拉菜单检索相关操作,并更新该自定义操作以包含代表菜单操作的图标。该示例假定 %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\IMAGES 中存在图标图像文件。

var siteUrl = '/sites/MySiteCollection';

function modifyUserCustomAction() {

    this.clientContext = new SP.ClientContext(siteUrl);
    var oWebsite = clientContext.get_web();
    this.oList = oWebsite.get_lists().getByTitle('My List');
    this.collUserCustomAction = oList.get_userCustomActions();
        
    clientContext.load(oList,'UserCustomActions','Title');

    clientContext.executeQueryAsync(Function.createDelegate(this, this.SetImage), Function.createDelegate(this, this.onQueryFailed));
}

function SetImage() {

    var customActionEnumerator = collUserCustomAction.getEnumerator();

    while (customActionEnumerator.moveNext()) 
    {
        var oUserCustomAction = customActionEnumerator.get_current();
            
        if (oUserCustomAction.get_title() == 'My First User Custom Action') 
        {
            oUserCustomAction.set_imageUrl('http://MyServer/_layouts/images/MyIcon.png');
            oUserCustomAction.update();
                
            clientContext.load(oUserCustomAction);

            clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
        }
    }
}

function onQuerySucceeded() {

    alert('Custom action changed for ' + this.oList.get_title());
}

function onQueryFailed(sender, args) {

        alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

向网站的"网站操作"中添加用户自定义操作

在网站的"网站操作"菜单上创建用户自定义操作与为列表项创建操作类似:调用 add() 函数,设置操作的属性,然后调用 update()。以下示例指定 Microsoft.SharePoint.StandardMenu 作为 location,并指定 SiteActions 作为 group,以便将新操作放置在"网站操作"菜单上。sequence 的值指定 101,因此该操作将出现在序列号为 100 的操作的下面。该示例假定 %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\LAYOUTS 中存在 .aspx 文件。

var siteUrl = '/sites/MySiteCollection';

function createUserCustomActionSite() {

    var clientContext = new SP.ClientContext(siteUrl);
    this.oWebsite = clientContext.get_web();
    var collUserCustomAction = oWebsite.get_userCustomActions();
        
    var oUserCustomAction = collUserCustomAction.add();
    oUserCustomAction.set_location('Microsoft.SharePoint.StandardMenu');
    oUserCustomAction.set_group('SiteActions');
    oUserCustomAction.set_sequence(101);
    oUserCustomAction.set_title('ECMA Website User Custom Action ECMA');
    oUserCustomAction.set_description('This description appears on the Site Actions menu.');
    oUserCustomAction.set_url(siteUrl + '/_layouts/jstest2.aspx');
    oUserCustomAction.update();
        
    clientContext.load(oWebsite, 'Title', 'UserCustomActions');
    
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}

function onQuerySucceeded(sender, args) {

    alert('Custom action created for ' + this.oWebsite.get_title());
}

function onQueryFailed(sender, args) {

    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

请参阅

概念

默认自定义操作位置和 ID

数据检索概述

创建客户端对象

客户端对象模型准则

JavaScript 对象模型中的常见编程任务

网站导航

其他资源

ECMAScript 类库