Added the share points pdf viewer sample

SharePoint/SharePoint/.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

SharePoint/SharePoint/.npmignore

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

SharePoint/SharePoint/.yo-rc.json

@@ -0,0 +1,21 @@
+{
+  "@microsoft/generator-sharepoint": {
+    "plusBeta": false,
+    "isCreatingSolution": true,
+    "nodeVersion": "20.18.2",
+    "sdksVersions": {
+      "@microsoft/microsoft-graph-client": "3.0.2",
+      "@microsoft/teams-js": "2.24.0"
+    },
+    "version": "1.20.0",
+    "libraryName": "pdfviewer-spfx",
+    "libraryId": "756ebdc3-ddeb-495b-b837-e56bc0ee5c70",
+    "environment": "spo",
+    "packageManager": "npm",
+    "solutionName": "pdfviewer-spfx",
+    "solutionShortDescription": "pdfviewer-spfx description",
+    "skipFeatureDeployment": true,
+    "isDomainIsolated": false,
+    "componentType": "webpart"
+  }
+}

SharePoint/SharePoint/README.md

@@ -0,0 +1,98 @@
+# SharePoint PDF Viewer Web Part
+
+A SharePoint Framework (SPFx) web part that integrates **Syncfusion EJ2 PDF Viewer** for viewing PDF documents stored in SharePoint. This application provides a view-only mode with a user-friendly interface for document selection and navigation.
+
+## 📦 Installation
+
+### Prerequisites
+- A SharePoint development environment and a Microsoft 365 tenant (for testing/deployment).
+- Node.js compatible with your SPFx version (check SPFx docs). This application requires 20.18.2
+- Gulp: `npm install -g gulp-cli`.
+
+### Setup Steps
+
+1. **Clone/Extract the project**
+   ```bash
+   cd typescript-pdf-viewer-examples/SharePoint
+   ```
+
+2. **Install dependencies**
+   ```bash
+   npm install
+   ```
+
+3. **Configure PDF Source Location**
+   Edit `src/webparts/pdfviewer/PdfviewerWebPart.ts`:
+   - Replace `YOUR-SHAREPOINT-SITE` with your SharePoint site URL
+   - Replace `{your-site-name}` with your site name
+   - Replace `{documents-containing-path}` with the path to your PDF documents folder
+
+   ```typescript
+   const url = `${targetSite}/_api/web/GetFolderByServerRelativeUrl('/sites/{your-site-name}/{documents-containing-path}')/Files`;
+   ```
+
+4. **Configure Resource URL** (Optional)
+   Update the `resourceUrl` in the PDF Viewer initialization:
+   ```typescript
+   resourceUrl: '${YOUR-LOCATION-FOR-RESOURCE}/ej2-pdfviewer-lib'
+   ```
+
+## Run the application
+
+### Development Build
+
+```bash
+gulp serve
+```
+
+The sample will be hosted in `https://{tenantDomain}/_layouts/workbench.aspx`.
+
+## 📖 Usage
+
+### Adding the Web Part to a Page
+
+1. Navigate to a SharePoint page (modern or full page)
+2. Click **Edit** to enter edit mode
+3. Click **+ Add a new web part**
+4. Search for **"pdfviewer"** (labeled as "Advanced" category)
+5. Click to add the web part
+6. The web part will load available PDF documents from the configured location
+7. Use the dropdown menu to select a PDF document
+8. The selected document will load in the viewer
+
+### Web Part Configuration
+
+**Property Pane Settings**
+- Navigate to the web part menu → **Edit web part**
+- **Basic Settings**:
+  - **Description**: Add a description for the web part (for reference)
+
+### Toolbar Options (View-Only Mode)
+
+The toolbar displays the following tools:
+- **Open Option**: Load a different document
+- **Page Navigation Tool**: Jump to specific pages
+- **Magnification Tool**: Zoom controls
+- **Pan Tool**: Navigate large pages
+- **Print Option**: Print the document
+
+## View-Only Mode
+
+### Form Fields
+All form fields are automatically set to **read-only** when the document loads:
+```typescript
+viewer.formDesignerModule.updateFormField(viewer.formFieldCollections[x], {
+  isReadOnly: true,
+});
+```
+
+### Disabled Features
+- Annotations and sticky notes
+- Page organizer
+- Context menu interactions
+- Direct form field editing
+
+## 🔗 Resources
+
+- [Syncfusion Javascript PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/javascript-pdf-viewer)
+- [Documentation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/depoyment-integration/share-point)

SharePoint/SharePoint/config/config.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
+  "version": "2.0",
+  "bundles": {
+    "pdfviewer-web-part": {
+      "components": [
+        {
+          "entrypoint": "./lib/webparts/pdfviewer/PdfviewerWebPart.js",
+          "manifest": "./src/webparts/pdfviewer/PdfviewerWebPart.manifest.json"
+        }
+      ]
+    }
+  },
+  "externals": {},
+  "localizedResources": {
+    "PdfviewerWebPartStrings": "lib/webparts/pdfviewer/loc/{locale}.js"
+  }
+}

SharePoint/SharePoint/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": "pdfviewer-spfx",
+  "accessKey": "<!-- ACCESS KEY -->"
+}

SharePoint/SharePoint/config/package-solution.json

@@ -0,0 +1,40 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
+  "solution": {
+    "name": "pdfviewer-spfx-client-side-solution",
+    "id": "756ebdc3-ddeb-495b-b837-e56bc0ee5c70",
+    "version": "1.0.0.0",
+    "includeClientSideAssets": true,
+    "skipFeatureDeployment": true,
+    "isDomainIsolated": false,
+    "developer": {
+      "name": "",
+      "websiteUrl": "",
+      "privacyUrl": "",
+      "termsOfUseUrl": "",
+      "mpnId": "Undefined-1.20.0"
+    },
+    "metadata": {
+      "shortDescription": {
+        "default": "pdfviewer-spfx description"
+      },
+      "longDescription": {
+        "default": "pdfviewer-spfx description"
+      },
+      "screenshotPaths": [],
+      "videoUrl": "",
+      "categories": []
+    },
+    "features": [
+      {
+        "title": "pdfviewer-spfx Feature",
+        "description": "The feature that activates elements of the pdfviewer-spfx solution.",
+        "id": "c3b9ea15-4bf5-4e7d-abe4-2b039c7de9d0",
+        "version": "1.0.0.0"
+      }
+    ]
+  },
+  "paths": {
+    "zippedPackage": "solution/pdfviewer-spfx.sppkg"
+  }
+}

SharePoint/SharePoint/config/sass.json

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

SharePoint/SharePoint/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"
+}

SharePoint/SharePoint/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 -->"
+}

SharePoint/SharePoint/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'));

SharePoint/SharePoint/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "pdfviewer-spfx",
+  "version": "0.0.1",
+  "private": true,
+  "engines": {
+    "node": ">=18.17.1 <19.0.0"
+  },
+  "main": "lib/index.js",
+  "scripts": {
+    "build": "gulp bundle",
+    "clean": "gulp clean",
+    "test": "gulp test"
+  },
+  "dependencies": {
+    "@microsoft/sp-component-base": "1.20.0",
+    "@microsoft/sp-core-library": "1.20.0",
+    "@microsoft/sp-lodash-subset": "1.20.0",
+    "@microsoft/sp-office-ui-fabric-core": "1.20.0",
+    "@microsoft/sp-property-pane": "1.20.0",
+    "@microsoft/sp-webpart-base": "1.20.0",
+    "@syncfusion/ej2-pdfviewer": "^34.2.5",
+    "tslib": "2.3.1"
+  },
+  "devDependencies": {
+    "@fluentui/react": "^8.106.4",
+    "@microsoft/eslint-config-spfx": "1.20.2",
+    "@microsoft/eslint-plugin-spfx": "1.20.2",
+    "@microsoft/rush-stack-compiler-4.7": "0.1.0",
+    "@microsoft/sp-build-web": "1.20.2",
+    "@microsoft/sp-module-interfaces": "1.20.2",
+    "@rushstack/eslint-config": "4.0.1",
+    "@types/webpack-env": "~1.15.2",
+    "ajv": "^6.12.5",
+    "eslint": "8.57.0",
+    "gulp": "4.0.2",
+    "typescript": "4.7.4"
+  }
+}

SharePoint/SharePoint/src/index.ts

@@ -0,0 +1 @@
+// A file is required to be in the root of the /src directory by the TypeScript compiler

SharePoint/SharePoint/src/webparts/pdfviewer/PdfviewerWebPart.manifest.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
+  "id": "87887a8b-fa43-424d-9383-5e5a2a782bfd",
+  "alias": "PdfviewerWebPart",
+  "componentType": "WebPart",
+
+  // The "*" signifies that the version should be taken from the package.json
+  "version": "*",
+  "manifestVersion": 2,
+
+  // If true, the component can only be installed on sites where Custom Script is allowed.
+  // Components that allow authors to embed arbitrary script code should set this to true.
+  // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
+  "requiresCustomScript": false,
+  "supportedHosts": ["SharePointWebPart", "TeamsPersonalApp", "TeamsTab", "SharePointFullPage"],
+  "supportsThemeVariants": true,
+
+  "preconfiguredEntries": [{
+    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Advanced
+    "group": { "default": "Advanced" },
+    "title": { "default": "pdfviewer" },
+    "description": { "default": "pdfviewer description" },
+    "officeFabricIconFontName": "Page",
+    "properties": {
+      "description": "pdfviewer"
+    }
+  }]
+}