Merge pull request #9 from pnp/pkr-add-dynamic-card

adding simple dynamic card sample

samples/ace-dynamic-card/.gitignore

@@ -0,0 +1,33 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Dependency directories
+node_modules
+
+# Build generated files
+dist
+lib
+release
+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

samples/ace-dynamic-card/.npmignore

@@ -0,0 +1,16 @@
+!dist
+config
+
+gulpfile.js
+
+release
+src
+temp
+
+tsconfig.json
+tslint.json
+
+*.log
+
+.yo-rc.json
+.vscode

samples/ace-dynamic-card/.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "msjsdiag.debugger-for-chrome"
+  ]
+}

samples/ace-dynamic-card/.vscode/launch.json

@@ -0,0 +1,27 @@
+{
+  /**
+   * Install Chrome Debugger Extension for Visual Studio Code to debug your components with the
+   * Chrome browser: https://aka.ms/spfx-debugger-extensions
+   */
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Hosted workbench",
+      "type": "chrome",
+      "request": "launch",
+      "url": "https://enter-your-SharePoint-site/_layouts/workbench.aspx",
+      "webRoot": "${workspaceRoot}",
+      "sourceMaps": true,
+      "sourceMapPathOverrides": {
+        "webpack:///.././src/*": "${webRoot}/src/*",
+        "webpack:///../../../src/*": "${webRoot}/src/*",
+        "webpack:///../../../../src/*": "${webRoot}/src/*",
+        "webpack:///../../../../../src/*": "${webRoot}/src/*"
+      },
+      "runtimeArgs": [
+        "--remote-debugging-port=9222",
+        "-incognito"
+      ]
+    }
+  ]
+}

samples/ace-dynamic-card/.vscode/settings.json

@@ -0,0 +1,13 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+  // Configure glob patterns for excluding files and folders in the file explorer.
+  "files.exclude": {
+    "**/.git": true,
+    "**/.DS_Store": true,
+    "**/bower_components": true,
+    "**/coverage": true,
+    "**/lib-amd": true,
+    "src/**/*.scss.ts": true
+  },
+  "typescript.tsdk": ".\\node_modules\\typescript\\lib"
+}

samples/ace-dynamic-card/.yo-rc.json

@@ -0,0 +1,14 @@
+{
+  "@microsoft/generator-sharepoint": {
+    "plusBeta": false,
+    "isCreatingSolution": false,
+    "environment": "spo",
+    "version": "1.13.1",
+    "libraryName": "ace-dynamic-card",
+    "libraryId": "9ec981cb-684c-4a48-8a1d-13c882484021",
+    "packageManager": "npm",
+    "isDomainIsolated": false,
+    "componentType": "adaptiveCardExtension",
+    "aceTemplateType": "Image"
+  }
+}

samples/ace-dynamic-card/README.md

@@ -0,0 +1,75 @@
+# ace-dynamic-card
+
+## Summary
+
+Includes three ACE's showing simple ways to include dynamic content and liven up the appearance of your ACE's. Through text updates, dymamically created SVG images, or rotating content you can make your cards more interesting and catch user's attention.
+
+![](assets/cards-in-action.png)
+
+## Used SharePoint Framework Version
+
+![version](https://img.shields.io/badge/version-1.13-green.svg)
+
+## Applies to
+
+- [SharePoint Framework](https://aka.ms/spfx)
+- [Microsoft 365 tenant](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
+
+> Get your own free development tenant by subscribing to [Microsoft 365 developer program](http://aka.ms/o365devprogram)
+
+## Solution
+
+Solution|Author(s)
+--------|---------
+adaptiveCardExtensions | Patrick Rodgers (Microsoft)
+
+## Version history
+
+Version|Date|Comments
+-------|----|--------
+1.0|February 7, 2022|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
+- Ensure that you are at the solution folder
+- in the command-line run:
+  - **npm install**
+  - **gulp serve**
+
+## Features
+
+This sample shows three simple ways to add dynamic content to your ACE cards. Each card updates the state using a self-resetting timer pattern:
+
+```TypeScript
+// create a function to update state
+const fixture = () => {
+
+  // update state, these changes could come from web calls, user interactions (paging), or static values
+  this.setState({
+    description: this.properties.description + this.state.timerCounter + 1,
+    timerCounter: this.state.timerCounter + 1,
+  });
+
+  // call the same function again with a delay
+  setTimeout(fixture, 5000);
+};
+
+// start the process by calling the function directly, it will run once then start a timer for subsequent runs
+fixture();
+```
+
+
+## References
+
+- [Getting started with SharePoint Framework](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
+- [Building for Microsoft teams](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/build-for-teams-overview)
+- [Use Microsoft Graph in your solution](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis)
+- [Publish SharePoint Framework applications to the Marketplace](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/publish-to-marketplace-overview)
+- [Microsoft 365 Patterns and Practices](https://aka.ms/m365pnp) - Guidance, tooling, samples and open-source controls for your Microsoft 365 development

samples/ace-dynamic-card/config/config.json

@@ -0,0 +1,36 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
+  "version": "2.0",
+  "bundles": {
+    "dynamic-card-adaptive-card-extension": {
+      "components": [
+        {
+          "entrypoint": "./lib/adaptiveCardExtensions/dynamicCard/DynamicCardAdaptiveCardExtension.js",
+          "manifest": "./src/adaptiveCardExtensions/dynamicCard/DynamicCardAdaptiveCardExtension.manifest.json"
+        }
+      ]
+    },
+    "dynamic-card-2-adaptive-card-extension": {
+      "components": [
+        {
+          "entrypoint": "./lib/adaptiveCardExtensions/dynamicCard2/DynamicCard2AdaptiveCardExtension.js",
+          "manifest": "./src/adaptiveCardExtensions/dynamicCard2/DynamicCard2AdaptiveCardExtension.manifest.json"
+        }
+      ]
+    },
+    "dynamicard-3-adaptive-card-extension": {
+      "components": [
+        {
+          "entrypoint": "./lib/adaptiveCardExtensions/dynamicard3/Dynamicard3AdaptiveCardExtension.js",
+          "manifest": "./src/adaptiveCardExtensions/dynamicard3/Dynamicard3AdaptiveCardExtension.manifest.json"
+        }
+      ]
+    }
+  },
+  "externals": {},
+  "localizedResources": {
+    "DynamicCardAdaptiveCardExtensionStrings": "lib/adaptiveCardExtensions/dynamicCard/loc/{locale}.js",
+    "DynamicCard2AdaptiveCardExtensionStrings": "lib/adaptiveCardExtensions/dynamicCard2/loc/{locale}.js",
+    "Dynamicard3AdaptiveCardExtensionStrings": "lib/adaptiveCardExtensions/dynamicard3/loc/{locale}.js"
+  }
+}

samples/ace-dynamic-card/config/deploy-azure-storage.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
+  "workingDir": "./release/assets/",
+  "account": "<!-- STORAGE ACCOUNT NAME -->",
+  "container": "ace-dynamic-card",
+  "accessKey": "<!-- ACCESS KEY -->"
+}

samples/ace-dynamic-card/config/package-solution.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
+  "solution": {
+    "name": "ace-dynamic-card-client-side-solution",
+    "id": "9ec981cb-684c-4a48-8a1d-13c882484021",
+    "version": "1.0.0.0",
+    "includeClientSideAssets": true,
+    "isDomainIsolated": false,
+    "developer": {
+      "name": "",
+      "websiteUrl": "",
+      "privacyUrl": "",
+      "termsOfUseUrl": "",
+      "mpnId": "Undefined-1.13.1"
+    }
+  },
+  "paths": {
+    "zippedPackage": "solution/ace-dynamic-card.sppkg"
+  }
+}

samples/ace-dynamic-card/config/serve.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
+  "port": 4321,
+  "https": true,
+  "initialPage": "https://enter-your-SharePoint-site/_layouts/workbench.aspx"
+}

samples/ace-dynamic-card/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/ace-dynamic-card/gulpfile.js

@@ -0,0 +1,16 @@
+'use strict';
+
+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.`);
+
+var getTasks = build.rig.getTasks;
+build.rig.getTasks = function () {
+  var result = getTasks.call(build.rig);
+
+  result.set('serve', result.get('serve-deprecated'));
+
+  return result;
+};
+
+build.initialize(require('gulp'));