Forum Discussion
Pnp Search Results Template Help
Hi,
I'd like to make the search results look better. I'm currently using the below custom code. I'd like to have each result be enclosed in a box of some sort so that each search result is clearly not related to another search result. The results kind of run together. Also, the values for some of the fields that I have displaying in the search results are actually lookups from either the same or other lists on the same SharePoint site, so I would like to have those appear as clickable links instead of just text. I'd also like to know if I can have those fields not appear if there are no values to display for them.
This is what the search results currently look like.
Here is the current custom code that I'm using:
<content id="data-content">
<style>
/* Insert your CSS overrides here */
.example-themePrimary a {
color: {
{
root.theme.palette.themePrimary
}
}
;
}
{
{
#unless root.properties.layoutProperties.showItemThumbnail
}
}
.template--listItem--result {
flex-basis: 100%!important;
}
{
{
/unless
}
}
</style>
<div class="template">
{{#if root.properties.showSelectedFilters}}
<pnp-selectedfilters data-filters="{{JSONstringify filters.selectedFilters 2}}" data-filters-configuration="{{JSONstringify filters.filtersConfiguration 2}}" data-instance-id="{{filters.instanceId}}" data-operator="{{filters.filterOperator}}" data-theme-variant="{{JSONstringify root.theme}}">
</pnp-selectedfilters>
{{/if}}
{{#if root.properties.showResultsCount}}
<div class="template--resultCount">
<label class="ms-fontWeight-semibold">{{getCountMessage root.data.totalItemsCount root.inputQueryText}}</label>
</div>
{{/if}}
{{#if root.data.promotedResults}}
<ul class="template--defaultList template--promotedResults">
{{#each root.data.promotedResults as |promotedResult|}}
<li>
<div>
<pnp-icon data-name="MiniLink" aria-hidden="true"></pnp-icon>
</div>
<div>
<a href="{{url}}" style="color:{{@root.theme.semanticColors.link}}">{{title}}</a>
<div>{{description}}</div>
</div>
</li>
{{/each}}
</ul>
{{/if}}
<ul class="template--defaultList">
{{#each data.items as |item|}}
<pnp-select
data-enabled="{{@root.properties.itemSelectionProps.allowItemSelection}}"
data-index="{{@index}}"
data-is-selected="{{isItemSelected root.selectedKeys @index}}">
<template id="content">
<li class="template--listItem">
{{#> resultTypes item=item}}
<div class="template--listItem--result">
{{#if root.properties.layoutProperties.showFileIcon}}
{{#contains "['STS_Site','STS_Web']" (slot item root.slots.contentclass)}}
<pnp-iconfile class="template--listItem--icon" data-extension="{{slot item root.slots.FileType}}" data-is-container="{{slot item root.slots.IsFolder}}" data-image-url="{{item.SiteLogo}}" data-size="32" data-theme-variant="{{JSONstringify root.theme}}"></pnp-iconfile>
{{else}}
<pnp-iconfile class="template--listItem--icon" data-extension="{{slot item root.slots.FileType}}" data-is-container="{{slot item root.slots.IsFolder}}" data-size="32" data-theme-variant="{{JSONstringify root.theme}}"></pnp-iconfile>
{{/contains}}
{{/if}}
<div class="template--listItem--contentContainer">
<span class="template--listItem--title example-themePrimary">
<a href="{{slot item root.slots.PreviewUrl}}" target="_blank" style="color:{{@root.theme.semanticColors.link}}" data-interception="off">{{slot item root.slots.Title}}</a>
</span>{{slot item root.slots.Definition}}
<p></p>
<span><b>Business Processes: </b>{{slot item root.slots.[Business Processes]}}</span>
<span><b>Products/Services: </b>{{slot item root.slots.[Products/Services]}}</span>
<span><b>Software/Apps: </b>{{slot item root.slots.[Software/Apps]}}</span>
<span><b>Term Owners: </b>{{slot item root.slots.[Term Owners]}}</span>
<span><b>Related Terms/Phrases: </b>{{slot item root.slots.[Related Term/Phrase]}}</span>
<p></p>
<span>
<span class="template--listItem--author">
Term last updated by {{#with (split (slot item root.slots.Author) '|')}}
{{[1]}}
{{/with}}
</span>
<b><span class="template--listItem--date"> on {{getDate (slot item root.slots.Date) "LL"}}</span></b>
</span>
<div>{{getSummary (slot item root.slots.Summary)}}</div>
<div class="template--listItem--tags example-themePrimary">
{{#if (slot item root.slots.Tags)}}
<pnp-icon data-name="Tag" aria-hidden="true" data-theme-variant="{{JSONstringify root.theme}}"></pnp-icon>
<div>
{{#each (split (slot item root.slots.Tags) ",") as |tag| }}
<span>{{trim tag}}</span>
{{/each}}
</div>
{{/if}}
</div>
</div>
</div>
{{#if root.properties.layoutProperties.showItemThumbnail}}
<div class="template--listItem--thumbnailContainer">
<div class="thumbnail--image">
<pnp-filepreview data-preview-url="{{slot item root.slots.PreviewUrl}}" data-preview-image-url="{{slot item root.slots.PreviewImageUrl}}" data-theme-variant="{{JSONstringify root.theme}}">
<pnp-img alt='preview-image' width="120" src="{{slot item root.slots.PreviewImageUrl}}" loading="lazy" data-error-image="{{@root.utils.defaultImage}}" />
</pnp-filepreview>
<div class="thumbnail--hover">
<div>
<pnp-icon data-name="DocumentSearch" aria-hidden="true"></pnp-icon>
</div>
</div>
</div>
</div>
{{/if}} {{/resultTypes}}
</li>
</template>
</pnp-select>
{{/each}}
</ul>
{{#if root.properties.paging.showPaging}} {{#gt root.data.totalItemsCount root.properties.paging.itemsCountPerPage}}
<pnp-pagination data-total-items="{{@root.data.totalItemsCount}}" data-hide-first-last-pages="{{@root.properties.paging.hideFirstLastPages}}" data-hide-disabled="{{@root.properties.paging.hideDisabled}}" data-hide-navigation="{{@root.properties.paging.hideNavigation}}"
data-range="{{@root.properties.paging.pagingRange}}" data-items-count-per-page="{{@root.properties.paging.itemsCountPerPage}}" data-current-page-number="{{@root.paging.currentPageNumber}}" data-page-links="{{JSONstringify root.data.paging.links}}"
data-theme-variant="{{JSONstringify root.theme}}">
</pnp-pagination>
{{/gt}} {{/if}}
</div>
</content>
<content id="placeholder-content">
<style>
/* Insert your CSS overrides here */
</style>
<div class="placeholder">
{{#if root.properties.showResultsCount}}
<div class="template--resultCount">
<span class="placeholder--shimmer placeholder--line" style="width: 20%"></span>
</div>
{{/if}}
<ul class="template--defaultList">
{{#times root.properties.paging.itemsCountPerPage}}
<li class="template--listItem" tabindex="0">
<div class="template--listItem--result">
{{#if root.properties.layoutProperties.showFileIcon}}
<div class="template--listItem--icon placeholder--shimmer "></div>
{{/if}}
<div class="template--listItem--contentContainer">
<span class="placeholder--shimmer placeholder--line" style="width: 60%"></span>
<span class="placeholder--shimmer placeholder--line" style="width: 100%"></span>
<span class="placeholder--shimmer placeholder--line" style="width: 100%"></span>
<span class="placeholder--shimmer placeholder--line" style="width: 35%"></span>
<span class="placeholder--shimmer placeholder--line" style="width: 20%"></span>
</div>
</div>
{{#if root.properties.layoutProperties.showItemThumbnail}}
<div class="template--listItem--thumbnailContainer">
<div class="thumbnail--image">
<div class="placeholder--shimmer" style="width: 120px;height: 70px;"></div>
</div>
</div>
{{/if}}
</li>
{{/times}}
</ul>
</div>
</content>- Hi CLSimpson,
If you target the first instance of the template--listItem--result class with an inline style, this will give you what you want.
Copy the code you already have and find <div class="template--listItem--result">
Modify this to something like <div class="template--listItem--result" style="background:#efefef">
Then take a look at the results and see what you think. If you want a border, try this instead:
<div class="template--listItem--result" style="border-style:solid;border-color:#999999;border-width:1px">
Have a play around with things to get it how you want it.
Hope that helps,
Joe - Very interesting topic. Wait for expert responses
