Has anyone been working on scripts for the new Beta UI?

[jblumberg]

There are some very common branding and UI scripts that a lot of institutions run that will need to be rewritten with the change of UI.  Most of these are pretty basic changes.

One in particular:

   A lot of schools have added extra pull down menus to the top navigation menu.  Our institution added "Library" and "Support" here.  We will need to move these to the left side navigation replacing the with icons.

   I know we got our code from our implementation manager from Instructure... the nice thing about this is that most institutions had similar code.  I wonder if there will be any sample code for this that we could base our implementation on.

Thanks,

Josh

[jnuckles]

For anyone trying to figure out the side menu tray. This is what instructure is using. I haven't figured out how to use it but atleast it gives us some clues.

instructure-react/react-tray-example · GitHub

Jeff

[tdelillo]

Canvas Community saves my bacon yet again. My JavaScript skills are nil, and the person who wrote the script to add a custom menu to our global nav in the current (old) UI is long gone. Because of this thread, I'll at least be able to add individual custom links to the global nav when we go live with the new UI next week.

Thanks  @kenneth_larsen ​ and the rest of the gang!

[powellj]

Has anyone gotten the GitHub script working in their Canvas environment yet? We really need the slide-out menu since we have several links that need to be added like we have in the old UI. I can get  @kenneth_larsen 's code to work fine, but nothing happens when I load the GH code. jnuckles​, were you able to figure it out?

[tdelillo]

I'll be following this thread eagerly, hoping someone does figure out the menus. In the meantime, I'm also wondering if anyone has tweaked the code above to make the links open in a new tab/window? I just realized that our old global nav custom links DO open a new tab/window, and the ones I put together for the new UI don't.

[joseph_allen]

I think I know the answer to this, but just want to validate with others.... any custom menu item you build in the new UI or the old UI for that matter is not visible on the mobile app.  Correct?    Assuming yes, is there any way to add items to the mobile app?  I have used the LTI redirect and that works.  But the global JS doesn't work.  I've seen a js for mobile in the new UI interface.  Is that a possibility?

Thanks,

Joe

[jblumberg]

Joe,

You are correct...  No global CSS or JS applies for the mobile app.  Instructure says they may address this at some point in the future.

Josh

p.s.  The New Theme Editor gives a confusing message about mobile.  The custom JS & CSS is for mobile browsers and does not apply to the dedicated mobile Canvas app.

[kenneth_larsen]

Thanks for the clarification  @jblumberg ​, I was really hoping that the custom JS & CSS was for the mobile app but hadn't really had time to test that theory. Hopes crushed, moving on.

[kenneth_larsen]

 @tdelillo ​,

I have revised the function to include the ability to have the new link open in a new tab. Here is the new function:

function addMenuItem (linkText, linkhref, icon, target) {  
  var iconHtml = '',  
  itemHtml,  
  linkId = linkText.split(' ').join('_'),
  newTab = '';
  if (typeof target !== 'undefined') {
    newTab = 'target="' + target + '"';
  }
  if (icon !== '') {  
  iconHtml = '<i class="' + icon + '"></i> ';  
  }  
  itemHtml = '<li class="ic-app-header__menu-list-item ">' +  
  '  <a id="global_nav_' + linkId + '" href="' + linkhref + '" class="ic-app-header__menu-list-link" ' + newTab + '>' +  
  ' <div class="menu-item__text">' + iconHtml + linkText + '</div>' +  
  '  </a>' +  
  '</li>';  
  $('#menu').append(itemHtml);  
}  

To create a link that opens in the current window, use the following (same as original):

addMenuItem('Library', 'http://mylibrarylink.edu', 'icon-educators');

To create a link that opens in a new window, add an additional parameter to the end:

addMenuItem('Library', 'http://mylibrarylink.edu', 'icon-educators', '_blank');

Just in case this is not common knowledge to those reading this response, adding target="_blank" to an anchor tag will cause that link to open in a new window.

I fixed the part of the code that pasting into this reply usually breaks and I didn't see any new breaks, but let me know if there are any issues.

[tdelillo]

 @kenneth_larsen ​- You are a Canvas panda rock star.

I thought about trying to use my old friend "_blank", but without your other tweaks to the function it would have been useless. Thank you sooooooooo much!

[bgibson]

I think it would be nice to add the following items to the slide out "Admin" menu:  Show Courses from the Term, Find a Course, Find a User, Add a  New Course, Add a New User, and Open Theme Editor.  All the right-side menu items, that now only show after you have clicked on the  primary account link.  That would save a click, plus the time & effort to scroll across the page to click on any of the above functions.  Not much time or effort when you do it once, but as a Admin, you repeat these small tasks repeatedly each day -- week -- month -- year.  Click on Admin, and the above functions are immediately to the right of your mouse pointer.