DOCSEARCHbyAlgolia
Submit Docs

PnP Modern Search Documentation

website·Indexed 30 days ago

https://microsoft-search.github.io/pnp-modern-search-core-components/

Documentation for PnP Modern Search web parts in SharePoint, featuring guides on creating custom layouts, configuring search results, and implementing scenarios such as people search, document viewer pages, and Graph Connector data integration. Includes details on built-in web components like <pnp-persona> and <pnp-panel>, audience targeting, and managing custom templates via SharePoint or Visual Studio Code.

Tokens
55.5K
Snippets
155
Records
368
Agent score
74%

What's inside PnP Modern Search

  1. Overview of layout template types

    Layout templates can be customized using two primary techniques to display data retrieved from a data source. Both techniques support the use of data source slots, built-in web components, and Microsoft Graph Toolkit components.

    • Handlebars: Uses regular HTML markup, Handlebars syntax, and helpers. Supports custom CSS styles.
    • Adaptive Cards: Uses declarative JSON templates.

  2. Overview of PnP Modern Search Core Components

    PnP Modern Search Core Components are reusable components designed to leverage information indexed in the Microsoft search engine within an organization. They are built as standard web components using the Microsoft Graph Toolkit, FAST Components, and Lit. These components can be integrated into three primary environments: custom applications via web components, SharePoint sites via Web Parts, or as Microsoft Teams tabs/personal applications.

  3. Overview of PnP Modern Search v4 Web Parts

    PnP Modern Search v4 provides a set of SharePoint Online modern Web Parts designed to create personalized search experiences. It leverages Microsoft Graph Search APIs and provides the following components:

    • Search Results: Retrieves data from a data source and renders it in a specific layout.
    • Search Filters: Used to filter and refine data displayed in 'Search Results' web parts.
    • Search Verticals: Allows browsing data as silos (tabs) from multiple data sources.
    • Search Box: Provides a free-text query input that sends queries to 'Search Results' web parts.

  4. Choose between Basic and Advanced customizations for PnP Modern Search

    PnP Modern Search supports two levels of customization:

    1. Basic Customizations: Use HTML, CSS, and Handlebars to update layout templates, add custom fields to the UI from a data source, or modify built-in layout fields (Cards, Details List, People). These are typically handled by webmasters or super users.
    2. Advanced Customizations: Require SharePoint Framework (SPFx) development skills. These involve creating 'extensibility libraries' to add new data sources, layouts, web components, or suggestions providers.

  5. Use Microsoft Search as a data source in PnP Modern Search

    The 'Microsoft Search' data source allows the retrieval of items directly from the Microsoft search engine. Note that this data source offers a beta API option; however, the beta API is not recommended for production environments. For production use, the standard version of the Microsoft Search data source should be used.

  6. Understand PnP Modern Search built-in data sources

    PnP Modern Search provides built-in data sources to retrieve content. The primary options include 'SharePoint Search' (which retrieves items specifically from the SharePoint search engine) and 'Microsoft Search' (which utilizes the Microsoft Graph search). Note that switching the data source in the property pane will clear all previous data source properties to prevent configuration pollution.

  9. Technical stack for PnP Modern Search core components

    The PnP Modern Search core components are built using the following technology stack:

    • Core Logic: Built as Web Components using Lit Element and the Microsoft Graph Toolkit. All components extend the MgtTemplatedTaskComponent base class from the @microsoft/mgt-element library.
    • Styling: TailwindCSS is used for internal component styling to avoid dedicated stylesheets.
    • Build System: Webpack 5 is used for bundling and distribution, including a dev server for local testing.
    • Testing: Web Test Runner with Puppeteer, utilizing ESBuild, Mocha, Chai, and Sinon.
    • Documentation & Demo: Storybook is used for live documentation and component demos (configured with Webpack 5). Static documentation is hosted via Docusaurus and GitHub Pages.

  12. Understand template authoring in PnP Modern Search Web Parts

    PnP Modern Search Web Parts use the Microsoft Graph Toolkit templating capability, which utilizes plain JavaScript rather than Handlebars. Templates allow developers to override specific parts of a web component's UI (using the concept of slots) rather than the entire user experience. The specific templates available for override depend on the individual Web Part being used.