Updated readme and sample.json

samples/react-field-reporting/README.md

@@ -1,8 +1,7 @@
-#React Document Reporting Field Customizer
+# React Document Reporting Field Customizer
 
 ## Summary
 
-
 This React-based SharePoint Framework (SPFx) application serves as a comprehensive solution for monitoring user activity within SharePoint documents. It features a field customizer that logs details about who has opened a document directly into Application Insights. Additionally, the application includes a SPFx web part designed to display this real-time reporting data. The data is presented in both a tabular format and visually, using charts, to provide a clear and insightful overview of user interactions with documents. This dual functionality not only enhances document tracking but also facilitates the analysis of user engagement through intuitive and accessible reporting tools.
 
 ## DEMO
@@ -11,7 +10,6 @@ This React-based SharePoint Framework (SPFx) application serves as a comprehensi
 
 ![React Document Reporting Field Customizer](./assets/app-charts.png)
 
-
 ## Used SharePoint Framework Version
 
 ![version](https://img.shields.io/badge/version-1.18.2-green.svg)
@@ -34,53 +32,54 @@ Version|Date|Comments
 1.0|July 9, 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.**
+
+`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
 
-* Office 365 Developer tenant with a modern site collection 
-* Get Azure Application Insight Instrumentation key -  [more info](https://learn.microsoft.com/en-us/azure/bot-service/bot-service-resources-app-insights-keys?view=azure-bot-service-4.0#instrumentation-key)
-* Get Azure AppInsight API Key and Secret - [more info]([more info](https://learn.microsoft.com/en-us/azure/bot-service/bot-service-resources-app-insights-keys?view=azure-bot-service-4.0#instrumentation-key))
+- Office 365 Developer tenant with a modern site collection
+- Get Azure Application Insight Instrumentation key -  [more info](https://learn.microsoft.com/en-us/azure/bot-service/bot-service-resources-app-insights-keys?view=azure-bot-service-4.0#instrumentation-key)
+- Get Azure AppInsight API Key and Secret - [more info]([more info](https://learn.microsoft.com/en-us/azure/bot-service/bot-service-resources-app-insights-keys?view=azure-bot-service-4.0#instrumentation-key))
 
 ---
 
 ## Minimal Path to Awesome
 
 - Clone this repository
 - Ensure that you are at the solution folder
-- Navigate to the following file and specifiy instrumentation Key
+- Navigate to the following file and specify instrumentation Key
 
 ```
 react-field-reporting\src\extensions\documentReporting\DocumentReportingFieldCustomizer.ts
 ```
 
-- in the command-line run:   
-  - **npm install**
-  - **gulp bundle --ship**
-  - **gulp package-solution --ship**
+- in the command-line run:
+  - `npm install`
+  - `gulp bundle --ship`
+  - `gulp package-solution --ship`
 - Deploy the package to app catalog
 - Add the app to the any site
 
-### Field Customizer configrations
-- Add the **ExtendedDocName** site column to the Document library
+### Field Customizer configurations
+
+- Add the `ExtendedDocName` site column to the Document library
 - Hide the existing Name column from the Document library
 - Click on any document name under the Extended Doc Name column, it should track the event in the Application Insights
+
 ### Documents Insights web part configurations
+
 - Configure the following properties in the web part
 
 ![Configuring Documents Insight configurations](./assets/app-webpart-configs.png)
 
 ## Features
 
-- **User Activity Monitoring**: Tracks and logs user interactions with documents, specifically noting when a document is opened.
-- **Integration with Application Insights**: Utilizes Application Insights for logging and monitoring document access events.
-- **Field Customizer for Enhanced Document Library**: Implements a custom field named **ExtendedDocName** to replace the default document name column, facilitating the tracking of document access.
-- **Real-time Reporting**: Offers a SharePoint Framework (SPFx) web part that displays real-time data on document interactions from Application Insights in both tabular and chart formats.
-- **Easy Configuration**: Provides straightforward setup instructions for deploying the package, adding the app to sites, and configuring both the field customizer and the web part.
-- **Visual Insights into Document Usage**: Through the Documents Insights web part, users can visually analyze document usage patterns within SharePoint.
-
-
-
+- `User Activity Monitoring`: Tracks and logs user interactions with documents, specifically noting when a document is opened.
+- `Integration with Application Insights`: Utilizes Application Insights for logging and monitoring document access events.
+- `Field Customizer for Enhanced Document Library`: Implements a custom field named `ExtendedDocName` to replace the default document name column, facilitating the tracking of document access.
+- `Real-time Reporting`: Offers a SharePoint Framework (SPFx) web part that displays real-time data on document interactions from Application Insights in both tabular and chart formats.
+- `Easy Configuration`: Provides straightforward setup instructions for deploying the package, adding the app to sites, and configuring both the field customizer and the web part.
+- `Visual Insights into Document Usage`: Through the Documents Insights web part, users can visually analyze document usage patterns within SharePoint.
 
 ## References
 

samples/react-field-reporting/assets/sample.json

@@ -0,0 +1,76 @@
+[
+    {
+        "name": "pnp-sp-dev-spfx-extensions-react-field-reporting",
+        "source": "pnp",
+        "title": "TODO: TITLE-GOES-HERE",
+        "shortDescription": "DESCRIPTION-GOES-HERE",
+        "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-field-reporting",
+        "longDescription": [
+            "TODO: LONG-DESCRIPTION-GOES-HERE"
+        ],
+        "creationDateTime": "2023-12-25",
+        "updateDateTime": "2023-12-31",
+        "products": [
+            "SharePoint"
+        ],
+        "metadata": [
+            {
+                "key": "CLIENT-SIDE-DEV",
+                "value": "React"
+            },
+            {
+                "key": "SPFX-VERSION",
+                "value": "1.16.1"
+            }
+        ],
+        "tags": [],
+        "categories": [
+            "SPFX-FIELD-EXTENSION"
+        ],
+        "thumbnails": [
+            {
+                "type": "image",
+                "order": 100,
+                "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-field-reporting/assets/app-charts.png",
+                "alt": "Preview"
+            },
+            {
+                "type": "image",
+                "order": 101,
+                "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-field-reporting/assets/app-column.png",
+                "alt": "Preview"
+            },
+            {
+                "type": "image",
+                "order": 102,
+                "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-field-reporting/assets/app-results.png",
+                "alt": "Preview"
+            },
+            {
+                "type": "image",
+                "order": 103,
+                "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-field-reporting/assets/app-webpart-configs.png",
+                "alt": "Preview"
+            }
+        ],
+        "authors": [
+            {
+                "gitHubAccount": "ejazhussain",
+                "pictureUrl": "https://github.com/ejazhussain.png",
+                "name": "Ejaz Hussain"
+            }
+        ],
+        "references": [
+            {
+                "name": "Overview of SharePoint Framework Extensions",
+                "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
+                "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
+            },
+            {
+                "name": "Use page placeholders from Application Customizer",
+                "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
+                "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
+            }
+        ]
+    }
+]

samples/react-field-reporting/src/extensions/documentReporting/components/DocumentReporting.tsx

@@ -71,6 +71,7 @@ const DocumentReporting: React.FC<IDocumentReportingProps> = (props) => {
     </div>
   );
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   function generateDocumentId(metadata: any): string {
     const { userName, docId } = metadata;
 

samples/react-field-reporting/src/services/SPService.ts

@@ -11,7 +11,9 @@ class SPService {
     }
     public static addListItemAsync = async (
         listName: string,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         item: any
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     ): Promise<any> => {
         try {
             const result = await this._sp.web.lists

samples/react-field-reporting/src/webparts/reporting/types/ComponentTypes.ts

@@ -4,13 +4,15 @@ export type Column = {
 };
 
 export type Row = {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     [key: string]: any;
 };
 
 export type TableData = {
     tables: {
         name: string;
         columns: Column[];
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         rows: any[][];
     }[];
 };