Others

How to Create SharePoint Event Cards with PnP Modern Search

Maira Mehtab Sep 22, 2026 869 views

Question details

The user needs to create a SharePoint events search page featuring event cards that display specific fields such as the event name, location, dates, and an interactive registration button.

Product: Microsoft SharePoint
Device & OS: not provided
Scenario: Customizing the display of search results on a SharePoint intranet site to feature detailed event information.
Observed behavior: The default Cards layout in the PnP Modern Search web part does not expose or display all the required custom fields and buttons.

Before you start

Before modifying your search layouts, ensure you have Site Owner permissions in SharePoint and have mapped your required event fields to managed properties in the SharePoint Search Schema.

Solution 1Recommended

Seek Assistance from SharePoint Developer Communities

Because adding missing fields and buttons requires modifying Handlebars templates and custom configurations, reaching out to specialized developer communities is the most effective approach.

Creating custom event cards with actionable registration buttons in PnP Modern Search involves editing custom result templates and establishing specific field mappings. As this falls under advanced SharePoint development, leveraging community expertise will provide you with the most accurate, up-to-date guidance for your custom web parts.

Gather your configuration details

Compile your current custom result template, field mappings, layout configurations, and the specific requirements for your registration button.

Submit a query on Microsoft Q&A

Navigate to the Microsoft Q&A platform and post your detailed question using the 'SharePoint Development' tag so that Microsoft engineers and MVPs can assist you.

Open an issue on GitHub

Alternatively, visit the official PnP Modern Search GitHub repository and open a new issue or discussion thread outlining your custom template requirements.

Development Prerequisites: Familiarity with HTML, CSS, and Handlebars templating is highly recommended when customizing PnP Modern Search result layouts.

Free Microsoft Office alternative

Boost Your Productivity with WPS Office

While SharePoint powers your intranet and search pages, you still need a reliable office suite to plan your events, draft agendas, and track registrations. WPS Office is a lightweight, feature-rich alternative to Microsoft Office that handles your daily document needs without the subscription fees.

1. Download the software: Visit the official WPS Office website to download the free installer for your specific operating system.
2. Install and create: Follow the simple installation prompts, launch the application, and instantly start drafting your event management documents.

Seamlessly compatible with Microsoft Office formats, including Word, Excel, and PowerPoint.Easily draft event schedules, registration lists, and layout plans before publishing them to SharePoint.Lightweight application that uses minimal system resources on Windows, Mac, and Linux.Familiar user interface ensuring zero learning curve and smooth migration.

microsoft office alternative - wps office

Frequently Asked Questions

What is PnP Modern Search in SharePoint?

PnP Modern Search is an open-source set of web parts for SharePoint Online. It enables site owners and developers to build highly flexible, search-driven pages using managed properties and custom templates.

Why are location and date fields missing in the default SharePoint event cards?

The default PnP Modern Search layout templates only map standard out-of-the-box fields. Custom metadata, like specific event locations or custom date fields, must be manually mapped to refinable managed properties and added to the template.

How do I map custom event fields in PnP Modern Search?

First, map your site column's crawled property to a Refinable Managed Property in the SharePoint Admin Center. Then, open the PnP Search Results web part settings, add your new managed property to the 'Selected properties' list, and reference it in your layout template.

Can I add an interactive button to a PnP search result card?

Yes. By utilizing the 'Custom' layout option and editing the Handlebars template, you can insert HTML for a button and use Handlebars syntax (e.g., {{RegistrationLink}}) to dynamically populate the button's URL.

Office Quick Solutions