Sitecore SPEAK beginner having problems with Javascript inclusion

Question

I am trying to write my first simple Sitecore Speak Component.

Nothing fancy about it i just need to get started. So i create in Visual Studio my Speak Component and in Sitecore i have my rendering that is pointing to my component. This is all out of the box. I insert my rendering on my SPEAK layout and when i visit the page i get an error saying this

Anyone has an idea why? What do i have to do? I am using Sitecore 7.5.

My cshtml looks like this:

@using Sitecore.Mvc
@using Sitecore.Mvc.Presentation
@using Sitecore.Web.UI.Controls.Common.UserControls
@model RenderingModel
@{
  var rendering = Html.Sitecore().Controls().GetUserControl(Model.Rendering);
  rendering.Class = "sc-Test2";
  rendering.Requires.Script("client", "Test2.js");

  var htmlAttributes = rendering.HtmlAttributes;
}      
<div @htmlAttributes>

</div>

Answer 1

Basically the issue here is Sitecore SPEAK is unable to locate your javascript for the component.

It appears that you have your SPEAK component rendering and javascript in your own directory which is best practice. What you have to do is tell SPEAK where to look for your components. This is controlled within the Sitecore SPEAK config within the Include folder.

Here is an example of a patch include file to patch in directories for SPEAK to look for javascript components.

Set the source to the directory containing your custom components.The Deep = true parameters will scan subdirectories. Also note the category name here "MikeRobbins" in this example. Choose anything meaningful to your components, i would avoid using the Sitecore one not to impact sitecore standard components.

<?xml version="1.0" encoding="utf-8"?>
<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
  <sitecore>
    <pipelines>
      <speak.client.resolveScript>
        <processor type="Sitecore.Resources.Pipelines.ResolveScript.Controls, Sitecore.Speak.Client">
        <sources hint="raw:AddSource">
          <source folder="/sitecore/shell/client/MikeRobbins/Layouts/Renderings" deep="true" category="mikerobbins" pattern="*.js,*.css" />
        </sources>
        </processor>
      </speak.client.resolveScript>
    </pipelines>
  </sitecore>
</configuration>

Update your component CSHTML and set the userControl.Requires.Script("mikerobbins"..... part to your category name you chose above. see example below.

@using Sitecore.Mvc
@using Sitecore.Mvc.Presentation
@using Sitecore.Web.UI.Controls.Common.UserControls
@model RenderingModel
@{
    var userControl = Html.Sitecore().Controls().GetUserControl(Model.Rendering);
    userControl.Requires.Script("mikerobbins", "JsonDataSource.js");
    userControl.Attributes["type"] = "text/x-sitecore-jsondatasource";
    userControl.DataBind = "Json: json";
    var htmlAttributes = userControl.HtmlAttributes;
}
<script @htmlAttributes>
</script>

An example of this can be seen in my project here. https://github.com/sobek1985/SitecoreSPEAKBulkRolePermissions

Hope this helps, any problems give me a shout.