Merge pull request #1386 from ejazhussain/main

.metadata/samples.json

@@ -6196,6 +6196,80 @@
       }
     ]
   },
+  {
+    "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"
+      }
+    ]
+  },
   {
     "name": "pnp-sp-dev-spfx-extensions-react-field-slider",
     "source": "pnp",

samples/react-field-reporting/.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/react-field-reporting/.npmignore

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

samples/react-field-reporting/.yo-rc.json

@@ -0,0 +1,21 @@
+{
+  "@microsoft/generator-sharepoint": {
+    "plusBeta": false,
+    "isCreatingSolution": false,
+    "nodeVersion": "16.18.1",
+    "sdksVersions": {
+      "@microsoft/microsoft-graph-client": "3.0.2",
+      "@microsoft/teams-js": "2.12.0"
+    },
+    "version": "1.18.2",
+    "libraryName": "o-365-c-fieldcust-reporting",
+    "libraryId": "d32b299c-acb2-4089-93ee-b8effce103af",
+    "environment": "spo",
+    "packageManager": "npm",
+    "solutionName": "o365c-fieldcust-reporting",
+    "solutionShortDescription": "o365c-fieldcust-reporting description",
+    "skipFeatureDeployment": true,
+    "isDomainIsolated": false,
+    "componentType": "webpart"
+  }
+}

samples/react-field-reporting/Home.json

@@ -0,0 +1,15 @@
+{
+    "id": "Y29uc29ydGl1bXBvYy5zaGFyZXBvaW50LmNvbSw1ZmM4MTk1ZS01ZmQxLTQyODYtYWExNS00NWMxZWYwODdmN2MsYjlhYTdhNzItZjAwNy00YjdjLTliMjktMzg1ODlmMGQ3ZDM1MDExMDMxMzUtZjcwMi00YTkxLTk0OGUtODAyODUxNmVhOTUx",
+    "metadata_spo_item_name": "Managing divergence",
+    "metadata_spo_item_description": "There are many external challenges facing the asset management industry, including demands for sustainable finance, volatility in capital markets, technological innovation, and cyber threats. Firms must also navigate further rafts of new rules, incr…",
+    "metadata_spo_item_type": "https://consortiumpoc.sharepoint.com/sites/assetmanagement/SitePages/TopicHome.aspx",
+    "metadata_spo_item_content_type": "sharepoint/page",
+    "metadata_spo_item_last_modified": "2024-06-28T10:11:46Z",
+    "metadata_spo_item_size": "0",
+    "metadata_spo_item_weburi": "https://consortiumpoc.sharepoint.com/sites/assetmanagement/SitePages/TopicHome.aspx",
+    "metadata_spo_item_id": "01103135-f702-4a91-948e-8028516ea951",
+    "metadata_spo_library_id": "SitePages",
+    "metadata_spo_item_path": "https://consortiumpoc.sharepoint.com/sites/assetmanagement/SitePages/TopicHome.aspx",
+    "metadata_spo_site_id": "consortiumpoc.sharepoint.com,5fc8195e-5fd1-4286-aa15-45c1ef087f7c,b9aa7a72-f007-4b7c-9b29-38589f0d7d35",
+    "Text": "< p style = \"margin-left:0px;\">There are many external challenges facing the asset management industry, including demands for sustainable finance, volatility in capital markets, technological innovation, and cyber threats. Firms must also navigate further rafts of new rules, increasing regulatory divergence and greater supervisory scrutiny. Firms need to adopt resilient and dynamic business models if they are to be successful.<br>&nbsp;</p><p style=\"margin-left:0px;\">Regulators around the world are focusing on common themes in a fast-changing world. However, a lack of global standards and national nuances mean that they are implementing detailed rules and guidance in different ways. Increasing regulatory divergence is causing complexity and challenges for cross-border asset managers in terms of how they manage and market their products.<br><br><strong>Key actions for CEOs:</strong><br>&nbsp;</p><ul><li><p style=\"margin-left:0px;\"><strong>Deliver sustainable finance:</strong> Review the firm's overall strategy, embed sustainability factors into the investment process, ensure names and disclosures correctly reflect product offerings, and prepare to meet expanding disclosure requirements.</p></li><li><p style=\"margin-left:0px;\"><strong>Mitigate systemic risk:</strong> Review investment risk management arrangements, particularly relating to the liquidity management of open-ended funds, and stress testing. Control the use of leverage and adopt asset valuation best practices, especially for private, real and crypto-assets.</p></li><li><p style=\"margin-left:0px;\"><strong>Double-down on resilience:</strong> Review the risk management framework and controls in the light of challenges and opportunities. Identify and manage operational and information security-related risks, including third-party oversight arrangements. Maintain adequate financial resources.</p></li><li><p style=\"margin-left:0px;\"><strong>Embrace innovation:</strong> Explore potential uses of tokenization and artificial intelligence to drive efficiencies and new business, within the guardrails of the evolving regulatory framework.</p></li><li><p style=\"margin-left:0px;\"><strong>Protect investors:</strong> Align the firm's strategy, culture, and purpose with clients' best interests.</p></li><li><p style=\"margin-left:0px;\"><strong>Project good governance:</strong> Evaluate the success of the firm's culture, leadership, and governance model, and make changes where needed. Encourage a “speak-up” culture, ensure the composition of boards provides sufficient knowledge, expertise, experience and challenge, adopt a flexible business model, and deter financial crime.</p></li><li><p style=\"margin-left:0px;\"><strong>Seize opportunities:</strong> Factor opening markets and new and evolving fund vehicles into the business and product strategy.</p></li></ul><h2 style=\"margin-left:0px;text-align:center;\">&nbsp;</h2><h2>Mitigating systemic risk</h2><p aria-hidden=\"true\">&nbsp;</p><p style=\"margin-left:0px;\">Asset managers continue to play an increasingly important role in financial markets and funding the real economy. According to the FSB<sup>1</sup>, recent growth in non-banks' share of global financial assets has been driven by investment funds. Therefore, policymakers continue to focus on the asset management industry and potential financial stability risks. The FSB and IOSCO<sup>2</sup>&nbsp;share a priority to enhance the resilience of non-banks, along with concerns about general market volatility and cyber threats (see <a href=\"https://kpmg.com/xx/en/home/insights/2023/08/resilient-business-models.html\">Chapter 4</a>).&nbsp;</p><p style=\"margin-left:0px;\">Liquidity management in open-ended funds (OEFs) is under the spotlight. Money market fund (MMF) reforms are more advanced but slowing, with regulators now taking stock of progress. A few regulators have remaining concerns about exchange-traded funds (ETFs), and a recent area of focus in Europe has been liability-driven investment strategies. Use of leverage, investments in private and real assets, and asset valuation also feature on regulatory agendas.<br>&nbsp;</p><h2>Resilient business models</h2><p aria-hidden=\"true\">&nbsp;</p><p style=\"margin-left:0px;\">The way in which asset managers manage risks is a constant theme for regulators, not least within the context of financial stability. Regulators are acutely aware of the threat of any type of disruption to firms and their customers, particularly in times of stress.</p><p style=\"margin-left:0px;\" aria-hidden=\"true\">&nbsp;</p><p style=\"margin-left:0px;\">Greater reliance on third-party suppliers raises concerns around remaining substance in asset management firms and their oversight of the suppliers (see <a href=\"https://kpmg.com/xx/en/home/insights/2023/08/defining-good-governance.html\">Chapter 7</a>), but also about the resilience of those third parties. Cyber threats are highlighted as a key risk and technology-led business transformation and recognition of the global interconnectedness of the financial system have led to increased focus on the resilience of end-to-end business operations. And the adequacy of asset managers' financial resources and broader risk and control frameworks is also under review.</p><p style=\"margin-left:0px;\" aria-hidden=\"true\">&nbsp;</p><h2><br>Digital innovation: benefits and risks</h2><p style=\"margin-left:0px;\" aria-hidden=\"true\">&nbsp;</p><p style=\"margin-left:0px;\" aria-hidden=\"true\">&nbsp;</p><p style=\"margin-left:0px;\">Regulators are seeking to understand the impacts of technology for the industry. They want to facilitate innovation, but are also focused on identifying and mitigating risks.</p><p style=\"margin-left:0px;\">Both Fin Tech and Big Tech receive multiple references in recent regulatory outputs, along with artificial intelligence (AI) and machine learning (ML). Distributed ledger technology (DLT) underpins crypto-assets but is also being put to good use in market infrastructure initiatives, including fund unit tokenization and settlement. Regulators are cognizant of the greater use by investors of social media and online platforms, but recognize the risks as well as the potential benefits.</p><p style=\"margin-left:0px;\" aria-hidden=\"true\">&nbsp;</p><p style=\"margin-left:0px;\" aria-hidden=\"true\">&nbsp;</p>"
+}

samples/react-field-reporting/README.md

@@ -0,0 +1,90 @@
+# 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
+
+![React Document Reporting Field Customizer](./assets/app-results.png)
+
+![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)
+
+## 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|Author(s)
+--------|---------
+React Document Reporting Field Customizer | Ejaz Hussain ([Office 355 Clinic](https://www.office365clinic.com/), [GitHub](https://github.com/ejazhussain))
+
+## Version history
+
+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.`
+
+## 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))
+
+---
+
+## Minimal Path to Awesome
+
+- Clone this repository
+- Ensure that you are at the solution folder
+- 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`
+- Deploy the package to app catalog
+- Add the app to the any site
+
+### 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.
+
+## 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