SharePoint Framework - Retrieve Search Results

Nanddeep Nachan

8y76.2k24100Article

24 Comments

Join the conversation! Your thoughts help the community grow.

Manoj Vashist3y ago
Thanks, Nanddeep, for this beautiful article. It was beneficial.
Aditya6y ago
Hi Nandeep i run the code and it is running correctly but when we type something in textbox it is not searching anything.
- Aditya6y ago
  Backend.js:6 [1580712624725][OtherGlobalError.window.onerro] TypeError: Cannot read property 'getSearchResults' of undefinedr @ backend.js:6 ./lib/Api/Trace/TraceLogger.js.TraceLogger._writeToConsole @ sp-loader-assembly_default.js:11569 ./lib/Api/Trace/TraceLogger.js.TraceLogger._log @ sp-loader-assembly_default.js:11552 ./lib/Api/Trace/TraceLogger.js.TraceLogger.logError @ sp-loader-assembly_default.js:11500 ./sp-application-base.js.__WEBPACK_AMD_DEFINE_RESULT__../lib/error/SPGlobalErrorHandler.js.SPGlobalErrorHandler.basicTracingHandler @ sp-application-base_en-us.js:25798 invokeGuardedCallbackDev @ react-dom.development.js:193 invokeGuardedCallback @ react-dom.development.js:250 invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:264 executeDispatch @ react-dom.development.js:555 executeDispatchesInOrder @ react-dom.development.js:577 executeDispatchesAndRelease @ react-dom.development.js:674 executeDispatchesAndReleaseTopLevel @ react-dom.development.js:682 forEachAccumulated @ react-dom.development.js:656 runEventsInBatch @ react-dom.development.js:810 runExtractedEventsInBatch @ react-dom.development.js:818 handleTopLevel @ react-dom.development.js:4929 batchedUpdates$1 @ react-dom.development.js:20539 batchedUpdates @ react-dom.development.js:2149 dispatchEvent @ react-dom.development.js:5008 (anonymous) @ react-dom.development.js:20590 unstable_runWithPriority @ react.development.js:735 interactiveUpdates$1 @ react-dom.development.js:20589 interactiveUpdates @ react-dom.development.js:2168 dispatchInteractiveEvent @ react-dom.development.js:4985 SearchReactViewer.tsx:71 Uncaught TypeError: Cannot read property 'getSearchResults' of undefined at Object../lib/webparts/searchReactViewer/components/SearchReactViewer.js.SearchReactViewer._searchClicked [as onClick] (SearchReactViewer.tsx:71) at BaseButton._this._onClick (BaseButton.tsx:642) at HTMLUnknownElement.callCallback (react-dom.development.js:143) at Object.invokeGuardedCallbackDev (react-dom.development.js:193) at invokeGuardedCallback (react-dom.development.js:250) at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:264) at executeDispatch (react-dom.development.js:555) at executeDispatchesInOrder (react-dom.development.js:577) at executeDispatchesAndRelease (react-dom.development.js:674) at executeDispatchesAndReleaseTopLevel (react-dom.development.js:682)
- Nanddeep Nachan6y ago
  Please provide the error from browser console.
vinod kumar6y ago
Nice Article !!!
- Nanddeep Nachan6y ago
  Sure. This code is now 2 years old. I will revisit. Thanks
- Sana Kashif6y ago
  Hi Nanddeep, I am getting the same error as Aditiya. Can you please help me with this
Abenet Beyene6y ago
Item.Url is not clickable,
- Abenet Beyene6y ago
  <Link href={item.Url}>{item.Title}</Link> not sure if href is pointing to url?
- Abenet Beyene6y ago
  Its undefined, when I console log it.
- Nanddeep Nachan6y ago
  Please check the value being returned from item.Url
Abenet Beyene6y ago
What is the best way to implement filter items after the data render?
- Abenet Beyene6y ago
  Hi Nanddeep, I wish you can do video on spfx with react using Search API. It would really help other dev. Thanks.
- Nanddeep Nachan6y ago
  Use the REST API filtering.
avi dhall6y ago
I'm getting this error. Error - [webpack] 'dist':./lib/webparts/searchResultsViewer/components/SearchResultsViewer.jsModule not found: Error: Can't resolve './TextField.Examples.scss' in 'C:\Users\avi\Desktop\SPFX\searchListFunctionality\lib\webparts\searchResultsViewer\components' resolve './TextField.Examples.scss' in 'C:\Users\avi\Desktop\SPFX\searchListFunctionality\lib\webparts\searchResultsViewer\components' using description file: C:\Users\avi\Desktop\SPFX\searchListFunctionality\package.json (relative path: ./lib/webparts/searchResultsViewer/components) Field 'browser' doesn't contain a valid alias configuration using description file: C:\Users\avi\Desktop\SPFX\searchListFunctionality\package.json (relative path: ./lib/webparts/searchResultsViewer/components/TextField.Examples.scss) no extension Field 'browser' doesn't contain a valid alias configuration C:\Users\avi\Desktop\SPFX\searchListFunctionality\lib\webparts\searchResultsViewer\components\TextField.Examples.scss doesn't exist .wasm Field 'browser' doesn't contain a valid alias configuration C:\Users\avi\Desktop\SPFX\searchListFunctionality\lib\webparts\searchResultsViewer\components\TextField.Examples.scss.wasm doesn't exist .mjs Field 'browser' doesn't contain a valid alias configuration C:\Users\avi\Desktop\SPFX\searchListFunctionality\lib\webparts\searchResultsViewer\components\TextField.Examples.scss.mjs doesn't exist .js Field 'browser' doesn't contain a valid alias configuration C:\Users\avi\Desktop\SPFX\searchListFunctionality\lib\webparts\searchResultsViewer\components\TextField.Examples.scss.js doesn't exist .json Field 'browser' doesn't contain a valid alias configuration C:\Users\avi\Desktop\SPFX\searchListFunctionality\lib\webparts\searchResultsViewer\components\TextField.Examples.scss.json doesn't exist as directory C:\Users\avi\Desktop\SPFX\searchListFunctionality\lib\webparts\searchResultsViewer\components\TextField.Examples.scss doesn't exist [C:\Users\avi\Desktop\SPFX\searchListFunctionality\lib\webparts\searchResultsViewer\components\TextField.Examples.scss] [C:\Users\avi\Desktop\SPFX\searchListFunctionality\lib\webparts\searchResultsViewer\components\TextField.Examples.scss.wasm] [C:\Users\avi\Desktop\SPFX\searchListFunctionality\lib\webparts\searchResultsViewer\components\TextField.Examples.scss.mjs] [C:\Users\avi\Desktop\SPFX\searchListFunctionality\lib\webparts\searchResultsViewer\components\TextField.Examples.scss.js] [C:\Users\avi\Desktop\SPFX\searchListFunctionality\lib\webparts\searchResultsViewer\components\TextField.Examples.scss.json] @ ./lib/webparts/searchResultsViewer/components/SearchResultsViewer.js 14:0-35 @ ./lib/webparts/searchResultsViewer/SearchResultsViewerWebPart.js
- Nanddeep Nachan6y ago
  Delete node_modules folder. Run "npm install" again.
Ankit Singh7y ago
Hi Nanddeep I want to use your services(Search) in my project, I have created services folder and added both the files(SearchService and ISearchService). when I am doing gulp serve its giving build error saying: src/webparts/kendoReactSpfx/services/ISearchService.ts' is not a module.
Ankit Singh7y ago
Hi Nandeep Thanks for this web part I am stuck at one point, need your guidance. My requirement is fetch all the items(using search) and their properties, but when i am using search API its returning only by default columns only which share point provides.(ex. Title, Author, Last Modified...). I am not getting columns and their values which i have created. My Search Query is https://sitesURL/_api/search/query?querytext='ContentTypeId:0x0100F70355365FB2A14FA519B9E02FFF7F67'
- Ankit Singh7y ago
  Thanks for your reply I was adding the selected property, issue was list columns which I had added its not searchable(I think I have to map crawled properties to managed property).
- Nanddeep Nachan7y ago
  Please use selectproperties parameter in your search query. E.g. https://contoso.sharepoint.com/_api/search/query?querytext='terms'&selectproperties='Path,Url,Title,Author'
krishnakanth dasi7y ago
I did not see any file with name ISearchService.Can you please explain about that
- Nanddeep Nachan7y ago
  Hi, ISearchService represents the schema (model) for Search Results. Please download it from attached code zip.
Md Tahmidul Abedin8y ago
Nice One. :)

Text field

// Import Textfield component
import { TextField } from 'office-ui-fabric-react/lib/TextField';
import './TextField.Examples.scss';
<TextField
required={true}
name="txtSearchText"
placeholder="Search..."
value={this.state.searchText}
onChanged={e => this.setState({ searchText: e })}
/>

Button

// Import Button component
import { IButtonProps, DefaultButton } from 'office-ui-fabric-react/lib/Button';
<DefaultButton
data-automation-id="search"
target="_blank"
title="Search"
onClick={this._searchClicked}
>
Search
</DefaultButton>
private _searchClicked(): void {
}

List

// Import List component
import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone';
import { List } from 'office-ui-fabric-react/lib/List';
// Import Link component
import { Link } from 'office-ui-fabric-react/lib/Link';
<FocusZone direction={FocusZoneDirection.vertical}>
<div className="ms-ListGhostingExample-container" data-is-scrollable={true}>
<List items={this.state.items} onRenderCell={this._onRenderCell} />
</div>
</FocusZone>
private _onRenderCell(item: ISPSearchResult, index: number, isScrolling: boolean): JSX.Element {
return (
<div className="ms-ListGhostingExample-itemCell" data-is-focusable={true}>
<div className="ms-ListGhostingExample-itemContent">
<div className="ms-ListGhostingExample-itemName">
<Link href={item.Url}>{item.Title}</Link>
</div>
<div className="ms-ListGhostingExample-itemName">{item.Description}</div>
<p></p>
</div>
</div>
);
}

In the command prompt type “gulp serve” to see the controls on webpart.

Implement service to retrieve search results

Add a folder “services” to the solution.
To the “services” folder, add a file SearchService.ts
We will use the REST API to get the search results.

import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
import { IWebPartContext } from '@microsoft/sp-webpart-base';
import { ISPSearchResult } from '../components/ISPSearchResult';
import { ISearchResults, ICells, ICellValue, ISearchResponse } from './ISearchService';
import { escape } from '@microsoft/sp-lodash-subset';
export default class SearchService {
constructor(private _context: IWebPartContext) {
}
public getSearchResults(query: string): Promise<ISPSearchResult[]> {
let url: string = this._context.pageContext.web.absoluteUrl + "/_api/search/query?querytext='" + query + "'";
return new Promise<ISPSearchResult[]>((resolve, reject) => {
// Do an Ajax call to receive the search results
this._getSearchData(url).then((res: ISearchResults) => {
let searchResp: ISPSearchResult[] = [];
// Check if there was an error
if (typeof res["odata.error"] !== "undefined") {
if (typeof res["odata.error"]["message"] !== "undefined") {
Promise.reject(res["odata.error"]["message"].value);
return;
}
}
if (!this._isNull(res)) {
const fields: string = "Title,Path,Description";
// Retrieve all the table rows
if (typeof res.PrimaryQueryResult.RelevantResults.Table !== 'undefined') {
if (typeof res.PrimaryQueryResult.RelevantResults.Table.Rows !== 'undefined') {
searchResp = this._setSearchResults(res.PrimaryQueryResult.RelevantResults.Table.Rows, fields);
}
}
}
// Return the retrieved result set
resolve(searchResp);
});
});
}
/**
* Retrieve the results from the search API
*
* @param url
*/
private _getSearchData(url: string): Promise<ISearchResults> {
return this._context.spHttpClient.get(url, SPHttpClient.configurations.v1, {
headers: {
'odata-version': '3.0'
}
}).then((res: SPHttpClientResponse) => {
return res.json();
}).catch(error => {
return Promise.reject(JSON.stringify(error));
});
}
/**
* Set the current set of search results
*
* @param crntResults
* @param fields
*/
private _setSearchResults(crntResults: ICells[], fields: string): any[] {
const temp: any[] = [];
if (crntResults.length > 0) {
const flds: string[] = fields.toLowerCase().split(',');
crntResults.forEach((result) => {
// Create a temp value
var val: Object = {}
result.Cells.forEach((cell: ICellValue) => {
if (flds.indexOf(cell.Key.toLowerCase()) !== -1) {
// Add key and value to temp value
val[cell.Key] = cell.Value;
}
});
// Push this to the temp array
temp.push(val);
});
}
return temp;
}
/**
* Check if the value is null or undefined
*
* @param value
*/
private _isNull(value: any): boolean {
return value === null || typeof value === "undefined";
}
}

Test the WebPart

On the command prompt, type “gulp serve”
Open SharePoint site
Navigate to /_layouts/15/workbench.aspx
Add the webpart to page.
Type the search text and verify the search results.

Troubleshooting

In some cases, SharePoint workbench (https://[tenant].sharepoint.com/_layouts/15/workbench.aspx) shows below error although “gulp serve” is running.

Open below URL in the next tab of the browser. Accept the warning message.

https://localhost:4321/temp/manifests.js

Summary

Modern SharePoint does not have web part for displaying search results. However, using the search REST API the results can be achieved.