The Shift to Modern SharePoint: Custom Script Changes and Embracing SPFx

Dylan DominguezDylan Dominguez
6 min read

As an intern at NYC Office of Technology and Innovation (NYC OTI), I am immersed in supporting the digital transformation of over 200,000 users across 40+ NYC agencies. In one part of my role, I serve as both an engineer and administrator, guiding agencies as they transition from classic custom scripting to modern SharePoint Framework (SPFx) solutions. Working closely with agency teams, I’m actively involved in:

  • Building systems for custom script enablement: I’ve helped design a structured request process for agencies, allowing them temporary editing access to classic scripts.

  • Automating pipelines: We are establishing workflows to streamline this transition, ensuring smoother deployment of SPFx and automated re-enablement where necessary.

  • Educating and training: A significant part of my work is teaching admins and engineers how to leverage SPFx not only to transition from custom scripts but also to make their SharePoint sites more interactive, secure, and robust.

Our team leads the conversation with NYC agencies and collaborates closely with Microsoft to ensure an efficient migration that aligns with ongoing Azure developments. By empowering agencies with SPFx, we’re helping them build modern, future-proofed sites with enhanced functionality and resilience.

Disclaimer: This blog reflects my personal experience and understanding of SharePoint, SPFx, and Microsoft Azure technologies. The views expressed do not represent the official stance of the New York City Office of Technology and Innovation (NYC OTI).


What is SharePoint and SPFx?

Microsoft SharePoint is a versatile platform primarily used for document management, content sharing, and collaboration within organizations. Originally launched in 2001, SharePoint has evolved from a simple on-premises product to a robust, cloud-powered service that integrates with Microsoft 365. Today, SharePoint is a cornerstone for managing information, enhancing productivity, and supporting enterprise collaboration across departments and teams.

SharePoint Framework (SPFx) is a modern development model introduced by Microsoft for creating custom solutions on SharePoint Online and Microsoft 365. Unlike traditional server-side SharePoint customizations, SPFx is a client-side framework that allows developers to build responsive and engaging web parts using familiar web development tools like JavaScript, TypeScript, React, and Angular. SPFx components run securely in the browser, fully integrating with the SharePoint page and making it ideal for interactive, scalable, and secure customizations on modern SharePoint sites.

As SharePoint continues to transition from classic to modern, SPFx is at the heart of Microsoft’s strategy to ensure that customizations align with best practices in security, compatibility, and scalability. This framework empowers organizations to build robust applications that not only extend SharePoint’s functionality but also adapt seamlessly to updates and enhancements in Microsoft’s cloud ecosystem.


From Classic to Modern: Transitioning SharePoint at Scale

Microsoft’s migration from classic to modern SharePoint is reshaping the way customizations are approached across the platform. By November 2024, Microsoft will disable custom scripts by default for all Azure tenants—a shift that underscores their commitment to security and scalability. With this change, SharePoint admins can still enable custom scripting temporarily in 24-hour segments through the SharePoint Admin Center. After each 24-hour period, custom script editing will automatically disable, ensuring that unauthorized or unmonitored scripts do not persist on the platform.

For organizations that rely on legacy custom scripts, the PowerShell commands below can enable custom scripting in the interim, though this method requires daily activation:

powershellCopy codeConnect-PnPOnline -Url "https://<TenantName>.sharepoint.com/sites/<SiteName>" -Interactive
Set-PnPSite -Identity "https://<TenantName>.sharepoint.com/sites/<SiteName>" -NoScriptSite $false

This temporary workaround highlights the importance of transitioning to SPFx for sustainable, long-term SharePoint customization.


Why Move to SPFx?

The SharePoint Framework (SPFx) is Microsoft’s preferred solution for client-side customization, providing a more secure, scalable, and modern alternative to classic custom scripts. Here’s why SPFx is the ideal approach for SharePoint in 2024 and beyond:

  1. Enhanced Security: SPFx runs within the SharePoint security framework, protecting both the client side and the organization’s overall SharePoint environment.

  2. Built for Modern SharePoint: SPFx aligns seamlessly with modern SharePoint and its features, ensuring compatibility with future updates.

  3. Centralized Deployment with App Catalog: SPFx solutions can be deployed through the App Catalog at either the tenant or site level, making it easy for admins to manage and control customizations.


Setting Up the App Catalog for SPFx

To deploy SPFx solutions, you’ll first need to establish an App Catalog. Here’s a quick guide:

  1. Access the SharePoint Admin Center:

    • Click on the App Launcher in your SharePoint site and navigate to Admin > SharePoint.
  2. Create the App Catalog:

    • In More Features, go to Apps > Open.

    • If no App Catalog exists, SharePoint will guide you through the setup process.

  3. Upload Your SPFx Package:

    • Open the App Catalog site, select Upload, and choose the SPFx package (e.g., shortpoint-spfx.sppkg). Click Enable app to deploy it across your tenant or specific sites.

With the App Catalog, organizations can control which SPFx web parts are available, ensuring consistent customization across the environment.


Deploying SPFx at the Site Level

In addition to tenant-wide deployment, each Site Collection Admin can enable SPFx apps for specific sites. This flexibility allows organizations to tailor SPFx usage to their needs:

  1. Go to the App Catalog for the target site.

  2. Upload the SPFx package you wish to deploy.

  3. Once enabled, select which solutions to apply at the site level, allowing for more controlled and context-specific customizations.


Essential Tools for SPFx Development

For organizations building custom SPFx components, having the right tools is essential. Here’s a checklist to start with SPFx development:

  1. Node.js:

    • Install the LTS version of Node.js (v18). Verify the installation:

        bashCopy codenode --version
      
  2. Code Editor:

    • Visual Studio Code is recommended due to its built-in support for TypeScript and SPFx integration.
  3. SPFx Toolchain:

    • Install necessary tools like Gulp, Yeoman, and the SharePoint Generator using:

        bashCopy codenpm install gulp-cli yo @microsoft/generator-sharepoint --global
      
  4. JavaScript Frameworks:

    • Choose a framework like React, Angular, or Vue.js to develop SPFx components with a modern, responsive design.

Leveraging the PnP Community for SPFx Solutions

For those just beginning with SPFx, the PnP (Patterns and Practices) community offers a library of SPFx web parts that can be readily integrated into SharePoint environments. The PnP Web Parts Gallery features numerous SPFx solutions, from advanced comments to navigation enhancements, that can simplify development and enhance functionality.

Minimum Requirements to run PnP SPFx solutions:

  • Node.js (LTS version)

  • Gulp CLI

  • SPFx Generator

  • A compatible code editor (e.g., Visual Studio Code)


Preparing for the Future: Transitioning from Custom Scripts to SPFx

As SharePoint evolves, moving away from custom scripts and embracing SPFx is becoming critical for organizations. Here’s what administrators and developers should prioritize:

  • Plan for SPFx Integration: With custom scripts restricted to 24-hour enablement, now is the time to prepare long-term SPFx solutions.

  • Automate Temporary Scripting Needs: For organizations that still rely on custom scripts, consider automating the re-enablement process.

  • Develop SPFx Expertise: Building skills in SPFx will be essential for adapting to modern SharePoint, particularly for interactive, scalable, and future-proofed sites.


Conclusion

The shift from custom scripts to SPFx marks a new era in SharePoint, prioritizing security, scalability, and compatibility with modern cloud solutions. For organizations, especially at scale like those in NYC, SPFx offers a robust framework to create engaging and secure experiences. This evolution in SharePoint not only brings technical improvements but also equips admins with the tools to build sites that are interactive, resilient, and ready for the future.

At NYC OTI, my team and I are helping guide this transition, ensuring that agencies across the city benefit from the latest SharePoint advancements. We’re excited to be at the forefront of this shift, collaborating with Microsoft to provide guidance on best practices, especially as they apply to Azure integration.

As I continue learning and working with SPFx, stay tuned for future blogs where I’ll explore building SPFx components from scratch. Embracing these changes opens a world of possibilities in SharePoint, and I look forward to sharing more of my journey and insights!

0
Subscribe to my newsletter

Read articles from Dylan Dominguez directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Dylan Dominguez
Dylan Dominguez