Merge pull request #1524 from NicolasKheirallah/react-command-convert-to-pdf

Author: hugoabernier

samples/react-command-convert-to-pdf/README.md

@@ -1,121 +1,87 @@
-# SharePoint PDF Converter
+# Save and convert as PDF by PnP
 
-![preview](./screenshot.gif "Preview")
+## Summary
+
+A global list customizer which adds functionality to all document libraries in SharePoint Online to convert one or more documents in-place to PDF, or download one or more documents as a PDF. When selecting multiple documents for download they will be downloaded as a zip file. The converter uses built in API's of converting to PDF.
 
-A SharePoint Framework extension that brings powerful PDF conversion capabilities to your SharePoint Online document libraries. Convert documents to PDF, download files as PDF, preserve metadata, and more - all with a modern, responsive UI.
+![preview](./screenshot.gif "Preview")
 
 ## Compatibility
 
-![SPFx 1.20](https://img.shields.io/badge/spfx-1.20.0-green.svg)
-![Node.js LTS 18.x](https://img.shields.io/badge/Node.js-LTS%2018.x-green.svg)
+![SPFx 1.21.1](https://img.shields.io/badge/spfx-1.10.0-green.svg) 
+![Node.js LTS 18.x | LTS 8.x](https://img.shields.io/badge/Node.js-LTS%206.x%20%7C%20LTS%208.x-green.svg)
 ![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-red.svg)
 ![Workbench Hosted: Does not work with local workbench](https://img.shields.io/badge/Workbench-Hosted-yellow.svg "Does not work with local workbench")
 
-## Key Features
-
-### PDF Conversion
-- Convert documents to PDF with customizable quality settings (low, medium, high)
-- Support for multiple file formats: Word, Excel, PowerPoint, CSV, RTF, and more
-- Powered by Microsoft Graph API V3 for efficient processing
+## Applies to
 
-### Advanced Options
-- **Batch Processing**: Convert multiple documents simultaneously
-- **Metadata Preservation**: Keep important document properties during conversion
-- **Custom Destinations**: Choose where to save your converted files
-- **Email Integration**: Send PDFs via email with custom subject lines
+* [SharePoint Framework Extensions](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/overview-extensions)
 
-### Modern Experience
-- **Fluent UI Design**: Clean, modern interface following Microsoft design language
-- **Responsive Layout**: Works on desktop and mobile devices
-- **Dark/Light Mode**: Support for different visual preferences
-- **Accessibility**: Designed with accessibility in mind
-- **Multi-language Support**: English, French, Spanish, German included
+## Solution
 
-## How It Works
+Solution|Author(s)
+--------|---------
+pnp-ext-pdf-convert| Mikael Svenson ([@mikaelsvenson](https://twitter.com/mikaelsvenson))
 
-The extension adds two commands to your document library ribbon:
+## Version history
 
-1. **Download as PDF**: Converts selected document(s) and downloads to your device
-2. **Convert to PDF**: Transforms document(s) to PDF and saves in SharePoint
+Version|Date|Comments
+-------|----|--------
+1.0| 2019| Initial release by Puzzlepart
+1.1| February 23, 2021| Moved and re-branded to PnP
+1.2| October 30, 2022| Upgrade SPFx to version 1.12.1
+1.3| October 21, 2024| Upgrade SPFx to version 1.20.1, rewrite it from scratch using Graph API and using the built in converter in Graph, moved to Fluent UI and alot more
+1.4| September 03 2025| Added batch operations, progress indicators, multi-language support (EN/FR/ES/DE), ZIP downloads, enhanced error handling
 
-When triggered, a customizable options panel allows you to:
-- Set conversion quality
-- Enable/disable metadata preservation
-- Send email notifications
-- Select custom save locations
-
-![Options Dialog](./options-dialog.png)
+## Disclaimer
 
-## Quick Start Guide
+**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.**
 
-### Installation
+## Installing the solution
 
-1. Download the [pnp-ext-pdf-convert.sppkg](./pnp-ext-pdf-convert.sppkg) file
-2. Upload to your tenant app catalog
-   - URL: `https://<tenant>-admin.sharepoint.com/_layouts/15/online/ManageAppCatalog.aspx`
-   - Requires SharePoint Administrator rights
-3. Trust the solution when prompted
-   ![Trust Solution](./screenshot-2.png)
-4. Navigate to any document library to begin using the commands
+- Upload and Deploy the file [pnp-ext-pdf-convert.sppkg](./pnp-ext-pdf-convert.sppkg) to your tenant app catalog. ![TrustSolution](./screenshot-2.png "Trust solution")
+    * If created the tenant app catalog can be reached via `https://<tenant>-admin.sharepoint.com/_layouts/15/online/ManageAppCatalog.aspx`.
+    * You need to be a SharePoint Administrator to upload this solution.
+- Navigate to a document library and select one or more files and you should see the PDF options in the document ribbon.
 
-### Usage
+_Note: It may take a little while before it shows the first time after install._
 
-1. Select one or more supported documents in a library
-2. Click either "Download as PDF" or "Convert to PDF" from the ribbon
-3. Configure your preferences in the options dialog
-4. Start the conversion
-5. View progress and results in the status dialog
+## Features
 
-## Supported File Formats
+### 🔄 Batch Operations
+- **Multi-file Selection**: Select multiple documents using Ctrl+Click or Shift+Click
+- **Batch Download**: Download multiple files as PDFs in a single ZIP archive
+- **Batch Convert**: Convert multiple files to PDF and save them in the same library
+- **Smart Validation**: Automatically filters out unsupported file types
 
-- **Word Documents**: doc, docx, rtf
-- **Excel Spreadsheets**: xls, xlsx, csv
-- **PowerPoint Presentations**: ppt, pptm, pptx, pps, ppsx, ppsxm, pot, potm, potx
-- **OpenDocument Formats**: odp, ods, odt
-- **Other**: html
+### 📊 Progress Tracking
+- **Real-time Progress Bar**: Visual progress indicator for batch operations
+- **File Status Updates**: See which file is currently being processed
+- **Success/Error Indicators**: Clear visual feedback for each file's conversion status
+- **Summary Reports**: Detailed completion reports with success and error counts
 
-## Version History
+### 🌐 Multi-language Support
+- **English (en-us)**: Default language
+- **French (fr-fr)**: Français
+- **Spanish (es-es)**: Español  
+- **German (de-de)**: Deutsch
+- **Dynamic UI**: Command titles update based on selection count
 
-| Version | Date | Description |
-|---------|------|-------------|
-| 1.0 | 2019 | Initial release by Puzzlepart |
-| 1.1 | Feb 2021 | Re-branded to PnP |
-| 1.2 | Oct 2022 | Updated to SPFx 1.12.1 |
-| 1.3 | Oct 2024 | Complete rewrite with Graph API, SPFx 1.20.1, Fluent UI |
-| 1.4 | Mar 2025 | Feature-complete version with metadata preservation, multi-language support, email integration, and more |
+### 💾 Enhanced Downloads
+- **ZIP Archives**: Multiple files automatically packaged with timestamp
+- **Smart Naming**: Original filenames preserved with .pdf extension
+- **Error Recovery**: Failed conversions don't interrupt the batch process
 
-## For Developers
+## Supported file formats
 
-### Required Permissions
+csv, doc, docx, odp, ods, odt, pot, potm, potx, pps, ppsx, ppsxm, ppt, pptm, pptx, rtf, xls, xlsx, html
 
-The extension requires these Microsoft Graph API permissions:
-- Files.ReadWrite
-- Sites.ReadWrite.All
-- Mail.Send (for email features)
+## Debug URL for testing
 
-### Debug URL
+Here's a debug URL for testing around this sample.
 
 ```
 ?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&loadSPFX=true&customActions={"ea401ac9-3abc-4e27-b93b-09c9a0587ee9":{"location":"ClientSideExtension.ListViewCommandSet.CommandBar","properties":{}}}
 ```
 
-### Technical Implementation
-
-- Utilizes SPFx Command Set Extensions
-- Leverages Microsoft Graph API for file operations
-- React components with Fluent UI
-- TypeScript for type safety
-- Responsive design principles
-
-## Solution 
-
-| Solution | Author(s) |
-|----------|-----------|
-| pnp-ext-pdf-convert | Mikael Svenson ([@mikaelsvenson](https://twitter.com/mikaelsvenson)) |
-| pnp-ext-pdf-convert | Nicolas Kheirallah ([@NicolasKheirallah](https://twitter.com/NicolasKheirallah)) |
-
-## 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.**
-
-![](https://m365-visitor-stats.azurewebsites.net/sp-dev-fx-extensions/samples/react-command-convert-to-pdf)
+![](https://m365-visitor-stats.azurewebsites.net/sp-dev-fx-extensions/samples/react-command-convert-to-pdf)

samples/react-command-convert-to-pdf/assets/sample.json

@@ -9,7 +9,7 @@
       "A global list customizer which adds functionality to all document libraries in SharePoint Online to convert one or more documents in-place to PDF, or download one or more documents as a PDF. When selecting multiple documents for download they will be downloaded as a zip file. The converter uses built in API\u0027s of converting to PDF."
     ],
     "creationDateTime": "2021-02-23",
-    "updateDateTime": "2024-10-23",
+    "updateDateTime": "2025-09-03",
     "products": [
       "SharePoint"
     ],
@@ -20,7 +20,7 @@
       },
       {
         "key": "SPFX-VERSION",
-        "value": "1.20.0"
+        "value": "1.21.1"
       }
     ],
 "tags": [],
@@ -42,6 +42,10 @@
         "pictureUrl": "https://github.com/wobba.png",
         "name": "Mikael Svenson",
         "twitter": "mikaelsvenson"
+      },{
+        "gitHubAccount": "NicolasKheirallah",
+        "pictureUrl": "https://github.com/NicolasKheirallah.png",
+        "name": "Nicolas Kheirallah"
       }
     ],
     "references": [

samples/react-command-convert-to-pdf/buildProject.cmd

@@ -0,0 +1,28 @@
+@echo off
+cls
+
+REM Ensure we are in the correct directory
+pushd %~dp0
+
+REM Clean the previous build artifacts
+echo Cleaning previous build artifacts...
+call gulp clean
+
+REM Build the project in production mode
+echo Building the project...
+call gulp build --ship
+
+REM Bundle the project resources for production
+echo Bundling the project resources...
+call gulp bundle --ship
+
+REM Package the solution for deployment
+echo Packaging the solution...
+call gulp package-solution --ship
+
+REM Open the solution folder in File Explorer
+echo Opening the solution folder...
+start "" explorer ".\sharepoint\solution\"
+
+REM Return to the original directory
+popd

samples/react-command-convert-to-pdf/config/config.json

@@ -13,7 +13,6 @@
   },
   "externals": {},
   "localizedResources": {
-    "PdfExportCommandSetStrings": "lib/extensions/pdfExport/loc/{locale}.js",
-    "ControlStrings": "node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js"
+    "PdfExportCommandSetStrings": "lib/extensions/pdfExport/loc/{locale}.js"
   }
-}
+}

samples/react-command-convert-to-pdf/config/copy-assets.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
+  "deployCdnPath": "./release/assets/"
+}

samples/react-command-convert-to-pdf/config/package-solution.json

@@ -3,11 +3,14 @@
     "solution": {
         "name": "Save and convert as PDF by PnP",
         "id": "06babd6f-e62f-41e8-87c9-6cb516203a2d",
-        "version": "1.4.0.171",
+        "version": "1.4.0.0",
         "includeClientSideAssets": true,
         "skipFeatureDeployment": true,
-        "isDomainIsolated": false,
         "webApiPermissionRequests": [
+            {
+                "resource": "Microsoft Graph",
+                "scope": "Sites.Read.All"
+            },
             {
                 "resource": "Microsoft Graph",
                 "scope": "Sites.ReadWrite.All"
@@ -17,31 +20,13 @@
                 "scope": "Files.ReadWrite.All"
             }
         ],
-        "developer": {
-            "name": "",
-            "websiteUrl": "",
-            "privacyUrl": "",
-            "termsOfUseUrl": "",
-            "mpnId": ""
-        },
-        "metadata": {
-            "shortDescription": {
-                "default": "Save and convert as PDF by PnP"
-            },
-            "longDescription": {
-                "default": "Save and convert as PDF by PnP"
-            },
-            "screenshotPaths": [],
-            "videoUrl": "",
-            "categories": []
-        },
         "features": [
             {
                 "title": "Save and convert as PDF by PnP",
                 "description": "Deploys a custom action to allow save and conversion of files as PDF from a library.",
                 "id": "94d2d641-737d-44ff-9c4d-32ac54996478",
-                "version": "1.4.0.0",
-            "assets": {
+                "version": "1.1.0.0",
+                "assets": {
                     "elementManifests": [
                         "elements.xml",
                         "ea401ac9-3abc-4e27-b93b-09c9a0587ee9.xml"

samples/react-command-convert-to-pdf/config/sass.json

@@ -1,6 +1,25 @@
 {
-    "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",
+    "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
     "port": 4321,
     "https": true,
-    "initialPage": "https://enter-your-SharePoint-site/_layouts/workbench.aspx"
+    "serveConfigurations": {
+        "default": {
+            "pageUrl": "https://contoso.sharepoint.com/Shared%20Documents/Forms/AllItems.aspx",
+            "customActions": {
+                "ea401ac9-3abc-4e27-b93b-09c9a0587ee9": {
+                    "location": "ClientSideExtension.ListViewCommandSet",
+                    "properties": {}
+                }
+            }
+        },
+        "pdfExport": {
+            "pageUrl": "https://contoso.sharepoint.com/Shared%20Documents/Forms/AllItems.aspx",
+            "customActions": {
+                "ea401ac9-3abc-4e27-b93b-09c9a0587ee9": {
+                    "location": "ClientSideExtension.ListViewCommandSet",
+                    "properties": {}
+                }
+            }
+        }
+    }
 }

samples/react-command-convert-to-pdf/config/serve.json

@@ -1,7 +1,36 @@
 'use strict';
 
+const gulp = require('gulp');
+const path = require('path');
 const build = require('@microsoft/sp-build-web');
 
+const bundleAnalyzer = require('webpack-bundle-analyzer');
+build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
+build.addSuppression(
+    `Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`
+  );
+  build.addSuppression(/error semicolon: Unnecessary semicolon$/);
+  build.addSuppression(/error semicolon: Missing semicolon$/);
+  build.addSuppression(/filename should end with module.sass or module.scss$/);
+  build.addSuppression(/Warning/gi);
+  
+build.configureWebpack.mergeConfig({
+    additionalConfiguration: (generatedConfiguration) => {
+        const lastDirName = path.basename(__dirname);
+        const dropPath = path.join(__dirname, 'temp', 'stats');
+        generatedConfiguration.plugins.push(new bundleAnalyzer.BundleAnalyzerPlugin({
+            openAnalyzer: false,
+            analyzerMode: 'static',
+            reportFilename: path.join(dropPath, `${lastDirName}.stats.html`),
+            generateStatsFile: false,
+            logLevel: 'error'
+        }));
+
+        return generatedConfiguration;
+    }
+});
+
+
 build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
 
 var getTasks = build.rig.getTasks;
@@ -13,4 +42,7 @@ build.rig.getTasks = function () {
   return result;
 };
 
-build.initialize(require('gulp'));
+
+require("./spfx-versioning")(build);
+build.tslintCmd.enabled = false;
+build.initialize(require("gulp"));