Thursday, 23 November 2017

Custom action term set navigation for SharePoint reusing the SPFx extension sample

There is a great SharePoint Framework extensions sample for navigation using the term store on GitHub . However this can only be used on the Modern pages. I tried to re-use the code of this component to build a custom action that can be used on the classic pages to provide a similar functionality.

Here is the custom action code on GitHub

  • In this, the SPFx specific code is replaced with relevant code that would run on classic pages. The extensions sample uses SPHttpClient and the Context object of SPFx. This has been replaced to use Axios NPM module to make HTTP calls. (SPTermStoreService.ts file changed)
  • The TenantGlobalNavBarApplicationCustomizer.ts has been changed to load the navigation bar when the SharePoint page loads. The SPFx extensions specific code is removed 
  • The modern pages already have react, so the SPFx components when bundled do not include react and react-dom. However, this custom action bundles react and react-dom as well in the final bundle. So there is a custom gulpfile.js with this project that uses Microsoft/gulp-core-build to compile the Typescript and SASS files 
  • The final bundle is generate using webpack through a gulp task.

More details in the GitHub documentation

No comments:

Post a Comment