Add an action button to the Grade page

[fabiocunha]

I'd like to create an action button in the top part of the "Grade" page.

Is it possible to add an action button on the top of the page using a resource from Canvas?

This button will communicate with an external API(created by me) to sync grades between Canvas and other system created by the University that I work.

I want to create a new action button in the red area, is it possible to do that?

Best Regards

[bbennett2 · Accepted solution]

Adding custom UI elements has gotten tricky because Canvas is using frontend frameworks that dynamically create and update page components. The gradebook looks like it has some static `divs` you may be able to target with a userscript (in TamperMonkey, for instance) and eventually a custom script in your Canvas template.

<div class="gradebook-menus">
  <span data-component="GradebookMenu" data-variant="DefaultGradebook">...</span>
  <span data-component="ViewOptionsMenu">...</span>
  <span data-component="ActionMenu">...</span>
</div>

 You could use some Javascript to get the gradebook-menus element and then insert whatever HTML you would want for your button.

function doSomething() {
  // do your API call, etc
}

let container = document.querySelector(`.gradebook-menus`);
let button = document.createElement(`button`);
button.innerText = `Click Here`;
button.onclick = doSomething;

container.appendChild(button);

[fabiocunha]

I understand the Javascript code that you wrote, but where can I put this code on Canvas?

[ColinMurtaugh]

That would need to be added to your Canvas theme, either in the root account of your instance, or in a sub-account. Themes can include a custom javascript file and a CSS file that are included on all pages within that account/sub-account.

--Colin

[bbennett2]

@ColinMurtaugh is right: if you want it available for all users in Canvas, it'll need to be part of your theme in the admin panel. If it's something for personal use, you can use a Chrome/Firefox extension called Tampermonkey. You define which pages to run on and it injects userscripts (Javascript) that can act on that page. It's useful for proof of concept work for larger projects or just to make your own work in Canvas (in this case at least; you can use it anywhere) more productive.

[maguire]

If it does not have to be on the Grades page, it is really easy to add a button to the left navigation menu that can invoke your LTI tool to report grades, see the example below:

 The example to the left is from the production Canvas instance. Ladok is a student information system run by a consortium of Swedish universities.

A program to add such button is add-external-tool-for-course.py at https://github.com/gqmaguirejr/Canvas-tools

Usage is add-external-tool-for-course.py course_id tool_id 'navigation_text'

Here is another example (from an instance of Canvas running in a VM - it has only fake students) with an AdminIT button being pushed and involving an external LTI tool:

AdminIT button example

[fabiocunha]

Hi @maguire 

I add a link on the left navigation menu for another system that I create, but in this case, I really need to add the link inside the Grade page.

[maguire]

Could you say more about why you need to have it invoked on this page? Is it more than just avoiding one click to go to any page with the left navigation menu?

[fabiocunha]

I'd like to invoke in the Grade page because all teachers edit grades on this page and I guess the function that will I'll invoke is related to grading edit.

[maguire]

When I enter grades into the external grading system I generally batch them, so I want to push as many grades as I can at one time. Hence when I am finished entering grades and now ready to report them - going to another page of the course is not a high price to pay. 

If I don't batch the export to the external grading system, then I have to either repeat the export function (which requires some interaction) or I have to login multiple times to the external system (since to "attest", i.e., confirm the grades, you have to login again for each batch that is reported).

Since the LTI tool will only have the course_id and user_id of the person that called it - it does not have information about which student's grade or even which assignment you have just graded, it will have to do get the changes from the Grade change log or the Gradebook history log (although potentially it could limit the updates to the user who calls it and the date it is called. However, this probably risks changed grades not getting reported.

Best of success in adding the button to the Grades page. I will be very curious about what you have done - as I have long wanted to have functionality that is invoked when an assignment receives a passing grade. [Potentially this might be done via webhooks. This could potentially eliminate the need to have a button at all!]