Permissions Page improvements

[vrichter]

This idea has been developed and deployed to Canvas

Freeze the column headings when you scroll down the list of permissions so it is easier to know which permission you are adjusting.  Presently, one has to count columns and then remember which one to change, since the role names scroll off the page as one moves to the bottom of the ever-expanding list of permissions.

Comments from Instructure

For more information, please read through the https://community.canvaslms.com/docs/DOC-14928 .

[pcraig]

If you need to edit a permission on a role that's off screen when the page loads, clicking the permission "jumps" the page back to the default view, greatly increasing annoyance.  I'd almost consider this a defect at this point, I too would like to know where things stand.  We have a *lot* of roles.

[Jeff_F]

As we are sharing...  I went old school.  Everything can be fixed with a little tape or super glue.   Enjoy~!    

[millerjm]

Sweet!  I hadn't thought of that.  I have a label maker... that would make it extra fancy.  

[millerjm]

FYI:  a 34 inch wide screen monitor helps a lot with managing permissions.  Anyone managing permissions needs to put one in the budget. 

Of course, fixing this page would still be a better fix because even with a giant monitor, it's still impossible to tell which role you are editing without the post-its at the top and bottom of the screen, since the headers don't stay when you scroll...

[millerjm]

Here is another related feature idea: 

https://community.canvaslms.com/ideas/8320 

[Jeff_F]

Is a 32" good enough?  Anything larger means I may be viewed differently...   ;o)

[James]

 @millerjm ,

I haven't spent a lot of time looking at this, just a couple of hours this morning. I agree that having it act like the gradebook would seem to be the best solution, but upon further playing around, I'm not sure about that anymore. Anyway, here are a couple of other ideas that I thought I'd throw out and see if any of them would be workable.

Hide the other columns.

This would really only work if you wanted one at a time visible. But by hiding all of the other columns, then it would be the first and only one and the information would fit.

For example, let's say you wanted just the "Student TA" role, which is the fourth one.

You could hide everything except for the 4th role by pasting this jQuery/JavaScript into the console in your browser's Developer Tools (usually F12).

var keep=4;
$('div#role_tabs div.role-tab:visible table.roles_table tr > :nth-child(1n+2)').hide();
$('div#role_tabs div.role-tab:visible table.roles_table tr > :nth-child('+(1+keep)+')').show();
‍‍‍

It's a very quick hack and not well tested, but it hides all of the columns after the first and then re-enables the column specified by the keep variable (4, which is Student TA).

That gives me this

Now you can scroll without issue and you don't have to zoom out for institutions with lots of roles.

If that was a workable solution, you could add code to make it run automatically and then set it trigger based on clicking on the name of the role at the top.

Reorder the Columns

This one would take some more work, but there are libraries out there that let you drag/drop the columns to reorder them. Then you could drag the column you want to the front. If you had two roles that you wanted to compare, you could drag them both together at the front.

An alternative approach is to make the code run automatically and be triggered when the user clicks on the name at the top of a column. Then it would just move that column to the front automatically. Then if you wanted to compare "Tutor" and "TA", you could click on "Tutor" to move it to the front and then click on "TA" to move it to the front and Tutor to the second column.  This would probably easier to do than adding the external library to allow drag and drop reordering of the columns.

It seems that it could also be more powerful than just adding the always-visible top and side headers when you scroll as it would allow you to change the position of the columns to make comparing easier.

Like I said, the code there is a little harder. Here is some pure JavaScript that will move the role in position move to the front.

var move=4;
var rows = document.querySelectorAll('div#role_tabs div.role-tab[aria-hidden="false"] table.roles_table tr:not(.toolbar)');
if (rows.length && move > 1) {
  for (var i = 0; i < rows.length; i++) {
    var row = rows[i];
    if (row.children.length > 3 && row.children.length > move) {
      row.insertBefore(row.children[move],row.children[1]);
    }
  }
}‍‍‍‍‍‍‍‍‍‍

Again, if you like either idea, you would want to make it so that the column is determined by clicking at the top of the column rather than hard-coding it and then making the code run automatically on the page through the use of a User Script (Tampermonkey or Greasemonkey) or installing it site-wide for everyone to use.

Note: Sorry for those people who got this by email notification, I accidentally clicked Save before I got to add the code and images for the second example.

[millerjm]

Thanks,  @James   .  Your solution seems like a lot of work...  if I get annoyed enough while working with permissions, I'll monkey with it. 

For now, my low-tech method is making screenshots and removing the extraneous parts and then printing on 11x17 paper in portrait.  

[James]

I think you missed the point of the comment. I was throwing out a feeler to see if either one of those ideas was worth pursuing. I've got a lot of other projects I need to finish and didn't want to waste time on this one if it wouldn't meet the needs of people. The final product would be much more polished, but in case it wasn't worth pursuing, I wanted to get the proof of concept code out there in case someone did want to follow up.

Here's a quick demo of a more polished form of the second one. It takes me longer to explain what I'm doing than it does to actually do it and the entire video is only 18 seconds long.

Permission Sorter Demo - YouTube 

[kona]

I want this!!! This would make my life when working with permissions SO much easier!!