# 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