Add an action button to the Grade page

Jump to solution
Community Explorer

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

Labels (1)
1 Solution
Community Champion

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>

 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;


View solution in original post