How I Quit Worrying and Learned to Love the SharePoint Script Editor Web Part

The Script Editor Web Part (SEWP) is a damned-handy tool for front-end designers/developers. I find myself using it in the following scenarios:

  • I need to quickly test CSS solution prior to rolling it into a global CSS file.
  • I need a page-specific solution (okay, a dirty hack) that doesn’t deserve to be in a global CSS file.
  • I need an immediate solution to a page-specific problem and, for whatever reason, can’t yet roll it into a global CSS file.

The SEWP (should we pronounce that like “soup”?) is poorly documented. Microsoft provides lots of information about the Content Editor Web Part (CEWP, “coup”?), but little if any for the SWEP, which is why I’m writing this article. The CEWP is useful. I use it often to create editable areas for tech-savvy (but non-programmer) page maintainers. And, unlike SEWP, the CEWP can be pointed to a file. So, if you have a solution that spans several pages, using CEWP will let you change one file and be done with it. On the other hand, the SEWP is quicker to use (due to its “Edit Snippet” button). As the name implies, it’s designed for code injection. So you don’t have to edit the web part and then switch to HTML view to do your work. Depending upon your security settings, the CEWP can also strip CSS, which makes it nearly useless for front-end work. And, seriously, if your solution spans many pages it needs to be rolled into a Master Page or a global CSS or JavaScript file.

The SEWP seems almost like a gift and apology from the SharePoint development team. It’s a frank acknowledgement that a lot of things about SharePoint, especially from a UX perspective, leave a lot to be desired as well as a useful tool for fixing some of those problems.

I’ve talked exclusively about CSS, but the SEWP also supports JavaScript. It might support other languages as well (TypeScript seems a likely candidate), but you’ll have to test to see, because, as far as I can tell, there’s no documentation in any of the relevant locations describing it in detail. I’ve managed to find only alarming rhetoric and documentation about how to create instances of the SEWP in page layouts, which is a different topic entirely.