如何在SharePoint Framework自定义Web部件中适配Highlighted content部件属性

Great question! As someone who’s built custom SPFx web parts that mirror native SharePoint component behavior, I can walk you through practical ways to replicate the Highlighted Content web part’s property pane structure—specifically the "Content" and "Filter and Sort" groups.

The native Highlighted Content web part’s property pane is constructed using SPFx’s official PropertyPane API, so you can directly replicate its group structure and control types in your custom web part. Here’s a breakdown of what you’ll need:

For the "Content" Group: #

• Use PropertyPaneDropdown to let users select content sources (site, list, library, etc.)
• Add a PropertyPaneTextField for search keywords
• Include a PropertyPaneToggle to control whether subsites are included

For the "Filter and Sort" Group: #

• Use PropertyPaneDropdown for sort fields (created date, modified date, title) and sort direction (ascending/descending)
• Add a PropertyPaneSlider to set the maximum number of items to display
• Include PropertyPaneCheckbox or additional dropdowns for filter rules (like showing only published content)

Here’s a sample code snippet to implement this in your web part’s getPropertyPaneConfiguration() method:

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
  return {
    pages: [
      {
        header: { description: "Configure your highlighted content" },
        groups: [
          {
            groupName: "Content",
            groupFields: [
              PropertyPaneDropdown('contentSource', {
                label: "Content source",
                options: [
                  { key: 'site', text: "This site" },
                  { key: 'siteCollection', text: "This site collection" },
                  { key: 'list', text: "Specific list or library" },
                  { key: 'external', text: "External site" }
                ]
              }),
              PropertyPaneTextField('searchKeywords', {
                label: "Search keywords"
              }),
              PropertyPaneToggle('includeSubsites', {
                label: "Include subsites",
                offText: "No",
                onText: "Yes"
              })
            ]
          },
          {
            groupName: "Filter and Sort",
            groupFields: [
              PropertyPaneDropdown('sortBy', {
                label: "Sort by",
                options: [
                  { key: 'modified', text: "Modified date" },
                  { key: 'created', text: "Created date" },
                  { key: 'title', text: "Title" },
                  { key: 'relevance', text: "Relevance" }
                ]
              }),
              PropertyPaneDropdown('sortDirection', {
                label: "Sort direction",
                options: [
                  { key: 'desc', text: "Descending" },
                  { key: 'asc', text: "Ascending" }
                ]
              }),
              PropertyPaneSlider('itemLimit', {
                label: "Number of items to show",
                min: 1,
                max: 50,
                step: 1,
                value: 10
              })
            ]
          }
        ]
      }
    ]
  };
}

If you want to match the exact property structure of the native Highlighted Content web part, you can:

• Check the TypeScript type definitions in the @microsoft/sp-webpart-base package (look for interfaces related to highlighted content properties)
• Reference Microsoft’s official SPFx documentation for details on native web part property schemas

Note: Be careful with relying on internal native properties—they might change with SharePoint updates, which could break your custom web part. Stick to public SPFx APIs whenever possible.

If you don’t want to build every control from scratch, the PnP SPFx Controls Library has pre-built property pane controls that mimic native SharePoint behavior. For example:

• PropertyPaneAsyncDropdown can handle dynamic list/library selection (just like the native web part)
• Pre-built filter controls that align with SharePoint’s native filtering logic

These controls are maintained by the community and follow SPFx best practices, so they’re a reliable shortcut.

As you build, regularly compare your property pane to the native Highlighted Content web part to ensure consistency:

• Does selecting "Specific list or library" show a dynamic dropdown of available lists?
• Do filter rules behave the same way (e.g., AND/OR logic)?
• Are all sort options and item limits identical to the native component?

This ensures your users get a familiar, intuitive experience.

内容的提问来源于stack exchange，提问作者Aurélien Plantard