The Script Editor web part is one of my favourite tools in my SharePoint development kit as it enables developers and designers to be able to inject HTML, JavaScript and CSS into any SharePoint page without having to open SharePoint Designer.

Great, but… there is a drawback, and a quite annoying one at that… you cannot export a default Script Editor web part.

Why is that annoying? Exporting web parts is the easiest way to replicate the functionality configured inside them in SharePoint. You can take your exported web part, store it in your Site Collection Web Part Gallery and reuse it using the Add Web Part button on the SharePoint Ribbon.

However, there is a very simple update you can make to change this and create your own version of the Script Editor that you can export by default.

Add a Script Editor to a web part zone and click the Edit Web Part command from the web part menu. This will open the Web Part Properties pane.

On the properties pane, expand the Advanced section. You will see that there is a field to set the Export Mode of the web part, change this to Export All. This will enable the Export command on the web part menu, which will allow you to save the web part locally to your desktop.

After saving the web part locally, rename the file to “ExportableMSScriptEditor.webpart”. You can save this back to you SharePoint site for it be reused by uploading it to your Web Part Gallery.

Go to your site and click the Settings cog to access the Site Settings page, from here you can access the Web Part Gallery under the Web Designer Galleries heading.

Upload your new web part file into the Web Part Gallery using the Ribbon, on the Files tab click the Upload Document button and select the file when promoted by the “Add a web part” dialog box.

Once uploaded, you will be asked to confirm or alter the file name, title, description and group of the web part.

Once that is complete and your new web part is showing in the Web Part Gallery, you can now add this to your page via the Ribbon.

Edit the page, got to the Ribbon and select the Insert tab, click the Web Part button to open the Web Part Picker to find and select your web part to then add to the page.

You will now be able to Export the web part from the web part menu.

Now that you can use your own version of the Script Editor web part you can create web part functionality and easily export them for further reuse or simply for a quick backup, just in case someone changes and breaks it.

Here is an example of a web part that used the Exportable Script Editor web part as a starting point to display a simple list of links.

 

 

 

I hope you’ve found this little trick helpful and thank you for reading 😀