51CTO 博客链接：​​​https://blog.51cto.com/u_13637423​​ 

最近一段时间，给客户或者Partner处理问题时，经常面临SharePoint 列表视图阈值问题，今天整理本文给大家介绍一下如果大家有存储items数量比较多的大型列表，如何克服SharePoint Online List View Threshold的问题，比如说列表中的项目数超过了列表视图阈值5000个items，无法正常显示等等。

首先，这里给大家介绍一下什么是列表视图阈值？

在SharePoint Online中，Microsoft 设置了一个阈值或者限制，一次在单个视图中检索的项目或者文件不得超过5000个，这样在从大型的SharePoint List或者Document Library中检索item或者document时，就不会出现性能问题。

如果你打开一个列表视图，它视图检索超过5000个items的时候，页面会提示：The number of items in this list exceeds the list view threshold, which is 5000 items. Tasks that cause excessive server load (such as those involving all list items) are currently prohibited

一旦出现列表阈值问题，你将无法在列表中执行任何操作，比如无法对某个item或者folder单独授权权限，会有如下错误提示：the attempted operation is prohibited because it exceeds the list view threshold

说明：上述问题只发生在特定的视图中显示超过5000个items的时候，会出现问题，但不影响我们在列表中存储items，因为我们可以最多存储30 million 个item或者document。

那么为什么SharePoint List View会出现5000阈值错误呢？实际上SharePoint 列表视图阈值限制是来自于SQL服务器，因为List data和List Column存储在单个SQL表中，在SharePoint中浏览List时，SharePoint会自动将查询发送给SQL，后者将返回用户请求结果。对于Performance view，如果SQL在单个SQL表中执行查询（如果超过5000个items时），则SQL会将执行查询时锁定整个表，比如说SharePoint Online的某个list中存储10000个item，当你尝试在视图中显示它们时，在后台会触发一个对SQL的查询，这就产生了问题，暂时锁定了SQL table。

那么如何克服和解决List View Threshold的问题呢？

如果要解决这个问题，就不要在单个时间点检索或者获取超过5000个items。推荐以下4种解决方案：

方案1：使用SharePoint List Modern Experience

在SharePoint Online中，你可以对list或者library启用Modern Experience，与Classic 对比，他们的分页工作方式不同，如下所示：

方案2：创建多个List View或者给List View添加Filter

·       创建多个List View，因为每个View可以以不同的方式显示内容，所以可以根据用户的需求，创建多个List View将Items数量降低到5000以下。

·       给List View添加Filter，我们可以根据实际需求，来给List View添加Filter，比如按照Item的创建或者修改时间进行过滤，让其Item返回的值小于5000

​方案3：添加Index

添加Index，向List Column添加Index，用于排序和筛选View，这样会绕过阈值，但我们只能在list中添加20个index column。

方案4：为List或者Library启用Automatic Index management

如果用户在List或者Library的Advanced Settings中启用了Automatic Index management，那么会在SharePoint Online中关联一个Large list column index management的timer job，这样当list中的item超过2500时，会自动创建索引。

Content Type Hub is simple site collection where we can create our Content types and site columns in SharePoint with the help of Managed Metadata Service Application, these Content types can be used across the site collections.

Often we feel our Content Type should be available for all Lists or Libraries in the farm. It should be not confined within site collections. Content Type Hub is perfect solution for such scenarios.

How to Create Content Type Hub

Prerequisite

1. Site collection.
2. Managed Metadata Service Application.

Let’s Create Site Collection for Content Type Hub.

Central Administration, Application Management, then create Site collections (Under Site Collections).

Fil in the following,

Web Application: Select your web application where you want your Content Type Hub Site Collection.

Title: Content Types Hub

Description: Content Types Hub

URL: Specify your Content Types Hub URL

Select a template: Team Site (Under Collaboration)

Primary Site Collection Administrator: Your Site Collection Admin

Click Ok.



Your Site Collection will be Created.

Now you have site collection for Content Type Hub.

Enable Content Type Syndicate Hub in this site Collection.

Gearbox-->Site settings--> Site collection features (Under Site Collection Administration)




Content Type Syndicate Hub-->Activate



Now let’s create Content Type.

Gearbox-->Site settings--> Site content types (Under Web Designer Galleries) --> Site content types--> Create.



Now you can Add site columns in this Content Type.

I have added four site columns to this content type: Vendor, PO Number, PO Ammount, PODate.



You can refe tor this article to learn How to add site columns in Content Type.

Content Type Hub works with Managed Metadata Service Application.

Let’s Register Content Type Hub Site Collection in Managed Metadata Service Application.

Note:

If Managed Metadata Service Application is not configured then visit this article to configure it first. And associate Managed Metadata Service connection with your web application.

Go to Central Administration -->Application Management--> Manage service application (Under Service Applications),



Single Click on MetadataServiceApp row-->Properties.

Enter your Content Type Hub site collection URL in Content Type hub.



Single Click on MetadataServiceApp connection row-->Properties.

CheckedConsumes content types from the Content Type Gallery at http://your content type hub site collection.



Now your Content Type Hub Site Collection is registered with Managed Metadata Service Application.

Now comeback to Content Type Hub site collection and Go to Content Type you created in previous steps i.e. Demo Content Type Hubunder Custom Content Type Hub Group.



Click Demo Content Type Hub

Click Manage publishing for this content type.



Checked Publish and click OK.



Once Published, Republish radio button will be checked.

You can verify by clicking Manage publishing for this content type.



Now run the timer job to publish Content type for site collections.

Goto Central Administration-->Monitoring-->Review Job definitions (Under Timer Jobs).



Find Content Type Hub and click,



Click Run Now.



Same as above find Content Type Subscriberand click it.



Click Run Now,



You can cross check whether Timer job succeeded or not.

Go to Central Administration, Monitoring, Job Definitions, then Job History

Find Content Type Hub and Content Type Subscriber.

Both Job should be succeeded with the time effect when you clicked.




After running the timer job, the content type should be published.

Now let’s consume this Content Type in another site collection.

I have already created site collection. If you don’t have another site collection then create new one.

Go to your site collection (In my case it is Metadata Test Site Collection)

Gearbox-->Site settings--> Content Type Publishing (Under Site Collection Administration)



You will find content type from content type in your this site collection under Subscribed Content Type.



It will be also listed in Site content types under Web Designer Galleries.



Click on Demo Content Type Hub you will have all the columns which you created in earlier steps.



You can refer to this article to learn how to use Content Types.

随着 SharePoint 框架 (SPFx) 的发展，它使用的各种开发工具和库也一并发展。

SharePoint 框架版本兼容性

由于 SharePoint Online 和本地版本的 SharePoint Server 针对新功能具有不同的发布周期，因此它们支持的 SharePoint 框架功能也不同。

SharePoint Online 始终使用最新版本的 SharePoint 框架，但 SharePoint 2016 和 SharePoint 2019 仅支持与已部署的包的服务器端依赖项相匹配的版本。

要详细了解使用 SharePoint 2016 功能包 2 和 SharePoint 2019 进行的 SharePoint 框架开发，请参阅：

• 使用 SharePoint 2016 功能包 2 进行 SharePoint 框架开发
• 使用 SharePoint Server 2019 进行 SharePoint 框架开发

SPFx 开发环境兼容性

随着每个新版本的 SharePoint 框架的发布，会不断添加对更新版本的库的支持，确保工具集始终最新。

下表列出了 SharePoint 框架及常用工具和库的兼容版本：

https://docs.microsoft.com/zh-cn/sharepoint/dev/spfx/compatibility

SharePoint Server 2019 支持经典和新式页面中的 SharePoint 框架客户端 Web 部件，及新型页面中的扩展。

使用 SharePoint 框架的哪个版本

由于 SharePoint Online 和 SharePoint Server 2019 针对新功能具有不同的发布周期，因此就 SharePoint 框架而言，它们也具有不同的功能。 SharePoint Online 始终使用最新版本的 SharePoint 框架，但 SharePoint Server 2019 仅支持与已部署程序包的服务器端依赖项相匹配的版本。

SharePoint Server 2019 使用 SharePoint 框架 v1.4.1 支持在经典或新型 SharePoint 页面上托管的 SharePoint 框架客户端 Web 部件。 SharePoint Server 2019 也使用 SharePoint 框架 v1.4.1 支持在经典或新式 SharePoint 页面上托管的 SharePoint 框架扩展。 这意味着，当面向 SharePoint Server 2019 平台时，因为服务器端版本依赖关系，将需要使用 SharePoint 框架 v1.4.1。

从 1.3 开始，SharePoint 框架 Yeoman 生成器支持使用 SharePoint 框架最新版本（旨在与 SharePoint Online 一起使用）的基架搭建解决方案，以及可用于 SharePoint 本地环境的解决方案（基于 SharePoint 框架 v1.1.0 或 v1.4.1）。无需安装单独版本的 SharePoint 框架 Yeoman 生成器，为解决方案提供支架，才能使用 SharePoint 本地部署。

开发环境考虑事项

在开发 SharePoint 框架客户端 Web 部件时，需要 Internet 连接才能访问 npm 包。 使用 SharePoint 框架 Yeoman 模板为解决方案搭建基架时，这是必要条件。

如果开发计算机无法访问 Internet，可以为所需的 npm 包设置本地内部部署注册表。 然而，这需要额外的软件和大量的工作来设置和维护本地程序包版本与实际 npm 库中的程序包。

Team-based development on the SharePoint Framework（基于团队的 SharePoint 框架开发）指导文档包括开发环境设置适用的不同选项，包括何时需要支持多个 SharePoint 框架版本。

Node.js、Gulp、Yeoman 版本

SPFx v1.4.1 框架、工具和关联版本的相关性与最新版本的 SPFx 的相同相关性矩阵不匹配。 这种情况下，可能需要安装特定版本的工具。

例如，Gulp v3.* 最高只支持 Node.js v10，而 Node.js v12 及更高版本则支持 Gulp v4.*。 由于 SPFx v1.4.1 仅在 Node.js v6 和 Node.js v8 上受支持，因此需要确保安装的是较旧版本的 Node.js、Gulp 和 Yeoman。

Microsoft 建议对支持创建本地项目的 SharePoint 框架 (@microsoft/generator-sharepoint) 使用最新版本的 Yeoman 生成器：SPFx v1.10.1。

1. 安装 Node.js v10.24.1

2. 安装全局依赖项

   控制台复制

    

   npm install gulp-cli@2.3.0 --global
   npm install yo@2.0.6 --global
   npm install @microsoft/generator-sharepoint@1.10.0 --global
   

有关详细信息，请参阅 SharePoint 框架开发工具和库兼容性。

确定解决方案使用的版本

如果现在具备 SharePoint 框架解决方案，并且想确认解决方案使用了哪个版本的 SharePoint 框架，则需要检查以下位置：

• .yo-rc.json: 解决方案根文件夹中的文件，可存储创建解决方案时使用的 SharePoint 框架 Yeoman 模板版本。
• package.json: 解决方案根文件夹中的文件，其中包含对解决方案中使用的程序包版本的引用。
• npm-shrinkwrap.json: 解决方案根文件夹中的文件，其中包含有关所使用的确切版本的信息（适用于使用 npm shrinkwrap 命令来锁定解决方案确切版本的情况）。
• package.json：如果你已为解决方案安装了程序包，则文件位于 node_modules/@microsoft/sp-webpart-base 文件夹中，其包含与使用的 SharePoint 框架版本匹配的 version 属性。

疑难解答

Node.js v6、Node.js v8、HTTP1 和 HTTP2 的影响

大约在 v1.1 发布时，Node.js 正从 Node.js v6.x 过渡到 v8.x。 在此更新中，Node.js 引入了默认 HTTP 协议从 HTTP1 切换为 HTTP2 的更改。 SPFx v1.1 是针对 HTTP1（而非 HTTP2）编写的，因此这项更改影响了 SPFx v1.1 项目的本地 Web 服务器。

在 Node.js v8.x 中，可以强制使用 HTTP1，方法是设置以下环境变量，以指示 Node.js 使用 HTTP1，而不是默认的 HTTP2：NODE_NO_HTTP2=1。 此环境变量仅存在于 Node.js v8.x 中。 这就是构建用于 SharePoint Server 2016 的 SPFx 解决方案时应使用 Node.js v8.x 的原因。

此问题不会影响更高版本的 SPFx，因为这些版本已进行更新以支持 HTTPs。

有关详细信息，请参阅问题 #1002。

https://docs.microsoft.com/zh-cn/sharepoint/dev/spfx/sharepoint-2019-support

https://nodejs.org/download/release/v10.24.1/

Follow the below steps to enable the Document Sets feature, create and configure a Document Set content type and add it to a Document Library.

• Scroll down to Document Sets and click on the Activate button. Wait for a few seconds to activate, A button labeled Active appears after the feature is activated. 

Create a new Document Set content type in Site Collection

 

• Navigate to the site, click the Gear Icon (Settings icon) in the top-right and select Site information.
• Click on View all site settings.
• In the Site Settings page, Under Web Designer Galleries, click Site content types.

• On the Content type gallery page, click Create content type.
• In the Name box, type the name to your new Document Set (ex: Project). This is the name that users will see when they create a new instance of a Document Set in a document library.
• Under Select parent content type from, click Document Set Content Types. (If the Document Set Content Types option is not listed, the Document Sets feature may not be activated for this site collection).
• Click Create button to create the new Document Set content type. Now you can configure and add columns in the newly created content type. 

Add metadata columns to the Document Set content type

 

• Go to the Site Settings page, Under Web Designer Galleries, click Site content types.
• On the Content type gallery page, search and find the content type by name (in our case, the content type is Project), click the name of the Document Set content type to configure columns.

• Add required Site columns by creating a new site column or selecting existing site column. In my case, I have just added two columns (Project Title and Project Manager).

Add and Configure Document Set content type in a Document Library

 

• Navigate to the document library where you want to add the document set feature. Click the Gear Icon (Settings) in the top-right and select Library settings.
• In the Library Settings page, under the General Settings section, click on the Advanced Settings link.

• In the Advanced Settings page, under Content Types section, choose Yes to Allow management of content types, click OK at the bottom of the screen to save the settings. This will allow us to add custom content types.

• As a result of the above change, you will see the section Content Types on the Library Settings page. Under Content Types section, click the “Add from existing site content types” link to proceed next.

• In the Add Content Types page, select your document set content type (In my case, “Project”) and click Add button to move into the right panel, click the OK button to save the changes.

• Now the document set content type is successfully added to the library.
• In the Library Settings page, you can see the new content type under Content Types section, click on the new content type name (ex: Project) to configure settings.

• On the next page, click Document Set Settings to configure Shared and Welcome page columns.

• In the Document Set Settings page, scroll down to Shared Columns section, you can select the required columns to propagate the metadata details to the files uploaded into the document set. Also, you can configure the Welcome Page Columns, the columns to show on the welcome page for the Document Set.

• Finally, scroll down to the bottom of the page and click OK to save the changes.

Once you created and configured a document set content type in a document library, follow the below steps to create a new instance for the document set in the document library.

As already said, the Document Set is a special kind of folder, you can simply open it and upload the required files.

Enable Document Sets feature in Site Collection
• • Navigate to the site collection root, click the Gear Icon (Settings icon) in the top-right and select Site information.
  • Click on View all site settings.
  • In the Site Settings page, under Site Collection Administration, click Site collection features.

Documents in a document set are not inheriting metadata 

• Question

• 

  

  0

  Sign in to vote

  Hi,

  I created a document set with some metadata. When I try to create a document within this document set I'd like to inherit those metadata to the document itself.

  This is unfortunately not working properly...

  Can someone help me?

  I don't want to create a document set WITH documents. I want to create/upload the documents in the document set afterwards...

  Best regards

  Friday, November 9, 2012 9:11 AM

   

  

  Entan Ming

  Wicresoft

   

  26,535 Points

   
 
• 

  

  0

  Sign in to vote

  I did the same settings in my document library.But still it does not the value for shared column value for document.And if I dont put value manually in document properties,document get uploaded in document libraries root folder not in document set.

   

  Please help

  Thursday, April 11, 2019 10:48 AM

   

  <div class="unified-baseball-card-mini" data-profile-rendered="true" data-profile-usercard-customlink="{" href":"https:="" social.technet.microsoft.com="" forums="" systemcenter="" en-us="" user="" threads?user="KK0268&quot;," "text":"kk0268's="" threads"}"="" data-profile-userid="b64b6f50bb58486b97bac09ab86b1c66" style="border: 0px; font-weight: inherit; font-style: inherit; font-family: inherit; margin: 0px; outline: 0px; padding: 0px; direction: ltr; line-height: 16px; min-height: 50px;">

  

  KK0268

   

  20 Points

   
 
• 

  

  0

  Sign in to vote

  I have a (many) document sets that has shared columns that only appear on pdf files. Word, Powerpoint, email msg are not getting their metadata set properly. I am using a Flow to copy the files into the document set.

  

  Sunday, July 26, 2020 5:37 PM

The classic joke in SharePoint is that the debate over folder vs. metadata never ends and will probably never end. Some users prefer metadata, while others are stuck with good-old folders. However, there is one type of functionality that allows the flexibility of both. Today, I want to introduce you to the functionality of Document Sets, the magic feature that allows you to store documents in folders, yet, assign metadata if you wish.

WHAT IS A DOCUMENT SET?

Document Set is a special Content Type. In the past, I have written a few blog posts on content types and how to use them. Check out this post to learn more about what the Content Type is this one about how to use them with documents and document libraries.

To explain in basic terms, Document Set is a folder with metadata. And I am not joking when I say it is a folder. As I will later demonstrate, when you create a document set in SharePoint, behind the scenes you create a regular “yellow” folder. Except, this folder can have metadata assigned to it. And the documents you put inside of that folder can also have metadata assigned to them. Awesome!

WHAT MAKES DOCUMENT SETS SPECIAL?

In addition to being able to have metadata combined with folders, document sets have these special and unique features that make them standout from other document management methods.

Welcome Page

Each Document Set gets its own page that displays folder-level metadata and allows to access the files inside of the folder (document set)

Ability to inherit metadata

You can set the Document Set such that any files uploaded to the Document Set (folder) will inherit the metadata from that folder.

Unique permission for each document set

You can also assign unique permission to each document set. You can do the same with regular folders, but the user experience is much better with document sets.

Ability to search across the document sets

All the document sets (folders) you create reside in a single library. That means that you can easily search across document sets since you will essentially be searching in a single document library (unlike searching across multiple sites, which is a bit tricky).

HOW TO SET UP A DOCUMENT SET

Let’s go ahead and create a document set. For this example, we will create document sets to store our projects (project documents).

Step 1: Enable Document Sets

By default, the document set content type is not enabled. It is a Site Collection feature and must be manually activated before you can proceed and start creating it. To do this:

1. Click Gear Icon > Site Settings (in Modern Pages/Sites, click Gear Icon > Site Information > View all site settings)
2. Under the Site Collection Administration section, click on Site collection features
3. Scroll until Document Sets row and click Activate. Your document set content type is now activated, and you can proceed to the next step!

Step 2: Create a Document Set Content Type

Since Document Set is a special content type, first you need to create a content type – you do that at the Site level.

1. Click the Gear Icon > Site Settings
2. Under Web Designer Galleries, choose Site content types
3. Click Create link
4. On the next screen give your Document Set a name (i.e. Project), then from the Parent Content Type drop-down choose Document Set Content Types, then Document Set from the drop-down below. At the bottom of the screen, choose the group for your new content type (you can leave it in the Custom Content Types group or can create a new one).
5. Your custom Document Set Content Type is created! (but we are not done yet)

Step 3: Add content type to the document library

In this step, we are going to be adding our custom content type to the library.

1. First, we need to enable multiple content types for a document library. In the document library where you want to add document set to, click on Library Settings > Advanced Settings
2. Under Allow management of content types?, choose Yes. This will allow us to add custom content types. Click OK at the bottom of the screen.
3. In the Content Types section that appears as a result of the previous step, click Add from existing site content types
4. On the next screen, select the group where you filed your custom content type in (Custom Content Types in my case), then choose the name of the content type you created in Step 1 and click Add Button. Once the content type appears in the right panel, click OK.
5. Your custom content type is now added to the library. By the way, you might also want to remove the default “Document” Content Type that was there originally. To do that, just click on the Document and click Delete this content type

Step 4: Create metadata columns

I won’t go into detailed instructions here on how to create library level metadata columns. Since I have extensively covered this previously, please reference this post for step-by-step instructions.

Step 5: Add metadata to the content Type

You could actually do this step right after Step 1, depending on where and how you want to maintain your content type metadata (site level or library level). In this example, I am creating and maintaining my metadata at the library level.

1. Click on the Document Set content type from within the library settings, and you will see a screen that looks like this
2. Click on Add from existing site or list columns and add all the list or site columns you want to associate with your document set (folder). This step is very similar to the one above where we added content type from the list of available content types. Click OK.

Step 6: Configure Document Set

This is the exciting part. Now that we have our document set and columns associated, all that remains is the configuration of the Document Set look and feel and behavior.

1. Click on the document set, then Document Set settings
   
2. In the Allowed Content Type section, choose the content types that you want to allow within the document set. By default, Document content type will be listed there. However, you can also create and add your own custom content types, with its own metadata, just like I did in the example below.
3. The Default  Content section allows you to embed certain file templates into each new document set created. You can skip this section if you don’t have any templates to embed.
4. In the Shared Columns section, you can specify which folder-level columns (metadata) will propagate through to the files uploaded into the document set. So if you want your documents to inherit some or all metadata from the folder, just check off the boxes next to columns.
5. In the Welcome Page Columns section, you can choose the columns that will appear on the Welcome page of each document set.
6. In the Welcome Page View, you can specify which view will appear as the default view for documents in the Document Set. While you can create many different views to organize documents, you can’t easily switch between them within the Document Set. So you have to provide only one here that will be the only way to view documents.
7. In the Welcome page section, you can actually customize the look and feel of Welcome Page. To do so, click on Customize the Welcome Page
8. Then, on the next screen click Page Edit and you can make some adjustments to the look and feel of the page. For example, one thing you can do is replace the default document set graphics with the image/icon to depict your document set, like in the example below.

That’s all!

HOW TO CREATE A NEW DOCUMENT SET

1. Click New from the Document Library main page, then choose the document set (you will probably have one type, but you can have multiple content types to choose from)
2. On the next screen, just fill in the blanks (all the folder level metadata you created in previous steps). Click OK
3. Your Document Set (Welcome Page) will now be created. You can now go ahead and upload documents.

HOW TO UPLOAD DOCUMENTS TO THE DOCUMENT SET

Same way as into “regular folder.” You can either use the Upload button or just drag and drop documents into the document set.

DOCUMENT SET LIMITATIONS

It is all about documents

It is a limitation by default. But If you are thinking of using document sets to manage small projects, all you have on a welcome page is a document set. While you can add other web parts to the welcome page, they will be common to all document sets (in other words, you cannot have each welcome page contain its own task list or calendar for example).

Document Library can get really large

Say you configured a document library to house client data and are using document sets for it. With time, this library might get really large, impacting performance and ability to find stuff.

Metadata sync

If you decide to sync the document library with document sets to your desktop (link) – you will lose the metadata when you try to access the files on your PC. Metadata will stay in SharePoint, but will not get copied onto your computer.

BEST USE CASES FOR DOCUMENT SETS

The following are usually best applications for document sets:

• Small projects (with each folder being a small project)
• Financial assets documents (with each document set being a mutual fund)
• Client documents (with each document set being a client folder)
• Legal Documents (with each document set being a legal case)
• Document sets – the hidden gem of SharePoint
  https://sharepointmaven.com/document-sets-hidden-gem-sharepoint/

客户端 Web 部件是在 SharePoint 页面的上下文中运行的客户端组件。客户端 Web 部件可以部署到支持 SharePoint 框架的 SharePoint 环境中。你还可以使用现代 JavaScript Web 框架、工具和库来构建它们。

客户端 Web 部件支持：

• 使用 HTML 和 JavaScript 生成。
• SharePoint Online 和本地环境。

也可以观看 SharePoint PnP YouTube 频道上的这段视频，按照下面这些步骤操作：

新建 Web 部件项目

为项目创建新的项目目录，将当前文件夹更改为该目录。

通过从你创建的新目录中运行 Yeoman SharePoint 生成器来创建新项目：

yo @microsoft/sharepoint

Yeoman SharePoint 生成器将提出一系列问题。 对于所有问题，接受默认选项，以下问题除外：

• 要创建哪种类型的客户端组件？ WebPart
• Web 部件的名称是什么?：HelloWorld
• Web 部件的说明是什么?：HelloWorld 说明
• 要使用哪种框架?：没有 JavaScript 框架

此时，Yeoman 将创建项目基架（文件夹和文件），并通过运行 npm install 安装所需的依赖项。 这通常需要 1-3 分钟时间，具体取决于 Internet 连接。

当项目基架和依赖项安装完成后，Yeoman 将显示以下类似消息，表明操作成功：

有关任何错误故障排除的信息，请参阅已知问题。

使用常用的代码编辑器

由于 SharePoint 客户端解决方案基于 HTML/TypeScript，因此可使用任何支持客户端开发的代码编辑器来生成 Web 部件，例如：

• Visual Studio Code
• Atom
• Webstorm

SharePoint 框架文档中的步骤和示例使用的是 Visual Studio Code。 Visual Studio Code (VS Code) 是 Microsoft 提供的轻型源代码编辑器，功能十分强大，可以在桌面上运行。 VS Code 适用于 Windows、macOS 和 Linux。 其中内置了对 JavaScript、TypeScript、Node.js 的支持，且生态系统中包含多种适用于其他语言（如 C++、C#、Python 和 PHP）的扩展。

预览 Web 部件

可以在 SharePoint 托管工作台中预览和测试客户端 Web 部件，而无需将解决方案部署到 SharePoint。 这是通过启动本地 Web 服务器来完成的，托管工作台可以使用 gulp 任务 服务 加载文件。

默认情况下，客户端工具链使用 HTTPS 终结点。 设置开发环境过程的一部分包括信任本地环境的工具链中包含的开发 SSL证书。 这是必需的，因此你的浏览器将信任证书。

更新项目的托管工作台 URL

使用 gulp 任务 服务 时，默认情况下，它将启动具有项目中指定的专用托管工作台 URL 的浏览器。 新项目中托管工作台的默认 URL 指向无效的 URL。

此时，Web 部件属性窗格包含这些属性默认值。

Web 部件清单

HelloWorldWebPart.manifest.json 文件定义了 Web 部件元数据，如版本、ID、显示名称、图标和说明。 每个 Web 部件都必须包含此清单。

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
  "id": "fbcf2c6a-7df9-414c-b3f5-37cab6bb1280",
  "alias": "HelloWorldWebPart",
  "componentType": "WebPart",

  // The "*" signifies that the version should be taken from the package.json
  "version": "*",
  "manifestVersion": 2,

  // If true, the component can only be installed on sites where Custom Script is allowed.
  // Components that allow authors to embed arbitrary script code should set this to true.
  // https://support.office.com/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
  "requiresCustomScript": false,
  "supportedHosts": ["SharePointWebPart"],

  "preconfiguredEntries": [{
    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
    "group": { "default": "Other" },
    "title": { "default": "HelloWorld" },
    "description": { "default": "HelloWorld description" },
    "officeFabricIconFontName": "Page",
    "properties": {
      "description": "HelloWorld",
      "test": "Multi-line text field",
      "test1": true,
      "test2": "2",
      "test3": true
    }
  }]
}

现在，我们引入了新的属性，确保再次通过执行以下命令从本地开发环境托管 Web 部件。这还将确保正确地应用上述更改。

gulp serve

后续步骤

恭喜！已成功运行首个 Hello World Web 部件！

至此，Web 部件已在运行。在下一主题将 Web 部件连接到 SharePoint 中，可以继续生成 Hello World Web 部件。 将使用相同的 HelloWorld Web 部件项目，并添加与 SharePoint 列表 REST API 进行交互的功能。 请注意，gulp serve 命令仍在控制台窗口或 Visual Studio Code（如果使用它作为编辑器）中运行。 浏览下一篇文章时，可以继续让它运行。

• 找到并打开项目中的文件 ./config/serve.json。

• 找到属性 initialPage ：

  JSON复制

   
  Welcome to SharePoint!

  Customize SharePoint experiences using web parts.

  ${escape(this.properties.description)}

  Learn more
  `; } " style="box-sizing: inherit; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 1em; direction: ltr; outline-color: inherit; line-height: 1.3571; border: 0px; display: block; padding: 0px; position: relative;">public render(): void { this.domElement.innerHTML = `

  ${escape(this.properties.description)}

  `; }

  这种模型非常灵活，以便你可以将 Web 部件内置到任意 JavaScript 框架中，并将其加载到 DOM 元素中。

  配置 Web 部件属性窗格

  属性窗格在 HelloWorldWebPart 类中进行定义。 需要在 getPropertyPaneConfiguration 属性中定义属性窗格。

  定义属性后，可以使用 this.properties. 在 Web 部件中访问它们，如 render() 方法中所示：

  TypeScript复制

   

  ${escape(this.properties.description)}

   

  " style="box-sizing: inherit; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 1em; direction: ltr; outline-color: inherit; line-height: 1.3571; border: 0px; display: block; padding: 0px; position: relative;">

  ${escape(this.properties.test)}

   

  ${this.properties.test1}

  ${escape(this.properties.test2)}

  ${this.properties.test3}

  " style="box-sizing: inherit; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 1em; direction: ltr; outline-color: inherit; line-height: 1.3571; border: 0px; display: block; padding: 0px; position: relative;">

  class="${ styles.description }">${escape(this.properties.test)}</p>

  ${this.properties.test1}p>

  class="${ styles.description }">${escape(this.properties.test2)}</p>

   

  ${this.properties.test3}p>

   

  打开 HelloWorldWebPart.manifest.json 并将 properties 修改为：

  TypeScript复制

   

  
  "properties": {
    "description": "HelloWorld",
    "test": "Multi-line text field",
    "test1": true,
    "test2": "2",
    "test3": true
  }
  

可以使用任何文本编辑器生成 SharePoint 框架解决方案。 也可使用 macOS、Windows 或 Linux 环境。

也可以观看 SharePoint PnP YouTube 频道上的这段视频，按照下面这些步骤操作：

安装 Node.js

安装最新版本的 Node.js LTS v14。

这个版本是当前推荐的Node.js与SharePoint框架一起使用的版本（除非下面另有说明）。

通过运行以下命令，可检查是否已安装 Node.js，包括已安装版本：

node --version

以下 Node.js 版本支持 SharePoint 框架 v1.14.0：

• Node.js v12.13.0+ (Erbium)
• Node.js v14.15.0+ (Fermium)

安装代码编辑器

若要生成 Web 部件，可以使用任何支持客户端开发的代码编辑器或 IDE，如：

• Visual Studio Code
• Atom
• Webstorm

此文档中的步骤和示例使用 Visual Studio Code，但你可以使用你选择的任何编辑器。

安装开发工具链先决条件

SharePoint 框架开发和构建工具链利用各种流行的开源工具。 尽管大多数依赖项都包含在每个项目中，但是你需要在工作站上全局安装一些依赖项。

npm install gulp-cli yo @microsoft/generator-sharepoint --global

安装 Gulp

Gulp 是基于 JavaScript 的任务运行程序，用于自动执行重复任务。 SharePoint 框架构建工具链使用 Gulp 任务来构建项目、创建 JavaScript 捆绑包以及生成的用于部署解决方案的程序包。

输入以下命令以安装 Gulp CLI：

npm install gulp-cli --global

安装 Yeoman

Yeoman 可帮助启动新项目，并规定最佳做法和工具，以帮助你保持高效率。SharePoint 客户端开发工具包括用于创建新 Web 部件的 Yeoman 生成器。生成器为主机 Web 部件提供公共生成工具、公共样本代码和公共体育场网站以进行测试。

输入以下命令以安装 Yeoman：

npm install yo --global

安装 Yeoman SharePoint 生成器

Yeoman SharePoint Web 部件生成器帮助你快速创建一个具有适当工具链和项目结构的 SharePoint 客户端解决方案项目。

若要全局安装 SharePoint 框架 Yeoman 生成器，请输入以下命令：

npm install @microsoft/generator-sharepoint --global

有关 Yeoman SharePoint 生成器的详细信息，请参阅 SharePoint 框架Yeoman 生成器。

安装现代 Web 浏览器

应使用现代 Web 浏览器（如 Microsoft Edge、Google Chrome 或 Firefox）作为开发浏览器。

信任自签名开发人员证书

在开发环境中测试自定义解决方案时使用的 SharePoint 框架本地 WebServer 默认使用 HTTPS。 这是使用开发自签名 SSL 证书实现的。 自签名 SSL 证书不受开发人员环境信任。 必须先将开发环境配置为信任此证书。

实用工具任务以 Gulp 任务的形式包含在每个 SharePoint 框架项目中。 可以选择立即这样做，也可以等到创建首个项目后再这样做，如生成首个 SharePoint 客户端 Web 部件（Hello World 第 1 部分）教程中所述。

使用 Yeoman 生成器为 SharePoint 框架创建项目后，立即从项目的根文件夹执行以下命令。

gulp trust-dev-cert

可选工具

下面列出了一些可能也会用到的工具：

• Fiddler
• Postman
• Windows 终端
• Cmder for Windows
• Oh My Zsh for Mac
• Git 源控件工具

后续步骤

现在可以生成首个客户端 Web 部件了！

SPFx 和 SharePoint Server（本地部署）

SharePoint Online (SPO)、SharePoint Server 2019 和 SharePoint Server 2016 上均可使用 SPFx。 此页面上的配置说明假定你正在使用最新版本的 SPFx，为 SharePoint Online 创建解决方案。

SharePoint Online 包含 SPFx 的所有版本，包括所有以前版本和最新版本。 每个 SPFx 解决方案都包含用于告知 SPO 它所依赖的 SPFx 运行时的信息。

如果要为 SharePoint Server 本地部署构建解决方案，请参阅“另请参阅”部分，了解有关特定 SharePoint 版本的详细信息。 每个 SharePoint 本地部署仅支持特定版本的 SPFx。 如果要为不同的 SharePoint 部署创建不同的解决方案，则可能会引入复杂的开发环境配置。

• SharePoint Server 2016 使用 SharePoint 框架 (SPFx) v1.1。
• SharePoint Server 2019 使用 SharePoint 框架 (SPFx) v1.4.1。

根据你的使用场景，可能需要维护不同的开发环境。 开发人员一直采用以下方法来应对上述挑战：

• 虚拟机
• Docker
• 节点版本管理器 (NVM)

疑难解答

检查全局安装包的版本

要获取所有全局安装包的列表，请运行以下命令：

npm list --global --depth=0️

无法信任自签名的开发证书

如果在运行 gulp trust-dev-cert 时信任自签名证书遇到问题，并且已验证已安装所有相关性的正确版本，通常使用的一种解决方案是卸载所有全局安装的包、卸载 Node.js、重启和重新开始。

在某些情况下，执行命令 gulp trust-dev-cert 不能达到信任计算机上的自签名开发证书的预期效果。 在此类极少数情况下，可能需要删除在配置文件文件夹中生成的隐藏文件夹。 定位和对于早于 v1.12.1 的 SPFx 版本，请删除文件夹 {{homedir}}/.gcb-serve-data。 对于更高版本，请 {{homedir}}/.rushstack 删除文件夹，然后再次尝试信任自签名开发证书。 否则，运行 gulp untrust-dev-cert 将具有相同的效果，以从配置文件夹中删除证书文件。 如果证书未添加到受信任的根证书颁发机构，尽管运行 gulp trust-dev-cert 因为某些策略阻止了该操作， rushstack-serve.pem 文件从 {{homedir}}/.rushstack 文件夹可以手动导入到受信任根证书颁发机构下的证书管理器中本地管理员帐户。

无法使用 NPM 安装包 - 企业代理

如果开发环境位于企业代理后面，需要将 NPM 配置为使用企业代理。 请参阅 npm-config 文档，了解如何配置企业代理后面的开发环境，尤其是 proxy & http-proxy 设置。 更多信息：如何设置企业 Web 代理后面的 Node.js 和 Npm