[react-search-refiners] Updated the default list template to include an example of filtering capability with URL fragment (i.e. '#') from search result item tags (#734)
* * Migrated to SPFx 1.7.0 * Fixed sort feature * Added a sample TypeScript function to demonstrate NLP processing for the search query * Miscelleanous improvements * * Fixed wrong ids and dependencies * * Updated README * * Replaced JSOM taxonomy methods by the @pnp/sp-taxonomy counterparts + refactored refiners translation logic * Updated the filter panel to close on click out * Updgraded to @pnp 1.2.6 * Added a event listeners for hash change when the search box in bound to the 'URL fragment' SPFx builtin data source property so you can now build predefined filters with '#'. * Fix suggestions panel position to be absolute * * Quick fix on the search box * * Added a default query option (related to https://github.com/SharePoint/sp-dev-fx-webparts/issues/556) * * Added the ability to search by clicking on the search box icon * * Replaced 'refiners' property by a property collection. * * Replaced the 'sortList' WP property by a collection data control from PnP. * * Replaced 'sortableFields' by a collection data pnp control. * * Replaced the code editor control by the PnP one * Set fix width on previews * * Added result type interface * * Added the result types feature * Removed 'on-el-resize'. Too much trouble, not really needed. Now the preview width can be set manually. * * Miscelaneous fixes * * Upddated documentation + instructions * * Upgraded to 1.13.0 for @pnp controls * * [react-search-refiners] Version 2.3.0.0 * * Fixes and improvements as pointed out by @wobba. * * Added missing file * * Updated README with result types use * Updated the code to load the property pane code field async and reduce mainbundle size * * Updated README * * Bug fix https://github.com/SharePoint/sp-dev-fx-webparts/issues/730 * [react-search-refiners] * Updated the default list template to include an example of filtering capability with URL fragment (i.e. '#') from search result item tags * [react-search-refiners] * Added 'Tags' default refiner
This commit is contained in:
Franck Cornu
Vesa Juvonen
parent
b35b81a92d
commit
6b55641f04
|
|
@ -26,4 +26,28 @@
|
|||
|
||||
.hoverIcon {
|
||||
color: '[theme:themeDarker, default:#0078d7]';
|
||||
}
|
||||
|
||||
.tags {
|
||||
|
||||
margin-top: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
* + * {
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
a, a:visited, a:focus, a:link, a:active {
|
||||
color: '[theme:themePrimary, default:#0078d7]';
|
||||
}
|
||||
|
||||
a:not(:empty):after {
|
||||
content: ",";
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
a:not(:empty):last-child:after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
|
@ -39,79 +39,80 @@ abstract class BaseTemplateService {
|
|||
public static getListDefaultTemplate(): string {
|
||||
return html`
|
||||
<style>
|
||||
.template_listItem {
|
||||
display:flex;
|
||||
display: -ms-flexbox;
|
||||
padding: 10px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.template_listItem {
|
||||
display:flex;
|
||||
display: -ms-flexbox;
|
||||
padding: 10px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.template_listItem img.img-preview {
|
||||
width: 120px;
|
||||
opacity: 1;
|
||||
display: block;
|
||||
height: auto;
|
||||
transition: .5s ease;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
.template_listItem img.img-preview {
|
||||
width: 120px;
|
||||
opacity: 1;
|
||||
display: block;
|
||||
height: auto;
|
||||
transition: .5s ease;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.template_result {
|
||||
display: flex;
|
||||
display: -ms-flexbox;
|
||||
}
|
||||
.template_result {
|
||||
display: flex;
|
||||
display: -ms-flexbox;
|
||||
}
|
||||
|
||||
.template_listItem iframe, .template_listItem .video-js {
|
||||
height: 250px;
|
||||
margin: 10px;
|
||||
}
|
||||
.template_listItem iframe, .template_listItem .video-js {
|
||||
height: 250px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.template_contentContainer {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
display: -ms-flexbox;
|
||||
flex-direction: column;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.template_contentContainer {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
display: -ms-flexbox;
|
||||
flex-direction: column;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.template_previewContainer {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
display: -ms-flexbox;
|
||||
}
|
||||
|
||||
/* Width for the documents and videos preview */
|
||||
.videoPreview, .iframePreview {
|
||||
width: 400px;
|
||||
}
|
||||
.template_previewContainer {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
display: -ms-flexbox;
|
||||
}
|
||||
|
||||
.template_icon {
|
||||
height: 32px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
/* Width for the documents and videos preview */
|
||||
.videoPreview, .iframePreview {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.template_icon {
|
||||
height: 32px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.hover {
|
||||
transition: .5s ease;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.img-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.img-container:hover img {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.img-container:hover .hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hover {
|
||||
transition: .5s ease;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.img-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.img-container:hover img {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.img-container:hover .hover {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
<div class="template_root">
|
||||
{{#if showResultsCount}}
|
||||
|
|
@ -145,7 +146,15 @@ abstract class BaseTemplateService {
|
|||
<div class="template_contentContainer">
|
||||
<span class=""><a href="{{getUrl item}}">{{Title}}</a></span>
|
||||
<span class="">{{getSummary HitHighlightedSummary}}</span>
|
||||
<span class=""><span>{{getDate Created "LL"}}</span></span>
|
||||
<span class=""><span>{{getDate Created "LL"}}</span></span>
|
||||
<div class="${templateStyles.tags}">
|
||||
{{#if owstaxidmetadataalltagsinfo}}
|
||||
<i class="ms-Icon ms-Icon--Tag" aria-hidden="true"></i>
|
||||
{{#each (split owstaxidmetadataalltagsinfo ";") as |tag| }}
|
||||
<a href="#owstaxidmetadataalltagsinfo:{{getLabel tag}}">{{getLabel tag}}</a>
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="template_previewContainer ms-hiddenSm">
|
||||
|
|
@ -384,6 +393,19 @@ abstract class BaseTemplateService {
|
|||
}
|
||||
return result.length;
|
||||
});
|
||||
|
||||
// Return the text label from amn'owstaxid_' type managed property
|
||||
// <p>{{getLabel "L0|#045686734-5215-4aad-bed7-8c3f0dbb61fc|Document"}}</p>
|
||||
Handlebars.registerHelper("getLabel", (owsTaxIdValue: string) => {
|
||||
|
||||
let termLabel = owsTaxIdValue;
|
||||
const matches = /L0\|#.+\|(.*)/.exec(owsTaxIdValue);
|
||||
if (matches) {
|
||||
termLabel = matches[1];
|
||||
}
|
||||
|
||||
return termLabel;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -44,9 +44,13 @@
|
|||
{
|
||||
"refinerName": "Size",
|
||||
"displayValue": "Size of the file"
|
||||
},
|
||||
{
|
||||
"refinerName": "owstaxidmetadataalltagsinfo",
|
||||
"displayValue": "Tags"
|
||||
}
|
||||
],
|
||||
"selectedProperties": "Title,Path,Created,Filename,SiteLogo,PreviewUrl,PictureThumbnailURL,ServerRedirectedPreviewURL,ServerRedirectedURL,HitHighlightedSummary,FileType,contentclass,ServerRedirectedEmbedURL,DefaultEncodingURL",
|
||||
"selectedProperties": "Title,Path,Created,Filename,SiteLogo,PreviewUrl,PictureThumbnailURL,ServerRedirectedPreviewURL,ServerRedirectedURL,HitHighlightedSummary,FileType,contentclass,ServerRedirectedEmbedURL,DefaultEncodingURL,owstaxidmetadataalltagsinfo",
|
||||
"enableQueryRules": false,
|
||||
"maxResultsCount": 10,
|
||||
"showBlank": true,
|
||||
|
|
|
|||
|
|
@ -246,7 +246,11 @@ export default class SearchResultsWebPart extends BaseClientSideWebPart<ISearchR
|
|||
{
|
||||
refinerName: "Size",
|
||||
displayValue: "Size of the file"
|
||||
}
|
||||
},
|
||||
{
|
||||
refinerName: "owstaxidmetadataalltagsinfo",
|
||||
displayValue: "Tags"
|
||||
}
|
||||
];
|
||||
this.properties.sortList = Array.isArray(this.properties.sortList) ? this.properties.sortList : [
|
||||
{
|
||||
|
|
@ -259,7 +263,7 @@ export default class SearchResultsWebPart extends BaseClientSideWebPart<ISearchR
|
|||
}
|
||||
];
|
||||
this.properties.sortableFields = Array.isArray(this.properties.sortableFields) ? this.properties.sortableFields : [];
|
||||
this.properties.selectedProperties = this.properties.selectedProperties ? this.properties.selectedProperties : "Title,Path,Created,Filename,SiteLogo,PreviewUrl,PictureThumbnailURL,ServerRedirectedPreviewURL,ServerRedirectedURL,HitHighlightedSummary,FileType,contentclass,ServerRedirectedEmbedURL,DefaultEncodingURL";
|
||||
this.properties.selectedProperties = this.properties.selectedProperties ? this.properties.selectedProperties : "Title,Path,Created,Filename,SiteLogo,PreviewUrl,PictureThumbnailURL,ServerRedirectedPreviewURL,ServerRedirectedURL,HitHighlightedSummary,FileType,contentclass,ServerRedirectedEmbedURL,DefaultEncodingURL,owstaxidmetadataalltagsinfo";
|
||||
this.properties.maxResultsCount = this.properties.maxResultsCount ? this.properties.maxResultsCount : 10;
|
||||
this.properties.resultTypes = Array.isArray(this.properties.resultTypes) ? this.properties.resultTypes : [];
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue