如何使用SharePoint JSOM从图像库应用程序获取图像?

时间:2014-12-15 06:32:58

标签: sharepoint sharepoint-2013 sharepoint-api sharepoint-online

我正在尝试为在线SharePoint托管的网站编写SharePoint Web部件。我环顾四周,但找不到如何访问基本列表。我需要访问由Image Libary应用程序创建的列表,但是当我查看管理UI中的列表列时,我只能看到文本列,而我只想出了如何在我的js代码中访问这些文本列: "

var oneList = this.web.get_lists().getByTitle("RotatingBannerImages");
var query = new SP.CamlQuery();
this.listItems = oneList.getItems(query);
context.load(listItems);

context.executeQueryAsync(
    Function.createDelegate(this, successHandler),
    Function.createDelegate(this, errorHandler)
);

function successHandler() {
    var itemEnum = listItems.getEnumerator();
    while (itemEnum.moveNext()) {
        var item = itemEnum.get_current();
        console.log(item.get_item("Title")); // Returns null on image list.
    }
}

当我访问纯文本列表时,表达式item.get_item("Title")返回列表项标题,我在移动图像库列表之前用它来建立我的API代码。我在调试器中尝试的几乎所有内容都返回一个对象,这需要另一轮方法调用来检查它。

2 个答案:

答案 0 :(得分:1)

如何通过SharePoint JSOM访问列表项属性至少有3个选项。

以下示例演示了如何访问SP.ListItem.id property

var ctx = SP.ClientContext.get_current();
var web = ctx.get_web();
var list = web.get_lists().getByTitle("Images");
var items = list.getItems(SP.CamlQuery.createAllItemsQuery());
ctx.load(items);

ctx.executeQueryAsync(
    function() {

       for(var i = 0; i < items.get_count(); i++) {
           var item = items.getItemAtIndex(i);    

           console.log(item.get_item("ID")); // 1st Option 
           console.log(item.get_fieldValues().ID); // 2nd Option
           console.log(item.get_id()); // 3d Option
       }
    },
    function(sendera,args){
       console.log(args.get_message());
    }
);

选项1

使用SP.ListItem.item property获取或设置指定的字段值,例如返回图片库中列表项的图片网址:

var imageUrl = item.get_item("FileRef")

选项2

SP.ListItem.fieldValues property存储一组键/值对,其中包含列表项字段的名称和值,例如:

var imageUrl = item.get_fieldValues().FileRef;

var imageUrl = item.get_fieldValues()['FileRef'];

选项3

SP.ListItem object公开了一些属性,例如SP.ListItem.id property,例如:

var itemId = item.get_id();

答案 1 :(得分:0)

您必须加载文件详细信息,此处为代码

var web = context.get_web();
var list = web.get_lists().getByTitle("Pictures");

var query = new SP.CamlQuery();
this.listItems = list.getItems(query);
context.load(listItems);

context.executeQueryAsync(
    Function.createDelegate(this, successHandler),
    Function.createDelegate(this, errorHandler)
);

function successHandler() {
    var itemEnum = listItems.getEnumerator();
    while (itemEnum.moveNext()) {
        var item = itemEnum.get_current();
        this.fileImg = item.get_file();
        context.load(fileImg);

        context.executeQueryAsync(
            Function.createDelegate(this, successFile),
            Function.createDelegate(this, errorHandler)
        );
    }
}

function successFile() {
    console.log(fileImg.get_name());
    console.log(fileImg.get_serverRelativeUrl());
}

function errorHandler()
{
    console.log("Error");
}

无论如何你可以使用jquery我建议你使用REST如下;你可以看到你写的代码更少;

var urlAll = "http://mysite/_api/web/lists/getbytitle('RotatingBannerImages')/items?$expand=File"

$.ajax({
    url : urlAll,
    headers : {
        'Content-Type': 'application/json;odata=verbose'
    },
    type: 'GET',
    success: function(data, textStatus, jqXHR) {
        var files  = data.d.results;
        files.forEach(function(item){
            console.log(item.File.ServerRelativeUrl);
            console.log(item.File.Name);
        });
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.log(errorThrown);
    }
});