Add new sample ImageCard-HTML-React-Search-FAQs

samples/ImageCard-HTML-React-Search-FAQs/README.md

@@ -0,0 +1,151 @@
+# FAQ Search Adaptive Card Extension
+
+## Summary
+
+The **FAQ Search Adaptive Card Extension** for SharePoint Framework (SPFx) is designed to display and manage frequently asked questions (FAQs) in a user-friendly interface. It offers users the ability to browse FAQs, filter questions by category, and submit new questions directly. Additionally, the extension features a "Most Useful" section, showcasing the questions that have been marked as the most helpful. This solution uses **PnPjs** to interact with SharePoint lists for data retrieval and submission, ensuring efficient integration with SharePoint.
+
+![FAQ Search Adaptive Card Extension](assets/preview-01.png)
+![FAQ Search Adaptive Card Extension](assets/preview-02.png)
+![FAQ Search Adaptive Card Extension](assets/preview-03.png)
+![FAQ Search Adaptive Card Extension](assets/preview-03.png)
+
+## Compatibility
+
+![SPFx 1.20.0](https://img.shields.io/badge/SPFx-1.20.0-green.svg) 
+![Node.js v16 | v18](https://img.shields.io/badge/Node.js-v16%20%7C%20v18-green.svg)
+![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-yellow.svg)
+![Teams](https://img.shields.io/badge/Teams-Compatible-lightgrey.svg "Tested with Microsoft Teams")
+![Workbench Local | Hosted](https://img.shields.io/badge/Workbench-Local%20%7C%20Hosted-green.svg)
+
+## Applies to
+
+* [SharePoint Framework 1.20](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
+
+## Prerequisites
+
+- Access to a SharePoint Online tenant
+- Appropriate permissions to create and manage SharePoint lists
+- FAQ list and submission lists created in SharePoint Online
+
+The FAQ Search Adaptive Card Extension interacts with two SharePoint lists: **FAQ List** and **Submission List**. Below are the required columns for each list:
+
+## SharePoint Lists & Columns
+### FAQ List Columns
+
+| Column Name       | Data Type  | Description                                      |
+|-------------------|------------|--------------------------------------------------|
+| Title             | Single line of text | The title of the FAQ question.               |
+| Answer            | Multiple lines of text | The answer to the FAQ question.            |
+| Category          | Choice     | Category under which the FAQ falls.              |
+| HelpfulCount      | Number     | Count of how many users found the FAQ helpful.   |
+
+### Submission List Columns
+
+| Column Name       | Data Type  | Description                                      |
+|-------------------|------------|--------------------------------------------------|
+| Title             | Single line of text | The submitted question.                      |
+| SubmissionDate    | Date and Time | The date and time the question was submitted.  |
+| Status            | Choice     | The current status of the submitted question (e.g., "New", "Reviewed"). |
+| Category          | Choice     | The category of the submitted question.          |
+
+
+## Solution
+
+Solution               | Author(s)
+-----------------------|----------
+FAQ Search Adaptive Card Extension | [Ahmad Jad Alhak](https://github.com/ahmad-jad-alhak)
+
+## Version history
+
+Version | Date        | Comments
+--------|-------------|-----------------------------------
+1.0     | October 2024| Initial release
+
+## Minimal Path to Awesome
+
+1. **Clone the repository:**
+
+   ```bash
+   git clone https://github.com/pnp/sp-dev-fx-aces.git
+
+2. Ensure that you are at the solution folder
+
+4. **Install dependencies:**
+
+   ```bash
+   npm install 
+
+3. **Install dependencies:**
+   ```bash
+   gulp serve 
+
+## Deployment
+
+Follow these steps to deploy the FAQ Search Adaptive Card Extension:
+
+1. **Pre-requisites:**
+   - Ensure you have the correct [SPFx development environment](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment) set up.
+   - Install Node.js (v18.19.x) or above.
+
+2. **Build the solution:**
+   - Clone the repository to your local machine.
+   - Navigate to the project folder in your terminal and run:
+     ```bash
+     npm install
+     gulp build
+     ```
+
+3. **Package the solution:**
+   - Once built, package the solution with:
+     ```bash
+     gulp bundle --ship
+     gulp package-solution --ship
+     ```
+
+4. **Upload the package:**
+   - Upload the `.sppkg` file located in the `sharepoint/solution` folder to your SharePoint App Catalog.
+
+5. **Deploy the solution:**
+   - Once uploaded, select the package in the App Catalog and click on "Deploy".
+
+6. Add the Adaptive Card Extension to the Viva Connections Dashboard
+
+Once the solution is deployed, you can add the Adaptive Card Extension to the Viva Connections Dashboard:
+
+1. Navigate to the Viva Connections Dashboard of the site.
+2. Edit the dashboard.
+3. Add the newly available **FAQ Search Adaptive Card** from the list of available web parts.
+4. Configure any required settings for the card in the property pane.
+
+For more details, follow this guide on [Adding Cards to the Viva Connections Dashboard](https://learn.microsoft.com/en-us/sharepoint/dev/spfx/viva/add-card-to-dashboard).
+
+7. **Configure the Web Part:**
+   - Edit the page where you want to add the Adaptive Card Extension.
+   - Select the FAQ Search Adaptive Card Extension from the list of available extensions.
+   - Configure the web part by specifying the FAQ List Name, Submission List Name, and other properties.
+
+
+## Features
+
+The FAQ Search Adaptive Card Extension demonstrates the following features:
+
+1. **FAQ Browsing:** Allows users to search and filter FAQs by category.
+2. **Most Useful:** Displays the FAQs rated as most helpful.
+3. **Question Submission:** Enables users to submit questions for review.
+4. **PnPjs Integration:** Uses PnPjs to fetch, update, and manage FAQ and submission list items from SharePoint.
+
+## Resources
+
+- [SharePoint Framework Documentation](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-framework-overview)
+- [PnPjs Documentation](https://pnp.github.io/pnpjs/)
+
+- [Viva Connections Adaptive Card Extensions](https://learn.microsoft.com/en-us/sharepoint/dev/spfx/viva/build-first-adaptive-card-extension)
+- [Microsoft Viva Connections Documentation](https://learn.microsoft.com/en-us/viva/connections/)
+- [Create an App Catalog site](https://learn.microsoft.com/en-us/sharepoint/use-app-catalog)
+- [Deploying Viva Connections Adaptive Cards](https://learn.microsoft.com/en-us/sharepoint/dev/spfx/viva/build-first-adaptive-card-extension)
+- [Viva Connections Dashboard setup](https://learn.microsoft.com/en-us/viva/connections/overview-viva-connections)
+
+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.

samples/ImageCard-HTML-React-Search-FAQs/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": {
+    "faq-search-adaptive-card-extension": {
+      "components": [
+        {
+          "entrypoint": "./lib/adaptiveCardExtensions/faqSearch/FaqSearchAdaptiveCardExtension.js",
+          "manifest": "./src/adaptiveCardExtensions/faqSearch/FaqSearchAdaptiveCardExtension.manifest.json"
+        }
+      ]
+    }
+  },
+  "externals": {},
+  "localizedResources": {
+    "FaqSearchAdaptiveCardExtensionStrings": "lib/adaptiveCardExtensions/faqSearch/loc/{locale}.js",
+    "PropertyControlStrings": "node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js"
+  }
+}

samples/ImageCard-HTML-React-Search-FAQs/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": "faqs-search",
+  "accessKey": "<!-- ACCESS KEY -->"
+}

samples/ImageCard-HTML-React-Search-FAQs/config/package-solution.json

@@ -0,0 +1,40 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
+  "solution": {
+    "name": "faqs-search-client-side-solution",
+    "id": "ed4f5b75-10af-4491-9faf-5dc26f9410dd",
+    "version": "1.0.0.0",
+    "includeClientSideAssets": true,
+    "skipFeatureDeployment": true,
+    "isDomainIsolated": false,
+    "developer": {
+      "name": "",
+      "websiteUrl": "",
+      "privacyUrl": "",
+      "termsOfUseUrl": "",
+      "mpnId": "Undefined-1.20.0"
+    },
+    "metadata": {
+      "shortDescription": {
+        "default": "faqs-search description"
+      },
+      "longDescription": {
+        "default": "faqs-search description"
+      },
+      "screenshotPaths": [],
+      "videoUrl": "",
+      "categories": []
+    },
+    "features": [
+      {
+        "title": "faqs-search Feature",
+        "description": "The feature that activates elements of the faqs-search solution.",
+        "id": "cfaea834-59df-4681-ba3c-461ec8b18e3a",
+        "version": "1.0.0.0"
+      }
+    ]
+  },
+  "paths": {
+    "zippedPackage": "solution/faqs-search.sppkg"
+  }
+}

samples/ImageCard-HTML-React-Search-FAQs/config/sass.json

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

samples/ImageCard-HTML-React-Search-FAQs/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-HTML-React-Search-FAQs/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-React-Search-FAQs/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'));