Script Box WebPart for SharePoint 2013 and 2010 to easily refer JavaScript and Style Sheets in SharePoint Pages

This Script Box WebPart (Not the OTB Script Editor WebPart) provides easy options to refer scripts and CSS in SharePoint 2013 and SharePoint 2010 Applications. Apart from using it as a WebPart, this can also be used as a delegate control to inject scripts and CSS into SharePoint Pages without editing the pages.

Why not OTB Script Editor WebPart?

The above would be the first question that might crop in mind while having a look at the title of this blog post. This SharePoint Frontier Script Box web part differs from OTB Script Editor in following aspects.

1. Provides option to inject Scripts and CSS without editing the Page

2. All scripts and CSS are controlled by a configuration list, which enables to manage assets across application at ease.

3. Script Box can also be added as WebPart to a page.

4. Binding script and CSS are based on reference keys rather than actual content. Actual content is stored in a SharePoint List and value provided in title column is used as the key to inject the actual content.

5. Allows tokens for site and site collection URL in script and CSS file path.

6. Once added to a Page, further changes to the list of scripts and CSS to be referred on that page can be done without editing that page.

Deployment and Configuration

1. Download the WSP solution from the bottom of the blog post and deploy it in your SharePoint environment.

2. Once deployed, this will add a Site Collection scoped Feature named “SharePoint Frontier Script Box WebPart” and a Site scoped feature named “SharePoint Frontier Script Box Delegate”

3. Activation of “SharePoint Frontier Script Box WebPart” feature provisions a Web Part named “SCRIPT BOX”. This WebPart can be used in a page to inject scripts and CSS.

4. Activation of “SharePoint Frontier Script Box Delegate” creates a SharePoint List named “Script Box Params”. This list acts a reference repository and has reference to the actual content that has to be injected into the page

5. To add reference to scripts, open the “Site Box Params” list and click “Add new item” .

6. The below table explains the columns available in “Site Box Params” list and its usage

Configuring WebPart based Script Injection

1. WebPart based rendering mode requires Site Collection scoped Feature named “SharePoint Frontier Script Box WebPart” to be activated.

2. Add a new item to the “Script Box Params” list (created on activation of feature) with target set to “WebPart” and set the value for title field as “Site Assets” and add a script or link element to content column(refer image above).

3. Edit the page which you would like to inject the script that you have referenced in “Script Box Params” list.

4. Add the WebPart named “Script Box” located under the category “SharePoint Frontier” to the page.

5. Edit the Web Part and set the Script ID property to “Site Assets” (The value for Title column provided in Script Box Params List)

6. Enable “Refer Script From Root Site”, if you would like to re-use the “Script Box Params” list located in root site of the site collection rather than pointing to list available in current web.

Configuring Delegate based Script Injection

This method injects Scripts and CSS into page header via additionalpageheader delegate control. Any item added to the “Script Box Params” list in the current web with target type set to “Header” is injected into page header section. This method does not require the page to be edited to inject the content , as the script injection is performed via delegate control

Result as seen in FireBug console of FireFox

Download Solution and Source Code – SP 2013