Solved Experience Editor JS issue with SxA Sitecore 8.2


During my preparation for Sitecore User Group meetup Hyderabad, I faced a challenge to demonstrate the SxA features. The issue was when I open up the Experience editor and switch the menu tabs nothing happens.

  1. I don't see the floating toolbox on the left that comes with SxA
  2. When I click on tabs nothing happens

Check the screenshot below

Menu click view and Experience Accelerator


Now, I wanted to solve this issue before the meetup. So, I started digging into the JS errors that appeared. Opened the F12 developer tools on Chrome and noticed the errors as shown in image below.

JS issues in Experience Editor with SXA


As you can see, there is a  Failed to load resource: /Styles/DragAndDrop/zgmover.css. I did a quick search in my Sitecore tree for the name 'zgmover' and found an item in the location "/sitecore/media library/Base Themes/Editing Theme/Styles/zgmover". So, I downloaded the file and placed it in the location "styles/DragAndDrop/" under website root folder.

This solved the resource load failed issue. But the Tab issue and floating toolbar are still not available. So, the next step is to stop bundling the JS file to locate which js-file has the issue.

So, after couple of searches in confg files, I found the below config file under App_Config/include folder
Sitecore.ExperienceEditor.config

The setting I updated the value to false is <setting name="WebEdit.EnableJSBundling" value="true" />
Once I did that, I was able to locate the issue is with "..\Website\sitecore\shell\Applications\Page Modes\LayoutDefinition.js"

After debugging the JS file, I was able to identify the issue at line number 39. The line has a for loop that iterates over the renderings of the device. And as there are no renderings it was throwing the
Uncaught TypeError: Cannot read property 'length' of error

I have updated the code @line 39 as below and soon the issue is resolved. When I asked about this issue in Sitecore slack chat I got a response that Sitecore ticket is already created for this. However, I don't have the details. Once I get those I can update here in the blog.

if(device.r !== undefined)
{
 for (var n = 0; n < device.r.length; n++) 
 {
   device.r[n]["controlId"] = "r_" + this.getShortID(device.r[n]["@uid"]);
   renderings.push(device.r[n]);
 }
}

Here is the screen with floating toolbar. Day saved :)
Floating Toolbar of SxA

Comments