SharePoint Script Editor SPFx Webpart

Description

If you’re moving from classic SharePoint pages, you may have existing script-based solutions you’d like to reuse on a modern page without repackaging them as a new SharePoint Framework web part. This web part works much like the classic Script Editor Web Part, allowing you to place custom script or HTML directly onto a modern page.

1. Upload to the SharePoint App Catalog:

   • Navigate to your SharePoint Tenant App Catalog site (e.g., https://<tenant>.sharepoint.com/sites/AppCatalog).

   • Go to the Apps for SharePoint library.

   • Upload or drag and drop your .sppkg file into this library.

   • A dialog will appear asking you to trust and deploy the client-side solution.

   • If you want the web part to be available on all sites immediately, check the option: “Make this solution available to all sites in the organization” (this option is only available if the skipFeatureDeployment property in package-solution.json is set to true).

   • Click Deploy.

⚙️ Installing and Adding to a Site

This stage makes the web part available for use on a specific SharePoint site collection.

1. Add the App to the Site:

   • Navigate to the SharePoint site where you want to use the web part.

   • Go to Site Contents (usually via the settings gear ⚙️ icon).

   • Click + New and then App (or Add an App depending on the experience).

   • Find your custom web part’s app under the list of Apps you can add and click it to install it on the site.

   • Note: If you checked “Make this solution available to all sites…” during deployment, this step might be skipped as the web part is already available.

2. Add the Web Part to a Page:

   • Go to the SharePoint page where you want to add the web part and click Edit.

   • Click the + icon on the page to add a new web part.

   • Search for and select your custom SPFx web part from the list.

   • Configure any required properties.

   • Publish the page to make the web part visible to users.