Multiple Lines of JavaScript

[RobertGibson]

Can we add multiple lines of JavaScript (two or more different lines of code that do different things) into a single theme editor JavaScript input field?

[Chris_Hofer]

Hello @RobertGibson ...

I'm a little confused by your question.  I assume that you are a Canvas admin at your school?  If so, are you referring to the area described under the heading "Upload Custom Files" in this Guide: How do I upload custom JavaScript and CSS files to... - Instructure Community (canvaslms.com) ??  If you are wanting to upload a custom JavaScript file, you can create the file offline, and then upload any code you put into that file to the "JavaScript file" area described in the link I provided.  I could be misinterpreting your question, but it sounds like you were maybe trying to just add one or two lines to that text field?

For example, in our custom JavaScript file, we have a bunch of code that is used for our Design Tools that we purchased from Cidi Labs.  We also have a few lines of code that we just applied today to the footer area of our Canvas Dashboard that displays links to our College website and some of our social media channels.

I'm not sure if any of this is helpful or not...but thought I'd give my $0.02 ... for what it's worth.

[RobertGibson]

Chris, for example:

We may have a line of code that suppresses course import. And another that suppresses changes to the course navigation menu. etc. etc.

I'm trying to determine 1) how to enter those because they are, in fact, different files. They are not a singular JS file. There may be two, three, four of these. So, 2) are they just entered one after another on different lines in the theme editor? Merged into on JS file?

A little confused about that. The theme editor only lets you upload one file...or so it appears.

Same applies to CSS files that do things like switching off the course card customization.

[chriscas]

Hi @RobertGibson,

You do need to combine everything into a single javascript file and a single css file (per account anyways).  Sometimes it's obvious how to do this, other times it can be more challenging if using functions (and especially if code repeats).  When doing this you also need to ensure your javascript handles errors very well, as a problem with a single line in the combined code can just cause the entire script to fail.

-Chris

[chriscas]

Hi @RobertGibson,

You're uploading a javascript file into the theme editor, and that file can essentially have as many lines as you like.   I think our current file has at least a hundred lines and works fine.  Whenever you're working with custom javascript, you'll definitely want to make sure you test on different browsers and operating systems to ensure everything works, and you'll need to keep a close eye on Canvas releases to make sure none of the changes being made by Instructure negatively impact your JavaScript.  I think most admins will tell you it's better to keep your file as small as possible because of that, but there are no hard limits as far as I know.

-Chris

[Code-with-Ski]

It sounds like the theme modifications you are doing so far are fairly short scripts, so putting them in one file would probably make the most sense currently.

If you want to use multiple files, especially if you make a modification that is significantly more complex and/or only needed by select users, you could look into using imports and dynamic imports.  You would need to host the files in a location accessible by Canvas and format your files appropriately to work for this process.  You would also still need to upload one script file to the Canvas theme that would manage the imports and any other code within the file.

• import - JavaScript 
• import - CSS 
• import() - JavaScript *Dynamic imports 

If you take this approach, it is important to evaluate the security, reliability, and loading times.

Some other options to consider:

• You could build an LTI to integrate with Canvas and then you will have more freedom to organize your code.
• Some users utilize user scripts and Tampermonkey to load scripts locally to make changes to Canvas interface.
  • This approach often seems to be used by admins so they can add functionality to improve their work processes without needing to add it to the Canvas Theme file that loads for all users.
  • Be sure to evaluate the risk and security related to using user scripts and Tampermonkey
• You can also build your own browser extension to make modifications.
  • You have the freedom to organize your code as you like with multiple files.
  • You don't have to actually publish the browser extension, unless you are looking for an easy way to share it with others and distribute updates.
  • I use a local browser extension that I add in Developer Mode for some private customizations that not all users need.
  • One limitation I have found with this is I'm not able to access the ENV data, which includes some useful information without needing to make an API call.  There may be a way to access that I haven't discovered yet, but I think this is by design for browser extensions for security.  For now, I use other approaches to getting the data I need that would have been found in ENV.