To hopefully make it easier for observers with multiple students in Canvas to manage their students, we created custom JavaScript code to sort the "All Courses" page by student. This way, when an observer loads the all courses page, they will see separate lists for their current courses, and each of their observed student's current courses. This also applies for past courses, but not future courses.
Unfortunately, this code does have some limitations, and it will not show the color icon next to courses names, nor does it show the term column. Additionally, the code is set to not run for anyone with the "teacher" or "admin" role in Canvas, even if they are also an Observer.
The following line of code can be called within window.onload() in the Canvas custom JavaScript theme file to automatically run the code once the the page has loaded:
$(document).ready(function(){validateObserverRole()})
Additionally, in order for the code to be able to determine current enrollments, the term ID for each active term in the Canvas instance must be added to the array in line 213 as comma separated ints where it says "ENTER ACTIVE TERMS HERE." This array would need to be updated when active terms change in order for the code to correctly determine the current courses.
The attached text file includes the JavaScript code.
I also created an idea conversation here to recommend this as a native Canvas feature:
Sort Observer All Courses Page into Different Sections by Student
