sp-dev-fx-webparts/samples/angular-search
Vesa Juvonen 1f17c07a14 Folder rename and tracking image to angular search web part 2017-02-11 02:20:48 +02:00
..
assets Folder rename and tracking image to angular search web part 2017-02-11 02:20:48 +02:00
config Folder rename and tracking image to angular search web part 2017-02-11 02:20:48 +02:00
src Folder rename and tracking image to angular search web part 2017-02-11 02:20:48 +02:00
typings Folder rename and tracking image to angular search web part 2017-02-11 02:20:48 +02:00
.editorconfig Folder rename and tracking image to angular search web part 2017-02-11 02:20:48 +02:00
.gitattributes Folder rename and tracking image to angular search web part 2017-02-11 02:20:48 +02:00
.gitignore Folder rename and tracking image to angular search web part 2017-02-11 02:20:48 +02:00
.npmignore Folder rename and tracking image to angular search web part 2017-02-11 02:20:48 +02:00
.yo-rc.json Folder rename and tracking image to angular search web part 2017-02-11 02:20:48 +02:00
README.md Folder rename and tracking image to angular search web part 2017-02-11 02:20:48 +02:00
gulpfile.js Folder rename and tracking image to angular search web part 2017-02-11 02:20:48 +02:00
package.json Folder rename and tracking image to angular search web part 2017-02-11 02:20:48 +02:00
tsconfig.json Folder rename and tracking image to angular search web part 2017-02-11 02:20:48 +02:00

README.md

Search Client-Side Web Part Built with Angular v1.x

Summary

Sample Search Web Part that illustrates how you can use Angular within the new SharePoint Framework

Sample of the search web part This app uses SharePoint's Search REST API endpoint to query listitems of a specific content type and displays the results to the end user. Ideally instead of selecting a content type for the search you would want to select a Result Source, but currently Result Sources are not available through SharePoint's REST API.

The logic for querying the SharePoint Content Types in the properties of the webpart was in part due to Chris O'Brien and this blog post

Note: In order to use the ngOfficeFabric code I use the ModuleLoader to load newer source files than the currently Office Fabric UI in SharePoint Online, which will cause many of the icons not to load properly on the SharePoint Page this webpart is added to.

Note: For the display template of the search results I'm currently using the Office Fabric UI List template. Ideally I was hoping to use the DocumentCard Component, however, that is not yet available through the ngOfficUIFabric.

Note: The List display is not currently displaying correctly because there appears to be an issue when loading https://appsforoffice.microsoft.com/fabric/2.6.1/fabric.components.min.css which causes the dropdowns in the property pane not to work.

Used SharePoint Framework Version

drop

Applies to

Solution

Solution Author(s)
angular-search David Hartman (Slalom)

Version history

Version Date Comments
1.0 February 4th, 2017 Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.


Configuration Bliss

  • clone this repo
  • in the command line run:
  • npm i typings -g
  • npm i
  • gulp serve --nobrowser
  • Enable the following features in you site
  • Publishing features on site collection
  • Publishing features on site

Note: The Content Types that I pull for the search come from the Publishing Content Type which only available when the Publishing Features are enabled on the site. I'm also searching by content type name and not by id becauase then I would get everything that inherits from that content type. I only want the the results for a specific content type and not everything that inherits that content type as well