Merge pull request #1455 from anoopt/react-graph-cmmd

New sample - react-graph-cascading-managed-metadata

samples/react-graph-cascading-managed-metadata/.editorconfig

@@ -0,0 +1,25 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+
+# change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# we recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[{package,bower}.json]
+indent_style = space
+indent_size = 2

samples/react-graph-cascading-managed-metadata/.gitignore

@@ -0,0 +1,33 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Dependency directories
+node_modules
+
+# Build generated files
+dist
+lib
+solution
+temp
+*.sppkg
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# OSX
+.DS_Store
+
+# Visual Studio files
+.ntvs_analysis.dat
+.vs
+bin
+obj
+
+# Resx Generated Code
+*.resx.ts
+
+# Styles Generated Code
+*.scss.ts
+*.scss.d.ts

samples/react-graph-cascading-managed-metadata/.yo-rc.json

@@ -0,0 +1,12 @@
+{
+  "@microsoft/generator-sharepoint": {
+    "isCreatingSolution": true,
+    "environment": "spo",
+    "version": "1.9.1",
+    "libraryName": "react-graph-cascading-managed-metadata",
+    "libraryId": "cdc626ca-e9a7-4d1d-bded-a574bc5e61d0",
+    "packageManager": "npm",
+    "isDomainIsolated": false,
+    "componentType": "webpart"
+  }
+}

samples/react-graph-cascading-managed-metadata/README.md

@@ -0,0 +1,72 @@
+# Cascading managed metadata using Graph API (beta)
+
+## Summary
+
+This web part shows how to use the Microsoft Graph APIs (beta) for Taxonomy to get the data.
+
+### Functionality
+
+![Cascading managed metadata](./assets/cmmd.gif)
+
+### Termstore
+
+![Term store](./assets/termstore.png)
+
+## Used SharePoint Framework Version
+
+![SPFx v1.11.0](https://img.shields.io/badge/SPFx-1.11.0-green.svg)
+
+## Applies to
+
+* [SharePoint Framework Developer](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
+
+## Pre-requisites
+
+* Set up the termset structure as shown in the image above.
+* For the cities, get the required latitude and longitude.
+* Set the description of the city term as `latitude;longitude` (as highlighted for the term `London` in the image above).
+
+
+## Solution
+
+Solution|Author(s)
+--------|---------
+react-graph-cascading-managed-metadata| Anoop Tatti ([@anooptells](https://twitter.com/anooptells))
+
+## Version history
+
+Version|Date|Comments
+-------|----|--------
+1.0.0|Aug 24, 2020|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.**
+
+---
+
+## Minimal Path to Awesome
+
+* Clone this repository
+* in the command line run:
+  * `npm install`
+  * `gulp serve`
+
+## Features
+
+This sample illustrates the following concepts on top of the SharePoint Framework:
+
+* Get data terms using Microsoft Graph API (beta).
+* React Hooks
+* Using async / await for the async calls
+* Caching the data in session storage
+* Usage of PnP SPFx controls (Maps and Placeholder)
+* Office UI fabric components
+
+### Enhancements
+
+* Currently, this web part supports 2-level cascading. So there is scope to enhance this such that it supports more levels of cascading dynamically.
+* Currently, this web part reads latitude and longitude from description of the city terms. If there is a way of getting these from the custom properties of the city terms, then that needs to be implemented.
+
+<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-graph-cascading-managed-metadata" />

samples/react-graph-cascading-managed-metadata/config/config.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
+  "version": "2.0",
+  "bundles": {
+    "cascading-managed-metadata-web-part": {
+      "components": [
+        {
+          "entrypoint": "./lib/webparts/cascadingManagedMetadata/CascadingManagedMetadataWebPart.js",
+          "manifest": "./src/webparts/cascadingManagedMetadata/CascadingManagedMetadataWebPart.manifest.json"
+        }
+      ]
+    }
+  },
+  "externals": {},
+  "localizedResources": {
+    "CascadingManagedMetadataWebPartStrings": "lib/webparts/cascadingManagedMetadata/loc/{locale}.js",
+    "ControlStrings": "node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js"
+  }
+}

samples/react-graph-cascading-managed-metadata/config/copy-assets.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
+  "deployCdnPath": "temp/deploy"
+}

samples/react-graph-cascading-managed-metadata/config/deploy-azure-storage.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
+  "workingDir": "./temp/deploy/",
+  "account": "<!-- STORAGE ACCOUNT NAME -->",
+  "container": "react-graph-cascading-managed-metadata",
+  "accessKey": "<!-- ACCESS KEY -->"
+}

samples/react-graph-cascading-managed-metadata/config/package-solution.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
+  "solution": {
+    "name": "react-graph-cascading-managed-metadata-client-side-solution",
+    "id": "cdc626ca-e9a7-4d1d-bded-a574bc5e61d0",
+    "version": "1.0.0.0",
+    "includeClientSideAssets": true,
+    "skipFeatureDeployment": true,
+    "isDomainIsolated": false
+  },
+  "paths": {
+    "zippedPackage": "solution/react-graph-cascading-managed-metadata.sppkg"
+  }
+}

samples/react-graph-cascading-managed-metadata/config/serve.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
+  "port": 4321,
+  "https": true,
+  "initialPage": "https://localhost:5432/workbench",
+  "api": {
+    "port": 5432,
+    "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
+  }
+}

samples/react-graph-cascading-managed-metadata/config/write-manifests.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
+  "cdnBasePath": "<!-- PATH TO CDN -->"
+}

samples/react-graph-cascading-managed-metadata/gulpfile.js

@@ -0,0 +1,36 @@
+'use strict';
+
+const gulp = require('gulp');
+const build = require('@microsoft/sp-build-web');
+build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
+
+const argv = build.rig.getYargs().argv;
+const useCustomServe = argv['custom-serve'];
+const fs = require("fs");
+const workbenchApi = require("@microsoft/sp-webpart-workbench/lib/api");
+
+if (useCustomServe) {
+  build.tslintCmd.enabled = false;
+
+  const ensureWorkbenchSubtask = build.subTask('ensure-workbench-task', function (gulp, buildOptions, done) {
+    this.log('Creating workbench.html file...');
+    try {
+      workbenchApi.default["/workbench"]();
+    } catch (e) { }
+
+    done();
+  });
+
+  build.rig.addPostBuildTask(build.task('ensure-workbench', ensureWorkbenchSubtask));
+
+  build.configureWebpack.mergeConfig({
+    additionalConfiguration: (generatedConfiguration) => {
+      fs.writeFileSync("./temp/_webpack_config.json", JSON.stringify(generatedConfiguration, null, 2));
+      return generatedConfiguration;
+    }
+  });
+
+}
+
+build.initialize(require('gulp'));
+