History

Vesa Juvonen 1275b2ca9a Small readme adjustments		2016-11-04 11:44:19 +02:00
..
.vscode	Small readme adjustments	2016-11-04 11:44:19 +02:00
assets	updated readme	2016-10-14 14:44:28 -04:00
config	Initial Commit	2016-10-07 19:13:31 -04:00
src	Did some house keeping and updated README	2016-10-17 10:40:03 -04:00
typings	Initial Commit	2016-10-07 19:13:31 -04:00
.editorconfig	Initial Commit	2016-10-07 19:13:31 -04:00
.gitattributes	Initial Commit	2016-10-07 19:13:31 -04:00
.gitignore	Initial Commit	2016-10-07 19:13:31 -04:00
.npmignore	Initial Commit	2016-10-07 19:13:31 -04:00
.yo-rc.json	Initial Commit	2016-10-07 19:13:31 -04:00
README.md	Small readme adjustments	2016-11-04 11:44:19 +02:00
angular-search.njsproj	Initial Commit	2016-10-07 19:13:31 -04:00
copyTemplatesTask.js	Initial Commit	2016-10-07 19:13:31 -04:00
gulpfile.js	Initial Commit	2016-10-07 19:13:31 -04:00
package.json	Initial Commit	2016-10-07 19:13:31 -04:00
setBaseUrlTask.js	Initial Commit	2016-10-07 19:13:31 -04:00
tsconfig.json	Initial Commit	2016-10-07 19:13:31 -04:00
tsd.json	Initial Commit	2016-10-07 19:13:31 -04: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

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.

Applies to

Solution

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

Version history

Version	Date	Comments
1.0	October 14, 2016	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

In the file 'AngularSearchWebPart.ts' around line 92 you will need to put the url of the directory where the html template file resides.

Note: Adding the location of the template is necessary because Angular's $sce service doesn't trust the location the html template is loaded from, so the url needs to be whitelisted with the $sce service. If you just want whitelisted every url the entry in the $sce could just be '*'. There is plenty of documentation available if you run into trouble whitelisting the template url.