Merge pull request #190 from anoopt/main

Merge PR #189

samples/ImageCard-HTML-OfficeLocator/.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-HTML-OfficeLocator/.npmignore

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

samples/ImageCard-HTML-OfficeLocator/.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-HTML-OfficeLocator/.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-HTML-OfficeLocator/.yo-rc.json

@@ -0,0 +1,22 @@
+{
+  "@microsoft/generator-sharepoint": {
+    "plusBeta": false,
+    "isCreatingSolution": true,
+    "nodeVersion": "18.17.1",
+    "sdksVersions": {
+      "@microsoft/microsoft-graph-client": "3.0.2",
+      "@microsoft/teams-js": "2.24.0"
+    },
+    "version": "1.20.0",
+    "libraryName": "aces-officelocator",
+    "libraryId": "1f0f7228-0373-4c08-a3ee-75e571d96c2b",
+    "environment": "spo",
+    "packageManager": "npm",
+    "solutionName": "aces-officelocator",
+    "solutionShortDescription": "aces-officelocator description",
+    "skipFeatureDeployment": true,
+    "isDomainIsolated": false,
+    "componentType": "adaptiveCardExtension",
+    "aceTemplateType": "Generic"
+  }
+}

samples/ImageCard-HTML-OfficeLocator/README.md

@@ -0,0 +1,93 @@
+# ImageCard HTML Office Locator
+
+## Summary
+
+This Adaptive Card extension (ACE) sample shows how to use HTML and React in an ACEs which was introduced in SPFx 1.20.0.
+This ACE allows you to display office locations in a map using Azure Maps. The office locations can be configured in the ACE property pane.
+
+## Highlights
+- Use of HTML and React in ACEs
+- Display office locations in a map using Azure Maps
+- Ability to configure all locations in the ACE property pane
+
+
+## Demo
+
+
+<video width="600" controls>
+  <source src="./assets/demo.mp4" type="video/mp4">
+  Your browser does not support the video tag.
+</video>
+
+![ImageCard-HTML-OfficeLocator](./assets/demo-1.png)
+
+![ImageCard-HTML-OfficeLocator](./assets/demo-2.png)
+
+## Used SharePoint Framework Version
+
+![version](https://img.shields.io/badge/version-1.20.0-yellow.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)                                               |
+| ----------- | ------------------------------------------------------- |
+| ImageCard-HTML-OfficeLocator | [Ejaz Hussain](https://linktr.ee/ehussain)
+
+## Version history
+
+| Version | Date             | Comments        |
+| ------- | ---------------- | --------------- |
+| 1.0     | October 04, 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.**
+
+---
+
+## Prerequisites
+
+To use Azure Maps, you need to obtain an Azure Maps subscription key. Follow these high-level steps to get your subscription key:
+
+1. **Sign in to the Azure Portal**
+   - Go to [Azure Portal](https://portal.azure.com) and sign in with your Azure account.
+
+2. **Create an Azure Maps Account**
+   - In the Azure Portal, click on "Create a resource" and search for "Azure Maps".
+   - Click on "Azure Maps" and then click "Create".
+   - Fill in the required details such as Subscription, Resource Group, and Account Name.
+   - Click "Review + create" and then "Create".
+
+3. **Retrieve the Subscription Key**
+   - Once the Azure Maps account is created, navigate to the resource.
+   - In the Azure Maps account overview, you will find the "Keys" section.
+   - Click on "Keys" to view your primary and secondary subscription keys.
+   - Copy the primary subscription key for use in your application.
+
+
+
+## Minimal Path to Awesome
+
+- Clone this repository
+- Ensure that you are at the solution folder
+- in the command-line run:
+  - **npm install**
+  - **gulp serve**
+- Add the "Office Locator" ACE to the dashboard page
+- Edit the properties of the ACE as needed
+
+## 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-HTML-OfficeLocator/assets/sample.json

@@ -0,0 +1,65 @@
+[{
+    "name": "pnp-sp-fx-aces-imagecard-html-officelocator",
+    "source": "pnp",
+    "title": "Office Locator - Adaptive Card Extension",
+    "shortDescription": "This Adaptive Card Extension (ACE) sample shows how to use HTML and React in an ACEs which was introduced in SPFx 1.20.0. This ACE allows you to display office locations in a map using Azure Maps. The office locations can be configured in the ACE property pane.",
+    "url": "https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/ImageCard-HTML-OfficeLocator",
+    "longDescription": [
+      "This Adaptive Card extension (ACE) sample shows how to use HTML and React in an ACEs which was introduced in SPFx 1.20.0. This ACE allows you to display office locations in a map using Azure Maps. The office locations can be configured in the ACE property pane."
+    ],
+    "creationDateTime": "2024-10-10",
+    "updateDateTime": "2024-10-10",
+    "products": [
+      "SharePoint",
+      "Viva"
+    ],
+    "metadata": [{
+        "key": "CLIENT-SIDE-DEV",
+        "value": "React"
+      },
+      {
+        "key": "SPFX-VERSION",
+        "value": "1.20.0"
+      }
+    ],
+    "thumbnails": [
+      {
+        "type": "image",
+        "order": 100,
+        "url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/main/samples/ImageCard-HTML-OfficeLocator/assets/demo.mp4",
+        "alt": "Preview"
+      },
+      {
+        "type": "image",
+        "order": 200,
+        "url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/main/samples/ImageCard-HTML-OfficeLocator/assets/demo-1.png",
+        "alt": "Preview"
+      },
+      {
+        "type": "image",
+        "order": 300,
+        "url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-aces/main/samples/ImageCard-HTML-OfficeLocator/assets/demo-2.png",
+        "alt": "Preview"
+      }
+    ],
+    "authors": [{
+      "gitHubAccount": "ejazhussain",
+      "pictureUrl": "https://github.com/ejazhussain.png",
+      "name": "Ejaz Hussain"
+    }],
+    "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/ImageCard-HTML-OfficeLocator/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": {
+    "officelocator-adaptive-card-extension": {
+      "components": [
+        {
+          "entrypoint": "./lib/adaptiveCardExtensions/officelocator/OfficelocatorAdaptiveCardExtension.js",
+          "manifest": "./src/adaptiveCardExtensions/officelocator/OfficelocatorAdaptiveCardExtension.manifest.json"
+        }
+      ]
+    }
+  },
+  "externals": {},
+  "localizedResources": {
+    "OfficelocatorAdaptiveCardExtensionStrings": "lib/adaptiveCardExtensions/officelocator/loc/{locale}.js",
+    "PropertyControlStrings": "node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js"
+  }
+}

samples/ImageCard-HTML-OfficeLocator/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": "aces-officelocator",
+  "accessKey": "<!-- ACCESS KEY -->"
+}

samples/ImageCard-HTML-OfficeLocator/config/package-solution.json

@@ -0,0 +1,38 @@
+{
+    "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
+    "solution": {
+        "name": "O365C - ACE Office Locator",
+        "id": "1f0f7228-0373-4c08-a3ee-75e571d96c2b",
+        "version": "1.0.0.0",
+        "includeClientSideAssets": true,
+        "skipFeatureDeployment": true,
+        "isDomainIsolated": false,
+        "developer": {
+            "name": "",
+            "websiteUrl": "",
+            "privacyUrl": "",
+            "termsOfUseUrl": "",
+            "mpnId": "Undefined-1.20.0"
+        },
+        "metadata": {
+            "shortDescription": {
+                "default": "officelocator description"
+            },
+            "longDescription": {
+                "default": "O365C - ACE Office Locator description"
+            },
+            "screenshotPaths": [],
+            "videoUrl": "",
+            "categories": []
+        },
+        "features": [{
+            "title": "O365C - ACE Office Locator Feature",
+            "description": "The feature that activates elements of the O365C - ACE Office Locator solution.",
+            "id": "7a27f2aa-5550-469a-98b6-f9df4e6fedea",
+            "version": "1.0.0.0"
+        }]
+    },
+    "paths": {
+        "zippedPackage": "solution/o365c-ace-officelocator.sppkg"
+    }
+}

samples/ImageCard-HTML-OfficeLocator/config/sass.json

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

samples/ImageCard-HTML-OfficeLocator/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://ejazhussain.sharepoint.com/sites/dev/_layouts/workbench.aspx"
+}

samples/ImageCard-HTML-OfficeLocator/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-HTML-OfficeLocator/gulpfile.js

@@ -0,0 +1,17 @@
+'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'));