ScriptParts Background Information

The idea of creating ScriptParts came as I recently had created a JavaScript object rendering it self in a div tag added using the Edit Source option in the ribbon. This script needed a check to see that it only rendered when the page was not in edit mode, otherwise the content accumulated each time when saving the contents. One unpleasant side effect is, the position of the script functionality didn't show up in the content editor. As this page didn't need further editing this wasn't a real issue, but still a bit annoying. This I could also resolve in a Q & D (Quick and Dirty) way by first clearing the contents of the div $("#myid").html(""); and then adding the new elements.

For checking the edit mode I found the following answer from Andrey Markeev on stackexchange.

Then only about a week later, I visited the Dutch SharePoint Saturday where among other interesting sessions there was a session by Wouter van Vugt called 'Customizing the SharePoint 2013 Rich Text Editor', see sessions. I really thought that I had a good scenario for using this, no, not ScriptParts jet. I wanted to create functionality for a simple image mapper. I have created a script like that in the past (2003 not in SharePoint, but in our custom build content management system), that worked in the then available Internet Explorer. The first thing that I did was to update this script for usage in multiple modern browsers contenteditable region. I got there in the end, using the standard dom, but I was sick and tired of it, and who uses image maps anyway?

Then it came to dawn on me, I could use the idea's presented by Wouter, to also allow rendering of my earlier created script within the content editor, without it being saved as content. After trying this out for myself, I came to think about how it would be really nice to have this as a reusable feature. Starting to think about this, I thought wouldn't it be nice to create something that handles reusable scripts as if they where webparts. This is what I started working on then, just as a challenge, and ScriptParts is a result of that.

Some internals

Creating ScriptParts I used different sources on the internet, but I don't have a list of all of them. For adding the flyout on the ribbon button I found CustomAction Static and Dynamic Flyout Anchor Ribbon Button with Dropdown from Sonja Madsen that was quite useful. Also I used my own 'Smartloading' of jQuery that I used in Adding direct access to the ECB menu in SharePoint 2013. Here I also use the info I found on The Effect of SharePoint 2013′s Minimal Download Strategy (MDS). Also I have used some JavaScript tricks I have picked up over the years.

So what does the framework do?

The sandboxed solution activates a Site Collection feature that creates a Document Library called 'ScriptPart Library' on the rootweb. It also adds the Booden.net.ScriptParts.js file to the Style Library, and adds this as a ScriptLink. It also adds the ribbon button.

On loading the script, it checks to see if jQuery is already included on the page, if so, this version will be used. If not, the script check if there is a jQuery object that is set using the .noConflict method. If found it uses this version, if not it loads jQuery from 'ajax.aspnetcdn.com' and when finished starts checking for ScriptParts.

After jQuery is available, the ScriptParts code checks if there are elements with a class called 'booden-scriptpart', if found, it reads the settings from the 'data-scriptpart' attribute. It loads the javascript from the ScriptPart Library if needed, and when finished calls the Render method of the ScriptPart. When in edit mode some extra content is added (title etc.).

In edit mode the script handles some editor events and adds the menu and settings popup, it also provides the action for populating the ribbon flyout. When adding a new ScriptPart, the code checks if the script is available, if not the script is loaded. If available the default settings are read and added to the ScriptPart.

The script also has some code to deal with a possibly used minimal download strategy.

Things to know

I have tested the script using modern versions of IE, Firefox and Chrome. As I use jQuery so I hope I'm covered with browser support. As there could be many scenarios where ScriptParts can be used I am unable to test everything. For instance if a really old version of jQuery is used on the site.

If you find an issue, and can give me a good description of how this can be reproduced, then you can send me an email and I will see if I can fix it.