# Build script for classic SharePoint version
# Creates a standalone distribution with proper service extraction
Write-Host "Building MegaMenu Classic Distribution..." -ForegroundColor Green
# Ensure output directory exists
$outputPath = ".\classic"
if (-not (Test-Path $outputPath)) {
New-Item -ItemType Directory -Path $outputPath -Force
}
# Step 1: Build the modern SPFx version to ensure CSS is up to date
Write-Host "Building SPFx version for CSS..." -ForegroundColor Yellow
try {
gulp bundle --ship
Write-Host "✓ SPFx build completed" -ForegroundColor Green
} catch {
Write-Host "⚠ SPFx build failed, using existing CSS" -ForegroundColor Yellow
}
# Step 2: Copy CSS from the built version (same CSS for both classic and modern)
Write-Host "Copying CSS files..." -ForegroundColor Yellow
$cssSource = ".\lib\extensions\megaMenu\MegaMenu.css"
$cssTarget = ".\classic\MegaMenu.css"
if (Test-Path $cssSource) {
Copy-Item $cssSource $cssTarget -Force
Write-Host "✓ CSS copied from SPFx build" -ForegroundColor Green
} else {
Write-Host "⚠ Built CSS not found, keeping existing classic CSS" -ForegroundColor Yellow
}
# Step 3: Verify standalone services exist
$servicesFile = ".\classic\megamenu-services-standalone.js"
if (Test-Path $servicesFile) {
Write-Host "✓ Standalone services found" -ForegroundColor Green
} else {
Write-Host "✗ Missing megamenu-services-standalone.js" -ForegroundColor Red
Write-Host " Please ensure this file exists in the classic folder" -ForegroundColor Yellow
}
# Step 4: Verify classic wrapper exists
$wrapperFile = ".\classic\megamenu-classic.js"
if (Test-Path $wrapperFile) {
Write-Host "✓ Classic wrapper found" -ForegroundColor Green
} else {
Write-Host "✗ Missing megamenu-classic.js" -ForegroundColor Red
}
# Step 5: Create complete deployment package info
Write-Host "Creating deployment documentation..." -ForegroundColor Yellow
$deploymentContent = @"
# SharePoint MegaMenu Classic Deployment Guide
Version 1.0.2 - Classic SharePoint Support
## Architecture Overview
This classic version reuses the exact same service logic as the modern SPFx version:
- **Same CSS** (MegaMenu.css from SPFx build)
- **Same Services** (TaxonomyNavigationService, MegaMenuRenderer extracted to standalone)
- **Same Configuration** (Reads UserCustomAction properties like SPFx version)
- **Same Menu Structure** (Identical 3-level navigation rendering)
## Required Files
### Core Files (Required)
1. **MegaMenu.css** - Main stylesheet (shared with SPFx version)
2. **megamenu-services-standalone.js** - Extracted services without SPFx dependencies
3. **megamenu-classic.js** - Classic SharePoint integration wrapper
### Dependencies (SharePoint Built-in)
- SP.js (SharePoint JSOM)
- SP.Taxonomy.js (Taxonomy/Metadata services)
- jQuery (usually available in SharePoint)
## Deployment Methods
### Method 1: Site Assets (Recommended)
````html
````
### Method 2: Style Library
````html
````
### Method 3: CDN or Document Library
Upload to any accessible location and reference accordingly.
## Configuration
### Automatic Configuration Reading
The classic version automatically reads the same UserCustomAction configuration as the SPFx version:
- Term Set Name (default: "Navigation")
- External CSS URL (optional)
### Setting Configuration
Use one of these methods:
**Option A: Via Modern SPFx Version**
1. Install modern SPFx version on any modern SharePoint site
2. Use the settings panel to configure termset and CSS URL
3. Configuration is stored site-wide and will be read by classic version
**Option B: Via PowerShell (Advanced)**
````powershell
# Connect to SharePoint site
Add-PnPCustomAction -Name "MegaMenuConfig" -Location "ClientSideExtension.ApplicationCustomizer" `
-ClientSideComponentId "abc3361f-bb2d-491f-aba3-cd51c19a299b" `
-ClientSideComponentProperties '{"termSetName":"Your Navigation Termset","cssUrl":"/SiteAssets/custom-menu.css"}'
````
## Testing & Validation
### 1. Verify Dependencies
Open browser console and check:
````javascript
// These should all return objects/functions:
typeof SP
typeof SP.Taxonomy
typeof window.MegaMenuServices
typeof window.MegaMenuClassic
````
### 2. Enable Debug Mode
````javascript
window.MegaMenuConfig = { debug: true };
````
Then reload page to see console logging.
### 3. Manual Initialization
If auto-loading fails:
````javascript
window.MegaMenuClassic.reload();
````
## Troubleshooting
### Common Issues
1. **"SP is undefined"** - SP.js not loaded yet, classic wrapper will retry
2. **"MegaMenuServices not found"** - Include megamenu-services-standalone.js first
3. **"No menu items found"** - Check term set name and user permissions
4. **Menu renders but no styling** - Verify CSS path and inclusion
### Debug Steps
1. Check browser network tab for 404s on CSS/JS files
2. Verify SharePoint libraries load: SP.js, SP.Taxonomy.js
3. Check term store permissions and term set existence
4. Enable debug mode for detailed console logging
### Permissions Required
- Read access to term store
- Read access to site UserCustomActions (for configuration)
- Basic site user permissions
## Differences from SPFx Version
| Feature | SPFx Version | Classic Version |
|---------|-------------|----------------|
| Deployment | App Catalog | Master Page/Web Part |
| Configuration | Settings Panel | PowerShell or via SPFx |
| Auto-loading | Yes | Manual inclusion |
| Modern Sites | Yes | No |
| Classic Sites | No | Yes |
| SharePoint Online | Yes | Yes |
| SharePoint On-Premises | 2019+ | 2013+ |
## File Structure After Deployment
````
/SiteAssets/megamenu/
├── MegaMenu.css (from SPFx build)
├── megamenu-services-standalone.js (extracted services)
└── megamenu-classic.js (classic wrapper)
````
"@
Set-Content -Path ".\classic\deployment-guide.md" -Value $deploymentContent -Encoding UTF8
# Step 6: Create a simple deployment script template
$deployScript = @"
# PowerShell script to deploy MegaMenu Classic to SharePoint
# Requires PnP PowerShell module: Install-Module PnP.PowerShell
param(
[Parameter(Mandatory=`$true)]
[string]`$SiteUrl,
[string]`$LibraryName = "Site Assets",
[string]`$FolderName = "megamenu"
)
Write-Host "Deploying MegaMenu Classic to `$SiteUrl" -ForegroundColor Green
# Connect to SharePoint
Connect-PnPOnline -Url `$SiteUrl -Interactive
# Create folder if it doesn't exist
try {
Get-PnPFolder -Url "`$LibraryName/`$FolderName" -ErrorAction Stop
Write-Host "✓ Folder exists: `$LibraryName/`$FolderName" -ForegroundColor Green
} catch {
Add-PnPFolder -Name `$FolderName -Folder `$LibraryName
Write-Host "✓ Created folder: `$LibraryName/`$FolderName" -ForegroundColor Green
}
# Upload files
`$files = @(
@{Source=".\MegaMenu.css"; Target="`$LibraryName/`$FolderName/MegaMenu.css"},
@{Source=".\megamenu-services-standalone.js"; Target="`$LibraryName/`$FolderName/megamenu-services-standalone.js"},
@{Source=".\megamenu-classic.js"; Target="`$LibraryName/`$FolderName/megamenu-classic.js"}
)
foreach (`$file in `$files) {
if (Test-Path `$file.Source) {
Add-PnPFile -Path `$file.Source -Folder "`$LibraryName/`$FolderName"
Write-Host "✓ Uploaded: `$(`$file.Source)" -ForegroundColor Green
} else {
Write-Host "✗ File not found: `$(`$file.Source)" -ForegroundColor Red
}
}
Write-Host "`nDeployment completed!" -ForegroundColor Green
Write-Host "Add these lines to your master page:" -ForegroundColor Yellow
Write-Host "" -ForegroundColor Gray
Write-Host "" -ForegroundColor Gray
Write-Host "" -ForegroundColor Gray
"@
Set-Content -Path ".\classic\deploy-to-sharepoint.ps1" -Value $deployScript -Encoding UTF8
# Step 7: Summary
Write-Host "`n" + "="*60 -ForegroundColor Cyan
Write-Host "MegaMenu Classic Build Completed!" -ForegroundColor Green
Write-Host "="*60 -ForegroundColor Cyan
Write-Host "`nDistribution files created:" -ForegroundColor Yellow
$files = @(
@{Name="MegaMenu.css"; Desc="Shared stylesheet from SPFx"},
@{Name="megamenu-services-standalone.js"; Desc="Extracted services (no SPFx deps)"},
@{Name="megamenu-classic.js"; Desc="Classic SharePoint wrapper"},
@{Name="deployment-guide.md"; Desc="Complete deployment documentation"},
@{Name="deploy-to-sharepoint.ps1"; Desc="PowerShell deployment script"}
)
foreach ($file in $files) {
$exists = Test-Path ".\classic\$($file.Name)"
$status = if ($exists) { "✓" } else { "✗" }
$color = if ($exists) { "Green" } else { "Red" }
Write-Host " $status $($file.Name)" -ForegroundColor $color -NoNewline
Write-Host " - $($file.Desc)" -ForegroundColor Gray
}
Write-Host "`nNext steps:" -ForegroundColor Yellow
Write-Host "1. Review deployment-guide.md for instructions" -ForegroundColor White
Write-Host "2. Use deploy-to-sharepoint.ps1 for automated deployment" -ForegroundColor White
Write-Host "3. Configure termset via modern SPFx version or PowerShell" -ForegroundColor White
Write-Host "4. Test on classic SharePoint pages" -ForegroundColor White
Write-Host "`nArchitectural Achievement:" -ForegroundColor Cyan
Write-Host "✓ Same CSS as SPFx version" -ForegroundColor Green
Write-Host "✓ Same service logic (extracted to standalone)" -ForegroundColor Green
Write-Host "✓ Same configuration system" -ForegroundColor Green
Write-Host "✓ Same menu rendering output" -ForegroundColor Green
Write-Host "✓ No SPFx dependencies in classic version" -ForegroundColor Green