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
Used as Key in WebPart based script reference. Does not have any impact on Header based rendering
Decides the rendering type.
Header / WebPart
Accepts reference to JS, CSS file, JS script block, CSS block. Also accepts [SITE_URL] and [SITE_COLLECTION_URL] as tokens in reference URLs.
If set as false, content associated with that key won’t be considered for injecting into the page
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
Note: This mode uses delegate control to inject script into page header. So this option will not work in Office 365 and Sandbox based deployments as Sandbox solutions does not support delegate controls.
Result as seen in FireBug console of FireFox
Download Solution and Source Code - SP 2013