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>