Customize the ExperienceEditor Part 1 - Include your custom JS

Recently I had to customize the Sitecore ExperienceEditor. It was a very tricky experience mainly because nothing is documented officially and almost nothing on the blogs.
So I will write a series of post about this to help you in this task.
I want to customize the ExperienceEditor but I don't want to touch to the base JS files of Sitecore to have as few side effect as possible and still be able to upgrade to the newer versions.

Here is the different posts of this serie:

• Customize the ExperienceEditor Part 1 - Include your custom JS
• Customize the ExperienceEditor Part 2 - Override the Sitecore functions in the JS

To include my custom JS file the first thing I have try is add my JS into the Sitecore JS bundle \sitecore\shell\Applications\Page Modes\Ouput it seem that it is possible by overriding the method Sitecore.Web.UI.WebControls.WebEditRibbon.Render() but I didn't want to decompile the code and change the existing functionality.

My workaround for it is adding a checkbox into the view section of the ribbon. When you add those kind of buttons, you are able to attach a JS to this checkbox.

To do that:

• Open Sitecore Rocks
• In the core DB, go to /sitecore/content/Applications/WebEdit/Ribbons/WebEdit/View/Show
• Duplicate one of the child item of this node and change the fields you need to control the text
• Right click on the item, task design layout (shortcut: ctrl + u) 
• Click on Add Rendering 
  
• Search and select SmallCheckButton
  
  
• Edit the properties of you button and set the field. The one who is really interesting to include the JS is the PageCodeScriptFileName
  

Now you are able to do what you want in the JS. But don't forget that your JS is into the ribbon's iFrame. So if you need to access to the page elements or the Sitecore's javascript objects you shoud prefix by top. Example: top.JQuery("#container")

In the next post I will explain how to override the Sitecore functions in the JS.