Clever Geek Handbook

Sitecore SPEAK newbie having problems enabling Javascript

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

Nothing special, I just need to get started. So I create my Speak component in Visual Studio and in Sitecore I have a render that points to my component. It's all out of the box. I insert my render into my SPEAK layout and when I am on the page I get the error enter image description here

Anyone have an idea why? What do I need 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>
+3


source to share


2 answers


Basically the problem is here: Sitecore SPEAK can't find your javascript for the component.

It looks like you have the rendering of the SPEAK and javascript component in your own directory, which is the best practice. What you need to do is tell SPEAK where to look for the components. This is controlled in the Sitecore SPEAK configuration in the Include folder.

Here is an example patch that includes a directory patch file for SPEAK to search for javascript components.

Install the source to the directory containing your custom components. Options Deep = true will scan subdirectories. Also notice the category name here "MikeRobbins" in this example. Pick something meaningful for your components, I would not use Sitecore to avoid affecting the standard sitecore 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 CSHTML component and set 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 cry.

+7


source


You can also specify the full javascript path in the Requires.Script method.



rendering.Requires.Script("/sitecore/shell/client/MikeRobbins/Layouts/Renderings/Test2.js");
+1


source






More articles:


All Articles