Global js ENV object available and what fields?

[themidiman]

I'm developing a custom theme and the global .js override file I'm working with depends on the availability of the ENV array/object and the existence of the COURSE field and the child long_name field.

let year = parseInt(ENV.COURSE.long_name.split(' ')[1]);

The home page of the course has this field, but the syllabus page does not.

Is there any documentation on what certain areas of a Canvas course provide certain fields in the ENV object?

What else can I do to reliably determine what the name of any given course with this custom theme applied on all pages within a course?

[jerry_nguyen]

@themidiman 

You can use jQuery to call Canvas API and determine the course name E.g.

var courseID = currentURL.match(/\/courses\/(\d+)/g);	//Regular Expression to get course ID from the current URL

//Call Courses API Endpoint	
$.get('/api/v1/' + courseID , function (response) {
	console.log(response.name); //Get Course (full) name from the response
});

[themidiman]

@jerry_nguyen , I appreciate the tip. Your suggestion's only going to work if the course instructor or students haven't given the course a nickname, because it's using the logged in user's preferences. My theme has to pull out our SIS naming convention which includes the year and term in it. If the individual user nicknames the course to 'Afternoon Biology' this will not work.

My original question is about the variances of the ENV global object. Somewhere someone's got to have a resource of what options are available to the JS engine of the browser and how they change from one part of a course to another. I'm reaching out to any of the Instructure developers who ought to be watching the discussion topics in this group.

[jerry_nguyen]

@themidiman 

The Courses Endpoint also provides the original name of the course and/or SIS ID - E.g console.log(response.sis_course_id) (You can also write console.log(response) to view all the data provided)

[themidiman]

@jerry_nguyen , Thanks!

While this does solve my theme .js override file logic problem, I don't want to mark this as solved because I'm still curious about conditions that change the information in the ENV global js object that is omnipresent throughout the Canvas app. I would still like for someone to see this thread who knows why ENV fields change from resource to resource and what fields are expected to be there on various native Canvas tools.

As noted before, ENV has COURSE.long_name on the home page but NOT on the Syllabus tool page.

Anyone have a resource reference that serves as official documentation for this?

[James · Accepted solution]

@themidiman,

When I talked with a Canvas engineer in April 2017, he told me that the ENV variable was not managed by a single group. If a page (like the syllabus) needed certain functionality, a quick fix was to add it to the ENV variable for that page. I also gathered (this may be my take on it) that they were not encouraging adding new things to the environment, but would rather people "do it right". If I recall, the mobile apps didn't have an ENV to work with.

The absence of formal public documentation makes it fall under Instructure's "use at your own risk" policy, which is really more of a "we would rather you not use this at all, but if you must, use at your own risk, realizing nothing is guaranteed and don't complain to us if something breaks" policy.

Canvas may have something internally and just chosen not to share it, but it didn't sound like it.

None of that gives you a list, so I took a look at the source code.

It seems that most of the ENV variable is created by the use of js_env and within a controller file. Many of them appear in the application_controller, which would make sense. Starting in line 202 of that file, they define @js_env and then add about 27 properties. That might be the closest there is to a global list in a single spot, but then the js_env is modified several other times in the file, so even that initial list isn't complete.

In other files, such as the announcements_controller, you will see things that are added for the announcements.

[themidiman]

@James as usual, you are a rock star on the dev forums. I miss having the ability to talk to actual engineers at Instructurecon, and I hear that next year the virtual only Instructurecon is not going to be a thing. As long as we have your experience looking for unanswered questions in this forum, that helps a lot!

Thanks for pointing out the source code and your experience. Looks like the only reliable way is for the theme to make an API call as @jerry_nguyen pointed out.

Thank you both!