Merge pull request #179 from dcashpeterson/main

Merge PR 177

samples/ImageCard-DynamicContentCard/.gitignore

@@ -0,0 +1,34 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Dependency directories
+node_modules
+
+# Build generated files
+dist
+lib
+release
+solution
+temp
+*.sppkg
+.heft
+
+# 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/ImageCard-DynamicContentCard/.npmignore

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

samples/ImageCard-DynamicContentCard/.vscode/launch.json

@@ -0,0 +1,23 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Hosted workbench",
+      "type": "msedge",
+      "request": "launch",
+      "url": "https://{tenantDomain}/_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/ImageCard-DynamicContentCard/.vscode/settings.json

@@ -0,0 +1,14 @@
+// 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,
+    "**/jest-output": true,
+    "**/lib-amd": true,
+    "src/**/*.scss.ts": true
+  },
+  "typescript.tsdk": ".\\node_modules\\typescript\\lib"
+}

samples/ImageCard-DynamicContentCard/.yo-rc.json

@@ -0,0 +1,24 @@
+{
+  "@microsoft/generator-sharepoint": {
+    "whichFolder": "subdir",
+    "solutionName": "Dynamic Content Card",
+    "componentType": "adaptiveCardExtension",
+    "aceTemplateType": "Generic",
+    "componentName": "DynamicContentCard",
+    "plusBeta": false,
+    "isCreatingSolution": true,
+    "nodeVersion": "18.19.0",
+    "sdksVersions": {
+      "@microsoft/microsoft-graph-client": "3.0.2",
+      "@microsoft/teams-js": "2.12.0"
+    },
+    "version": "1.18.2",
+    "libraryName": "dynamic-content-card-dcc",
+    "libraryId": "648c2857-dbd6-48b0-9575-ee1ac713ae7e",
+    "environment": "spo",
+    "packageManager": "npm",
+    "solutionShortDescription": "Dynamic Content Card description",
+    "skipFeatureDeployment": true,
+    "isDomainIsolated": false
+  }
+}

samples/ImageCard-DynamicContentCard/README.md

@@ -0,0 +1,77 @@
+# Dynamic Content Card (aka DCC)
+
+## Summary
+
+Dynamic Content Card (aka DCC) is a SPFx ACE Card that displays dynamic content hosted on a Sharepoint list and filtered by the user's usageLocation property. Enabling you to display content based on the user's location and delegate the management of the content to the business users thanks to the Sharepoint list.
+
+![DCC](./assets/Image1.png)
+
+## Used SharePoint Framework Version
+
+![version](https://img.shields.io/badge/version-1.18.2-green.svg)
+
+## Used PNP/Graph Version
+
+![version](https://img.shields.io/badge/version-3.24.0-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)
+
+## Prerequisites
+
+ Graph permission to enable the solution to access the user profile. 
+
+- User.read is the minimum permission required and used by the solution.
+
+## Solution
+
+| Solution    | Author(s)                                               |
+| ----------- | ------------------------------------------------------- |
+| DCC         | Eric Scherlinger - Sr Product Manager Microsoft         |
+
+## Version history
+
+| Version | Date             | Comments        |
+| ------- | ---------------- | --------------- |
+| 1.0     | March 20, 2024   | 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
+
+- Open the sample in VS Code
+- Get the [Viva Connection Toolkit](https://marketplace.visualstudio.com/items?itemName=m365pnp.viva-connections-toolkit)
+- In the Viva Connection Toolkit Window
+  - Click on **"View samples"**
+  - Search for "DCC"
+  - Click on "Use" this will clone the sample to your local machine, Rename the solution and run the NPM install for you
+  - Once the NPM install is done, you can run the solution by clicking on the **"Serve"** Task in the Viva Connection Toolkit Window
+  - Please note that you might need to run the **"Grant API Permissions"** task to grant the required permission (User.Read) to the solution
+
+## Features
+
+The ACE Card is a SPFx web part that displays dynamic content hosted on a Sharepoint list and filtered by the user's usageLocation property. Enabling you to display content based on the user's location and delegate the management of the content to the business users thanks to the Sharepoint list.
+
+This extension illustrates the following concepts:
+
+- All Data is hosted in an SPO list that can be delegated to the content owners.
+- The ACE Card uses the Graph API to fetch the user's usageLocation and filter the content based on it.
+- Cards Property Pane enable you to change its Name but also create the SPO list and columns for you and access it quickly once created
+- The card is designed to display URLs. Those URLs can be opened in Teams or on the device Native Browser. This enables you to leverage Universal Links and Deep Links to open the content in the right Application. For example view a PowerBi report directly in its Native Application or Open directly and Instagram page in the Instagram Application.
+- All Strings are stored in the loc folder enabling you to quickly adapt the text to your usecase and add extras languages.
+
+## 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/ImageCard-DynamicContentCard/assets/sample.json

@@ -0,0 +1,51 @@
+[
+  {
+    "name": "pnp-sp-fx-aces-dynamiccontentcard",
+    "source": "pnp",
+    "title": "Dynamic Content Card",
+    "shortDescription": "Dynamic Content Card (aka DCC) is a SPFx ACE Card that displays dynamic content hosted on a Sharepoint list and filtered by the user's usageLocation property.",
+    "url": "https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/ImageCard-DynamicContentCard",
+    "longDescription": [
+      "Dynamic Content Card (aka DCC) is a SPFx ACE Card that displays dynamic content hosted on a Sharepoint list and filtered by the user's usageLocation property. Enabling you to display content based on the user's location and delegate the management of the content to the business users thanks to the Sharepoint list."
+    ],
+    "creationDateTime": "2024-03-20",
+    "updateDateTime": "2024-03-20",
+    "products": [
+      "SharePoint",
+      "Viva"
+    ],
+    "metadata": [
+      {
+        "key": "CLIENT-SIDE-DEV",
+        "value": "React"
+      },
+      {
+        "key": "SPFX-VERSION",
+        "value": "1.18.2"
+      }
+    ],
+    "thumbnails": [
+      {
+        "type": "image",
+        "order": 100,
+        "url": "https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/ImageCard-DynamicContentCard/assets/Image1.png",
+        "alt": "Preview"
+      }
+    ],
+    "authors": [
+      {
+        "gitHubAccount": "ericsche",
+        "company": "Microsoft",
+        "pictureUrl": "https://github.com/ericsche.png",
+        "name": "Eric Scherlinger"
+      }
+    ],
+    "references": [
+      {
+        "name": "Viva Connections Extensibility guidance",
+        "description": "Adaptive Card Extensions are client-side components that run in the context of a SharePoint page.",
+        "url": "https://aka.ms/viva/connections/extensibility"
+      }
+    ]
+  }
+]

samples/ImageCard-DynamicContentCard/config/config.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
+  "version": "2.0",
+  "bundles": {
+    "dcc-adaptive-card-extension": {
+      "components": [
+        {
+          "entrypoint": "./lib/adaptiveCardExtensions/dcc/DccAdaptiveCardExtension.js",
+          "manifest": "./src/adaptiveCardExtensions/dcc/DccAdaptiveCardExtension.manifest.json"
+        }
+      ]
+    }
+  },
+  "externals": {},
+  "localizedResources": {
+    "DccAdaptiveCardExtensionStrings": "lib/adaptiveCardExtensions/dcc/loc/{locale}.js"
+  }
+}

samples/ImageCard-DynamicContentCard/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": "dcc",
+  "accessKey": "<!-- ACCESS KEY -->"
+}

samples/ImageCard-DynamicContentCard/config/package-solution.json

@@ -0,0 +1,46 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
+  "solution": {
+    "name": "dcc-client-side-solution",
+    "id": "283c533d-5fc7-4713-a3fc-4a7bb77730b3",
+    "version": "1.0.0.1",
+    "includeClientSideAssets": true,
+    "skipFeatureDeployment": true,
+    "webApiPermissionRequests": [
+      {
+        "resource": "Microsoft Graph",
+        "scope": "User.Read"
+      }
+    ],
+    "isDomainIsolated": false,
+    "developer": {
+      "name": "",
+      "websiteUrl": "",
+      "privacyUrl": "",
+      "termsOfUseUrl": "",
+      "mpnId": "Undefined-1.18.2"
+    },
+    "metadata": {
+      "shortDescription": {
+        "default": "DCC description"
+      },
+      "longDescription": {
+        "default": "DCC description"
+      },
+      "screenshotPaths": [],
+      "videoUrl": "",
+      "categories": []
+    },
+    "features": [
+      {
+        "title": "dcc Feature",
+        "description": "The feature that activates elements of the dcc solution.",
+        "id": "b5b0ff72-6a9d-4131-9583-1be4107ae93a",
+        "version": "1.0.0.0"
+      }
+    ]
+  },
+  "paths": {
+    "zippedPackage": "solution/dcc.sppkg"
+  }
+}

samples/ImageCard-DynamicContentCard/config/sass.json

@@ -0,0 +1,3 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/core-build/sass.schema.json"
+}

samples/ImageCard-DynamicContentCard/config/serve.json

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

samples/ImageCard-DynamicContentCard/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/ImageCard-DynamicContentCard/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'));