SharePoint List Operations Using SPFx Solution With JSOM

小咪蜂

于 2019-02-22 10:23:07 发布

阅读量191

点赞数

分类专栏： sharepoint OWA

sharepoint OWA 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

使用JSOM 需要先执行参考https://docs.microsoft.com/zh-cn/sharepoint/dev/spfx/web-parts/basics/add-an-external-library

加载 SharePoint JSOM

加载 SharePoint JSOM 与加载具有依赖项的非 AMD 脚本本质上属于同一方案。这表示同时使用 globalName 和 globalDependency 两个选项。

重要

注意，以下方法会导致经典 SharePoint 页面发生错误，因为其中已经加载了 SharePoint JSOM。如果你需要 Web 部件同时使用经典页面和新式页面，如果 SharePoint JSOM 已经可用，应该先进行检查，如果不可用，则通过使用 SPComponentLoader 动态加载。

安装属于 JSOM 键入依赖项的 Microsoft Ajax 的键入：

sh复制
```
npm install @types/microsoft-ajax --save
```
安装 JSOM 的键入：

sh复制
```
npm install @types/sharepoint --save
```

向 config.json 添加项：

JSON复制

{
    "sp-init": {
        "path": "https://CONTOSO.sharepoint.com/_layouts/15/init.js",
        "globalName": "$_global_init"
    },
    "microsoft-ajax": {
        "path": "https://CONTOSO.sharepoint.com/_layouts/15/MicrosoftAjax.js",
        "globalName": "Sys",
        "globalDependencies": [ "sp-init" ]
    },
    "sp-runtime": {
        "path": "https://CONTOSO.sharepoint.com/_layouts/15/SP.Runtime.js",
        "globalName": "SP",
        "globalDependencies": [ "microsoft-ajax" ]
    },
    "sharepoint": {
        "path": "https://CONTOSO.sharepoint.com/_layouts/15/SP.js",
        "globalName": "SP",
        "globalDependencies": [ "sp-runtime" ]
    }
}

在 Web 部件中添加 require 语句：

TypeScript复制

require('sp-init');
require('microsoft-ajax');
require('sp-runtime');
require('sharepoint');

加载本地化资源

你可以使用 config.json 中一个名为 localizedResources 的映射描述如何加载本地化资源。此映射中的路径与 lib文件夹相对，其中不能包含前导斜杠 (/)。

在此示例中具有文件夹 src/strings/。在此文件夹中是一些名称为 en-us.js、fr-fr.js、de-de.js 的 JavaScript 文件。因为这些文件中的每一个都必须可通过模块加载程序加载，因此它们必须包含一个 CommonJS 包装器。例如，在 en-us.js 中：

TypeScript复制

  define([], function() {
    return {
      "PropertyPaneDescription": "Description",
      "BasicGroupName": "Group Name",
      "DescriptionFieldLabel": "Description Field"
    }
  });

编辑 config.json 文件。向 localizedResources 添加项。 {locale} 是区域名称的占位符标记：

JSON复制
```
{
    "strings": "strings/{locale}.js"
}
```

添加字符串的键入。在此示例中具有文件 MyStrings.d.ts：

TypeScript复制

declare interface IStrings {
    webpartTitle: string;
    initialPrompt: string;
    exitPrompt: string;
}

declare module 'mystrings' {
    const strings: IStrings;
    export = strings;
}

添加项目中字符串的导入项：

TypeScript复制
```
import * as strings from 'mystrings';
```
在项目中使用字符串：

TypeScript复制
```
alert(strings.initialPrompt);
```

Here, let us look at performing basic list operations, using SharePoint JavaScript Object Model (JSOM) on SharePoint Framework Solutions (SPFx).

Microsoft provides the packages for supporting JSOM operations. Usually in the traditional approach, JavaScript files required for JSOM operations are MicrosoftAjax.js, SP.js, SP.runtime.js etc. For SPFx solutions, the required files can be included by installing the required typings.

In my previous article, you will have learned building the code, using JSOM approach on SharePoint Framework Solutions.

The support files are installed, using the typings. Install the required typings (Microsoft.ajax and Sharepoint) before creating the project.

Create the project with no JavaScript framework option, using the command yo @microsoft/sharepoint. In Render method, insert the necessary HTML wrapper to display the data.

Declare other methods to process the data. Four methods are declared to retrieve SharePoint data.

Get Lists
Get List by Title
Create List
Delete List

Get lists

Let us look at retrieving all the lists from SharePoint site, using JSOM approach.

The context of the object is set and then the list collection will be retrieved, using the Web object. The list collection is loaded and executed with the context before looking at the data. Now, using Get Enumerator method, individual list properties are retrieved and displayed.

public GetLists(){
var htmlContext = this;
let siteContent:string = "";
const context: SP.ClientContext = new SP.ClientContext(this.context.pageContext.web.absoluteUrl);
const web: SP.Web = context.get_web();
const lists: SP.ListCollection = web.get_lists();
context.load(lists);
context.executeQueryAsync(function () {
var listenum = lists.getEnumerator();
while (listenum.moveNext()) {
var listItem = listenum.get_current();
siteContent += `<div>
<span>${listItem.get_title()}</span>
</div>`;
}
htmlContext.domElement.querySelector("#siteContent").innerHTML =siteContent;
},
function(sender,args){
console.log(args.get_message());
});
}

Get list by Title

Let us see retrieving the required list, using the title with JSOM approach.

Like the above method, the context is used to retrieve the list collection, using the Web object with context URL. From the list collection, the required list is extracted with getbytitle() method. Now, the list is loaded and executed, using the context. In the success method, the properties are displayed.

public GetList(){
var htmlContext = this;
let siteContent:string = "";
const context: SP.ClientContext = new SP.ClientContext(this.context.pageContext.web.absoluteUrl);
const web: SP.Web = context.get_web();
const lists: SP.ListCollection = web.get_lists();
const list: SP.List = lists.getByTitle("TestList");
context.load(list);
context.executeQueryAsync(function () {
siteContent += `<div>
<div><h2>Title : ${list.get_title()}</h2></div>
<div>Description : ${list.get_description()}</div>
<div>Template : ${list.get_baseTemplate()}</div>
<div>Total Items : ${list.get_itemCount()}</div>
</div>`;
htmlContext.domElement.querySelector("#siteContent").innerHTML =siteContent;
},
function(sender,args){
console.log(args.get_message());
});
}

Create list

Let us create a list, using JSOM approach. Like the previous method, the list collection is retrieved. To the list collection, a new list is added using the list creation information object. The list creation object contains the basic list information. Now, the list is loaded and executed , using the context.

public CreateList(){
var htmlContext = this;
let siteContent:string = "";
const context: SP.ClientContext = new SP.ClientContext(this.context.pageContext.web.absoluteUrl);
const web: SP.Web = context.get_web();
const lists: SP.ListCollection = web.get_lists();
var listCreationInfo = new SP.ListCreationInformation();
listCreationInfo.set_title('TestList1');
listCreationInfo.set_templateType(SP.ListTemplateType.genericList);
const list:SP.List = lists.add(listCreationInfo);
context.load(list);
context.executeQueryAsync(function () {
siteContent += `<div>
<div><h2>Title : ${list.get_title()}</h2></div>
<div>Description : ${list.get_description()}</div>
<div>Template : ${list.get_baseTemplate()}</div>
<div>Total Items : ${list.get_itemCount()}</div>
</div>`;
htmlContext.domElement.querySelector("#siteContent").innerHTML =siteContent;
},
function(sender,args){
console.log(args.get_message());
});
}

Delete list

Here, we will see deleting the existing list from the site by JSOM approach. The list is retrieved like Get list by Title method. Now, the list object is deleted, using deleteObject() method. Now, the context is executed.

public DeleteList(){
var htmlContext = this;
let siteContent:string = "";
const context: SP.ClientContext = new SP.ClientContext(this.context.pageContext.web.absoluteUrl);
const web: SP.Web = context.get_web();
const lists: SP.ListCollection = web.get_lists();
const list:SP.List = lists.getByTitle("TestList1");
list.deleteObject();
context.executeQueryAsync(function () {
siteContent += `<div>TestList1 list deleted</div>`;
htmlContext.domElement.querySelector("#siteContent").innerHTML =siteContent;
},
function(sender,args){
console.log(args.get_message());
});
}

Deploy/ Run

To test the solution, using the command prompt, run Gulp serve command for testing. From the required site, open the workbench.aspx file and add the Web part. The Web part will display the site properties.

To deploy the solution, the solution should be bundled and packaged. Now, the files should be uploaded to SharePoint site (Office 365 site) and then the app is deployed.

The article given below shows the detailed steps for bundling, packaging and deploying.

Developing Web Parts Using SharePoint Framework - Part Three

Summary

Thus, you have learned developing the list operations on SharePoint Framework Solutions with JavaScript Object Model (JSOM) approach.

https://www.c-sharpcorner.com/article/sharepoint-list-operations-using-spfx-solution-with-jsom/

小咪蜂

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SharePoint List Operations Using SPFx Solution With JSOM

使用JSOM 需要先执行参考https://docs.microsoft.com/zh-cn/sharepoint/dev/spfx/web-parts/basics/add-an-external-library加载 SharePoint JSOM加载 SharePoint JSOM 与加载具有依赖项的非 AMD 脚本本质上属于同一方案。这表示同时使用 globalName 和 glob...
复制链接

扫一扫

专栏目录