Compact Event Tile¶

1. Add the Search Results Web Part¶

Add the PnP Modern Search Results Web Part to your page.

If you are unsure how to add a web part, microsoft documenation details this here:

For additional information regarding PnP Modern Search Results, please consult the PnPModernSearch documentation:

Using PnPModernSearch Search Results Web Part

2. Set up your initial query¶

In page 1 of the Property Pane, set your initial query in the Search query keywords box. Here you may also connect the web part to a Search Box web part.

To display events you must include contentclass:STS_ListItem_Events in your KQL query.

3. Set Query Template¶

On page 2 in the Query Template use the search term Path:{Site.URL} so you can display news from your local site.

Custom Layout

To view other Query Template samples, click here to see some example queries.

4. Set Selected Properties¶

On page 2 of the Property Pane, though there is a default selection of properties please make sure to add any requiered Properties or Mercury specific Properties via the Dropdown List

Selected Properties

Properties:

BannerUrlOWSURLH
ContentTypeId
EventsRollUpCategory
EventsRollUpStartDate
EventsRollUpEndDate
IsAllDayEvent
ListID
ListItemID
SPWebUrl
SiteID
Title
UniqueID
WebId

Note

You may have to have already created News Articles or other types of content already tagged with the fields that start with "owstaxId", e.g. Mercury Business Unit, Department & Category. These already existing News Articles will have to be Published and Promoted as News prior to being available to select.

5. Set up Result Types¶

On page 3 of the Property Pane, set the Results layout to "Custom".

Custom Layout

5. Set Group Level Template¶

On page 3 of the Property Pane, add the requiered Group Level Display Template to "Use an external template URL".

Custom Layout

The correct template is:

https://cdn.mercuryintranet.com/modern-mercury-searchtemplates/group/ResponsiveTemplate.html

NOTE: These are case sensitive.

More information on Group Templates can be discovered here:

Group Templates

6. Edit Result Types¶

On page 3 of the Property Pane, select "Edit Result Types"

Edit Result Types

This panel allows you to edit Result Types and the HBS templates which render for each result.

Configuring Results Types may vary on needs, however since this template is intended for Events, we shall use that as an example, in previous steps we would have created a query to return the relevant items, e.g. "contentclass:STS_ListItem_Events".

We can now target all events returned with that value by using the following settings:

Setting	Value
Managed Property	ContentTypeId
Operator	Contains
Condition Value	0x0102
Inline Template	DO NOT EDIT
External Template URL	`https://cdn.mercuryintranet.com/modern-mercury-searchtemplates/item/CompactEventTile.html`

NOTE: If an invalid URL is entered you will be warned.

Link Warning

Once this (and any additional item specific templates) have been set select the "Save" button, you have now configered this template.

Event Tile