首页 > 解决方案 > 如何使用 SharePoint 框架的 TypeScript API 检索列表视图的项目?

问题描述

给定某个 SharePoint Online 列表的命名视图,我如何使用 TypeScript 检索视图的项目,TypeScript 是在与列表相同的租户中运行的 Web 部件的一部分?

标签: typescriptrestsharepoint-onlinesharepoint-listsharepointframework

解决方案


和:

import { SPHttpClient, SPHttpClientResponse, ISPHttpClientOptions } from '@microsoft/sp-http';

并给出:

List: List1

View: View1

此 SPFX REST API 代码:

  const executeJson = (endpointUrl, payload) => {
    const opt: ISPHttpClientOptions = { method: 'GET' };
    if (payload) {
      opt.method = 'POST';
      opt.body = JSON.stringify(payload);
    }
    return this.context.spHttpClient.fetch(endpointUrl, SPHttpClient.configurations.v1, opt);
  };
  const getListItems = (webUrl,listTitle, queryText) => {
    var viewXml = '<View><Query>' + queryText + '</Query></View>';
    var endpointUrl = webUrl + "/_api/web/lists/getbytitle('" + listTitle + "')/getitems"; 
    var queryPayload = {'query' : { 'ViewXml' : viewXml } };
    return executeJson(endpointUrl, queryPayload);
  };
  const getListViewItems = (webUrl,listTitle,viewTitle) => {
    var endpointUrl = webUrl + "/_api/web/lists/getByTitle('" + listTitle + "')/Views/getbytitle('" + viewTitle + "')/ViewQuery";
    return executeJson(endpointUrl, null).then((response: SPHttpClientResponse) => { return response.json(); })
    .then(data => {         
      var viewQuery = data.value;
      return getListItems(webUrl,listTitle,viewQuery); 
    });
  };

  const url = this.context.pageContext.site.absoluteUrl;
  getListViewItems(url,'List1','View1')
  .then((response: SPHttpClientResponse) => { return response.json(); })
  .then(response=>{
    for (var item of response.value) {
      console.log(item);
    }
  });

将列表视图的项目打印到控制台。

谢谢:Vadim Gremyachev 的 SharePoint 2013 回答


推荐阅读