Skip to content

Document Preview Card

Follow these steps to set up this tile in PnP Modern Search Results.

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:

Using web parts on SharePoint pages

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 news you must include PromotedState:2 in your KQL query. To display documents from a document library you must include * 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:

AuthorOWSUSER,
ContentTypeId,
Created,
CreatedBy,
Description,
EditorOWSUSER,
LikeCount,
MercuryArticleDateOWSDATE,
ModifiedOWSDATE,
MercuryContentType,
owstaxIdMercuryBusinessUnit,
owstaxIdMercuryCategory,
owstaxIdMercuryDepartment,
owstaxIdMercuryTypeOfContent,
PictureThumbnailURL,
SiteID,
SPWebUrl,
Title,
UniqueID,
ViewsLifeTime,
WebId

If you are including Classic Publishing Pages in the search results tiles, include the following property, so that the page image appears in the preview:

PublishingPageImageOWSIMGEX

For Documents also include:

FileExtension,
FileType,
MDCListTitle,
MDCPublishedByUserOWSUSER,
MDCTitleOWSTEXT,
ModifiedBy,
owstaxIdMDCDocumentType

For Events, also include:

BannerUrlOWSURLH,
ContentTypeId,
EventsRollUpCategory,
EventsRollUpEndDate,
EventsRollUpStartDate,
ListID,
ListItemID,
Location,
People

For Videos, also include:

SitePath
LastModifiedTime

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 Result Types may vary on needs, however since this template is intended for Documents we shall use that as an example. In previous steps we would have created a query to return the relevant items, e.g. "Path: {URL to DocumentLibrary}".

We can now target all documents returned with that value by using the following setting:

Setting Value
Managed Property Path
Operator Contains
Condition Value {Path to Document Library}
Inline Template DO NOT EDIT
External Template URL https://cdn.mercuryintranet.com/modern-mercury-searchtemplates/item/DocumentPreviewCard.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.

Simple Tile