SPFx 1.20 beta sample solutions

samples/BasicCard-HTML-QuickView/.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/BasicCard-HTML-QuickView/.npmignore

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

samples/BasicCard-HTML-QuickView/.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/BasicCard-HTML-QuickView/.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/BasicCard-HTML-QuickView/.yo-rc.json

@@ -0,0 +1,22 @@
+{
+  "@microsoft/generator-sharepoint": {
+    "plusBeta": false,
+    "isCreatingSolution": true,
+    "nodeVersion": "18.20.4",
+    "sdksVersions": {
+      "@microsoft/microsoft-graph-client": "3.0.2",
+      "@microsoft/teams-js": "2.24.0"
+    },
+    "version": "1.20.0-dev.104",
+    "libraryName": "html-quick-view",
+    "libraryId": "d2a2e20d-5fa9-466b-9e6b-fb95a9d0d07f",
+    "environment": "spo",
+    "packageManager": "npm",
+    "solutionName": "HTMLQuickView",
+    "solutionShortDescription": "HTMLQuickView description",
+    "skipFeatureDeployment": true,
+    "isDomainIsolated": false,
+    "componentType": "adaptiveCardExtension",
+    "aceTemplateType": "Generic"
+  }
+}

samples/BasicCard-HTML-QuickView/README.md

@@ -0,0 +1,68 @@
+# HTML Quick View demo
+
+## Summary
+
+This is baseline demo for the using HTML Quick Views in Viva Connections Adaptive Card Extensions. This is an optional rendering capability introduced in the SharePoint Framework version 1.20. HTML powered Quick Views can be more advance vs the adaptive card powered quick views.
+
+By deafault ACE template solution does not include support for the SCSS definitions. You need to include `@microsoft/sp-office-ui-fabric-core` package to the solution to be able to to use SCSS powered styles as demonstrated in this solution.
+
+![picture of the ace in action](assets/preview.png)
+
+![picture of the ace in action](assets/mobile-preview.png)
+
+## Used SharePoint Framework Version
+
+![version](https://img.shields.io/badge/version-1.20.beta.0-yellow.svg)
+
+Notice that this version is NOT available publicly and solution will be updated to use public 1.20 preview version as that's available. Code is currently provided as a reference point to adopt, but you cannot use that externally.
+
+## 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
+
+- None
+
+## Solution
+
+| Solution    | Author(s)                                               |
+| ----------- | ------------------------------------------------------- |
+| BasicCard-HTML-QuickView | Vesa Juvonen (Microsoft) |
+
+## Version history
+
+| Version | Date             | Comments        |
+| ------- | ---------------- | --------------- |
+| 1.0     | August 20, 2024 | Initial release with preview packages |
+
+## 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 extension illustrates the following concepts:
+
+- Using HTML Quick Views in the Adaptive Card Extensions
+- Using SCSS definitions in the HTML Quick Views (you'll need to include `@microsoft/sp-office-ui-fabric-core` package)
+
+## References
+
+- [Introduction to HTML Quick Views with SPFx in Viva Connections cards](#)
+- [Getting started with SharePoint Framework](https://aka.ms/spfx)
+- [Overview of Viva Connections Extensibility](https://learn.microsoft.com/en-us/sharepoint/dev/spfx/viva/overview-viva-connections)
+- [Microsoft 365 & Power Platform Community](https://aka.ms/community/home) - Guidance, tooling, samples and open-source controls for your Microsoft 365 development

samples/BasicCard-HTML-QuickView/assets/sample.json

@@ -0,0 +1,63 @@
+[
+  {
+    "name": "pnp-sp-fx-aces-basiccard-html-quickview",
+    "source": "pnp",
+    "title": "HTML QuickView basic demo",
+    "shortDescription": "This is a baseline solution to demonstrate the HTML powered Quick Views for Adaptive Card Extensions which can be used in Microsoft Viva Connections and in SharePoint.",
+    "url": "https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/BasicCard-HTML-QuickView",
+    "longDescription": [
+      "This is a baseline solution to demonstrate the HTML powered Quick Views for Adaptive Card Extensions which can be used in Microsoft Viva Connections and in SharePoint.",
+      "To be able to use SCSS definitions with your solutions, @microsoft/sp-office-ui-fabric-core package has been included in the solution."
+    ],
+    "creationDateTime": "2024-08-20",
+    "updateDateTime": "2024-08-20",
+    "products": [
+      "SharePoint",
+      "Viva"
+    ],
+    "metadata": [
+      {
+        "key": "SPFX-VERSION",
+        "value": "1.20"
+      }
+    ],
+    "thumbnails": [
+      {
+        "type": "image",
+        "order": 100,
+        "url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/main/samples/BasicCard-HTML-QuickView/assets/preview.png",
+        "alt": "Desktop Preview"
+      },
+      {
+        "type": "image",
+        "order": 200,
+        "url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/main/samples/BasicCard-HTML-QuickView/assets/mobile-preview.png",
+        "alt": "Mobile Preview"
+      }
+    ],
+    "authors": [
+      {
+        "gitHubAccount": "VesaJuvonen",
+        "pictureUrl": "https://github.com/vesajuvonen.png",
+        "name": "Vesa Juvonen"
+      }
+    ],
+    "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"
+      },
+      {
+        "name": "Adaptive Card Documentation",
+        "description": "Detailed documentation on Adaptive Cards including the Adaptive Card designer.",
+        "url": "https://adaptivecards.io/"
+      },
+      {
+        "name": "Adaptive Card Extension Design Guidance",
+        "description": "Design guidance for laying out Adaptive Card Extensions.",
+        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro"
+      }
+    ]
+  }
+]

samples/BasicCard-HTML-QuickView/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": {
+    "html-quick-view-adaptive-card-extension": {
+      "components": [
+        {
+          "entrypoint": "./lib/adaptiveCardExtensions/htmlQuickView/HtmlQuickViewAdaptiveCardExtension.js",
+          "manifest": "./src/adaptiveCardExtensions/htmlQuickView/HtmlQuickViewAdaptiveCardExtension.manifest.json"
+        }
+      ]
+    }
+  },
+  "externals": {},
+  "localizedResources": {
+    "HtmlQuickViewAdaptiveCardExtensionStrings": "lib/adaptiveCardExtensions/htmlQuickView/loc/{locale}.js"
+  }
+}

samples/BasicCard-HTML-QuickView/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": "html-quick-view",
+  "accessKey": "<!-- ACCESS KEY -->"
+}

samples/BasicCard-HTML-QuickView/config/package-solution.json

@@ -0,0 +1,40 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
+  "solution": {
+    "name": "html-quick-view-client-side-solution",
+    "id": "d2a2e20d-5fa9-466b-9e6b-fb95a9d0d07f",
+    "version": "1.0.0.0",
+    "includeClientSideAssets": true,
+    "skipFeatureDeployment": true,
+    "isDomainIsolated": false,
+    "developer": {
+      "name": "",
+      "websiteUrl": "",
+      "privacyUrl": "",
+      "termsOfUseUrl": "",
+      "mpnId": "Undefined-1.20.0-dev.104"
+    },
+    "metadata": {
+      "shortDescription": {
+        "default": "HTMLQuickView description"
+      },
+      "longDescription": {
+        "default": "HTMLQuickView description"
+      },
+      "screenshotPaths": [],
+      "videoUrl": "",
+      "categories": []
+    },
+    "features": [
+      {
+        "title": "html-quick-view Feature",
+        "description": "The feature that activates elements of the html-quick-view solution.",
+        "id": "fdef704e-6ef6-4cef-bcae-3954cdb5497d",
+        "version": "1.0.0.0"
+      }
+    ]
+  },
+  "paths": {
+    "zippedPackage": "solution/html-quick-view.sppkg"
+  }
+}

samples/BasicCard-HTML-QuickView/config/sass.json

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

samples/BasicCard-HTML-QuickView/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/BasicCard-HTML-QuickView/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/BasicCard-HTML-QuickView/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'));