Sometimes, users edit a page in Canvas and the Design Tools sidebar won't load.  They even try using the keyboard shortcuts to launch the tools but nothing seems to work.  The most common reason for this is that the Design Tools Config code has been removed from the Canvas account theme's JavaScript file.  This may happen when an admin adds a new JavaScript file without combining the previous file's code into the new file.


One way to test this is to try loading the tools in the Canvas beta environment.  Since the beta environment does not update from production instantly, you can usually see Canvas with the previous JavaScript file which contained the Design Tools Config code.  If the Design Tools sidebar will load in beta, then you know that the necessary JavaScript was removed in production.


If you've determined that this is the case, follow the steps below to combine the previous JavaScript file with the new one.

  1. Download the production JS file (we'll refer to this as file A).  
    1. In production, go to the Canvas root account and choose Themes.
    2. Select the current theme.
    3. Find the Desktop JavaScript file area, right-click on View File, and choose Save Link As... to download the file.
  2. Copy the content from your beta JS file (we'll refer to this as file B).
    1. In beta, go to the Canvas root account and choose Themes.
    2. Select the current theme.
    3. Find the Desktop JavaScript file area and click on View File.
    4. Highlight and copy the content of the JS file.  It should include a section called Design Tools Config.
  3. Combine the two files together into one new file (we'll refer to this as file C).
    1. Open file A on your computer with any code editing software you like.  If you're not sure which program to use, try Notepad (Windows) or TextEdit (Mac).
    2. Paste the content you copied from file B at the bottom of file A and save it with a new name ending in a .js file extension (e.g. combined_file.js).
  4. Upload file C to the production Canvas theme.
    1. In production, go to the Canvas root account and choose Themes.
    2. You can either edit your current theme directly or create a new theme by clicking on the +Theme button in the top right and choosing to base it on the current theme.
    3. Once you're in the Theme editor, go to the Upload tab in the top left of the screen.
    4. Find the Desktop JavaScript file area and click Select.
    5. Upload file C.
  5. Save the Theme and name it however you see fit.  Then Apply the theme.
  6. Test to make sure that the Design Tools sidebar works now, and that the other applications that need JavaScript coding are still working properly too.

If you'd like any assistance with this process, reach out to support@cidilabs.com and we can walk you through it.