Celebrate Excellence in Education: Nominate Outstanding Educators by April 15!
Found this content helpful? Log in or sign up to leave a like!
Hi, Canvas developers! Our UI team is working on way to improve InstUI, Instructure's UI library, from an open source standpoint. If you are using InstUI in your projects, our UI team would like to hear from you!
Please reply and share your experience. Some things we'd like to know:
...and anything else you'd like to contribute about InstUI.
Thanks!
Erin
Hi Erin,
First, I'm excited to start looking into what instui can do for projects, and I appreciate you sharing this resource. However, looking around, I had no idea this even existed, and according to the Community Search, this is the very first topic to mention InstUI. https://community.canvaslms.com/search.jspa?q=InstUI
When was this released? It's current version 5.8.0...
I'd love to answer the bullet points above, but will need to take some time to evaluate and possibly work InstUI into some projects.
The link in the OP are for the docs, here's the repo...
GitHub - instructure/instructure-ui: A UI Component Library made by Instructure, Inc.
Hi, Robert,
We know that some customers may have been using it, but we actually don't know much. We know some customers were previously aware of the Canvas style guide and used that until InstUI was created, but we have never promoted it because InstUI is designed for the engineering department and requires using React components. However, we want to make some improvements if anyone IS actually using it and just want to learn more about how it is being used. And if not, we're actually okay with that because of that whole customization management thing when you choose to create your own custom tools...
Thanks,
Erin
Hi Erin - We started using InstUI earlier this year and have integrated it (v5.5.0) into 3 of our LTI apps. The main reason for using InstUI was our switch to React and desire to provide a seamless user experience with native Canvas style. Specifically we have used the below components so far:
Some of the most helpful components have been the layout components, autocomplete select, and data/time inputs.
Regarding improving our InstUI experience: We started with v4.7.0 release and have upgraded several times. There have been a few upgrades that have broken behavior not mentioned in the release notes. Where would the team like this feedback?
Thank you and great work!
Hi, Ismail,
Go ahead and post them here if you wouldn't mind. Our UI team is aware of this thread and check it periodically!
Thanks,
Erin
Hi Erin Hallmark,
This is coming from an end user rather than developer, specifically Course and Instruction Designer.
Our school serves students with Special Needs (Autism). To ensure that the Online Learning Environment on Canvas is autism-friendly, our e-Learning Team is putting in efforts to ensure that the learning interface is consistent and easy to understand by our students with autism. The contents need to be properly chunked into small bite-size portions to be easily readable and understand by our students with autism.
We use the following UI components from the Style Guide to help us organise and chunk the contents:
Our e-Learning Team would be interested to be updated when will InstUI 2.0 be available on Rich Content Editors so that our Course Designers can use it on our course contents.
Here are some examples on how we use the (soon to be deprecated) UI Components on our course pages:
Accordion
Tabs
Modal Popup
General Layout of Contents
Hi, Daniel,
We're appreciative of your feedback! I've made sure that our UI team is aware to help them plan improvements to InstUI accordingly.
Thanks,
Erin
I am not using it at all. As an end user, I could follow the old style guide because I am looking for simple things to organize my content
However when I access this information, it appears that the functionality to add buttons, tabs, and accordions has gone away. This is functionality that I need because I have lots of information to organize since our lecture and lab classes are taught under that same class section number. This just made things harder for me and this is especially problematic since we are switching to Canvas on May 15th, 2019.
I need more support in the area of organization. Please create more documentation and training for organization of materials as you plan the future. I feel like I am in the wild, wild, west of design and quite lost at that.
Thanks for your feedback, Joressia!
Erin
This. All of this. ^^^^^^^
The old styles--and, just as importantly, the old style guide--were accessible to users in the context of courses. Instructional designers could use the elements to create engaging, responsive, accessible course designs that actually enhanced education and user experience, and they could do it completely within the context of a course, using basic ID knowledge.
InstUI is only available in the context of LTI, which means it can no longer be used by ID's to create courses; it can only be used by developers to create tools that exist outside of Canvas itself. Worse, unlike the former standard, straightforward, HTML/CSS implementation, the ReactJS classes are complete gobledeygook to anyone who isn't a full-time React developer, and who can afford those?
While I'm sure it's great for third parties who want to sell institutions pricy workarounds for the soon-to-be insurmountable shortcomings of Canvas's lackluster editor, this makes it useless to most institutions, and, frankly, may make *Canvas* useless for many institutions. If making successful user experiences is going to mean ripping out more and more modules and replacing them with custom external tools and hiring web developers to supplement the instructional staff and maintain the mess of spaghetti code, what is the attraction of Canvas, and particularly SaaS Canvas, in the first place? If we're going to recreate Moodle and all it's problems, at a certain point we might just as well go back to the original...
I *really* hope the designers realize their mistake, here, and refocus on their actual users in the actual Canvas UI before they put too much more effort into making things easier for third-party vendors creating LTI tools.
+1
I guess as an end-user, instructor, I am very confused. So, you deprecated the old tools, but have not fully rolled out a new solution? Am I understanding this correctly? What are the thousands upon thousands of instructors, TAs, and staff support members with no React background or access to do now that we can't customize our own course pages?
Hi Erin,
After this weekend's release broke all our tabs and accordions, I tried to follow the links to InstUI. It is only accessible to programmers. The ease of use of the style sheets is now gone and I don't see an easy solution to fixing our tabs and accordions layout. What was the thinking on releasing it without putting the rich content editor interface in place? From the comments I've been reading, I believe you have thousands of instructors scrambling today to make their content layout usable.
Hi, All,
Accordions were removed from jqueryui in the Canvas style guide, which has been deprecated for some time. If you need help with accordions in your existing content, here are some resources:
Thanks!
Erin
This is the solution we used and probably @kenneth_larsen mentions in #comment-140821 for 4/20 Release Notes...
Just popping jQueryUI into Canvas may now have unintended consequences.
If you do this, expect issues, triage your content, and rip off the bandaid quickly.
Hi all,
This is what we have done to keep our Accordions working. Hope this solution will be helpful to everyone.
/* JQuery Icons
/* ----------------------------------------------------------------------------------------------------*/
/* states and images */
.ui-icon { width: 16px; height: 16px; }
.ui-icon, .ui-widget-content .ui-icon { background-image: url("https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/images/ui-icons_444444_256x240.png"); }
.ui-widget-header .ui-icon { background-image: url("https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/images/ui-icons_444444_256x240.png"); }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon, .ui-button:hover .ui-icon, .ui-button:focus .ui-icon { background-image: url("https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/images/ui-icons_555555_256x240.png"); }
.ui-state-active .ui-icon, .ui-button:active .ui-icon { background-image: url("https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/images/ui-icons_ffffff_256x240.png"); }
.ui-state-highlight .ui-icon, .ui-button .ui-state-highlight.ui-icon { background-image: url("https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/images/ui-icons_777620_256x240.png"); }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon { background-image: url("https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/images/ui-icons_cc0000_256x240.png"); }
.ui-button .ui-icon { background-image: url("https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/images/ui-icons_777777_256x240.png"); }
.ui-widget { font-family: Arial,Helvetica,sans-serif; /*font-size: 1em;*/ }
.ui-widget .ui-widget { /*font-size: 1em;*/ }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Arial,Helvetica,sans-serif; /*font-size: 1em;*/ }
/* Customised Styles for Accordion
/* ----------------------------------------------------------------------------------------------------*/
.ui-accordion h3.ui-accordion-header { padding: 5px 20px !important; margin-bottom: 0 !important; }
.ui-accordion .ui-accordion-content { padding: 15px 15px 30px !important; }
enhanceable_content.accordion,
.accordion { display: block !important; height: 100%; margin-bottom: 30px !important; clear: both !important; }
// Initialise Accordion within Canvas
$(document).ready(function(){
$('.enhanceable_content.accordion').accordion({ heightStyle: "content", autoHeight: false, collapsible: true, active: false });
});
$(window).resize(function(){
// update accordion height
$('.enhanceable_content.accordion').accordion( 'resize' )
});
Thank you, thank you, thank you!! This has worked wonderfully for my situation. I really appreciate your help.
@danielcktan 's solution will probably work better for most institutions than what I did since what I did ties into the bigger Cidi Labs DesignPLUS Design Tools. However, you may want to test the Canvas Embed Image tool in the rce toolbar to make sure you can still add files from the Canvas course or Flickr. When I loaded jQuery back into Canvas, it broke that functionality. Granted, I was adding more than just the accordion JavaScript so you might be good but I thought I would pass that on as something that was an unintended consequence.
Thanks @kenneth_larsen .
I tested my environment and confirmed that the Image Embed Tool for inserting images from Canvas and Flickr works.
The search field for Flickr image insert seems to behave weirdly as I cannot see the words input into the search field. But the search term is captured.
@kenneth_larsen and @danielcktan ,
Thanks for the heads up! I am seeing the same as Daniel. The search box is there. I can type search terms but the text doesn't display or even highlight. I can search though and the results do populate.
I did a quick look at the CSS and found that there is a "font-size: 1em;" that if I remove it the text field displays.
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
font-family: Arial,Helvetica,sans-serif;
font-size: 1em;
}
Not sure if that effects anything else yet.
Thanks @matjenn64 .
This fixed the Input field text issues as well as the height issues. This portion of the CSS is causing a conflict to existing CSS on Canvas.
I have updated my instructions to include your fix.
Hey @danielcktan ,
It looks like the update this weekend is causing problems with this code in SpeedGrader. I had to pull the .JS code from my custom file. Are you having any issues on your end?
Hi @matjenn64 ,
I have not received any feedback from my users.
Could you share in detail on what went wrong on Speedgrader?
The issue is with the student drop down. It is displaying on the left side of the screen. I though that it was a CSS issue at first, but it only fixed once I removed the JQuery UI code from the .JS file.
Hi @matjenn64 ,
Thanks for sharing. I checked the Speedgrader UI at my end and there are no issues with the dropdown menu.
Such UI issues is usually due to conflict in CSS. If it is due to JavaScript, there is a higher chance the menu will not work at all.
May wish to check your CSS to see if there is any conflict with the attributes and values of the following CSS Class:
.ui-selectmenu-menu
.ui-selectmenu-open
I will monitor this possible UI issue at my end as well.
Thanks!. Now that I am back at work, I can dig a bit more into it. I'll let you know what I find.
So, I have done a lot of tweaking to both my CSS and JS files and it definitely looks like something in the JS file. If I add only the JS file and and CSS from the jQuery UI download link you list above. I still get this issue. In fact, I still get the issue even if I leave the CSS out altogether. Really not sure what is happening. Could there be different settings on the jQuery download that need to be selected?
@danielcktan or anyone else that might be able to help,
Things were going great until today. For some reason, in Chrome, I am getting the following error message:
TypeError: $(...).accordion is not a function
on this line:
$('.enhanceable_content.accordion').accordion({ heightStyle: "content", autoHeight: false, collapsible: true, active: false });
This is stopping a lot of other things from working (such as auto-open inline of files and displaying of videos created using the Canvas RCE media recorder), but only in Chrome. Everything still seems to work in Firefox and Edge.
I can remove the code block, but then the Design Tools by @kenneth_larsen , that we rely on very heavily, becomes non-functional.
Any thoughts?
There are a couple of routes I could go with this. I don't know your exact layout, but I'm going to start by assuming you are using @danielcktan 's post from April 30, 2019.
Step 4 says
Copy the JS code (jquery-ui.js) and Initiation code (below) required for JQuery UI Accordion to the Custom Javascript before uploading the file to the Theme Editor.
If you have copied the JS code from the jquery-ui.js file into your custom global JavaScript, make sure that your $().accordion() call is after it. I don't know how you have it loaded, but if you use var to define jQuery UI, then the function is hoisted to the top of the file and the order doesn't matter. If you use const or let, then the order matters.
If you copy/paste the jQuery UI code directly from the file, as Daniel said, then it's using an IIFE and gets invoked immediately. However, the $(document).ready() is also an IIFE because the document is ready before it ever gets to your code. Placing your code after the code that loads the accordion code should make the accordion code available. I'm not 100% sure on this as the jQuery UI code as an IIFE that has another function after the factory call, but if your code is before the jQuery UI code, then definitely make the accordion portion from jQuery UI come before anything that references it.
The second thought is the one I went to first, so I'll continue like I didn't even write the first part.
I can't say for sure, but this sounds like the issue that has been biting people for about a month since the October 2019 release. Part of their optimization involves changing the order scripts are loaded in so things that you think were available may not be available when you want to use them anymore. For my user scripts, it completely broke things that relied on jQuery. Those aren't supported by Canvas, so I had to not rely on my own versions. They have said that jQuery will be available before your user scripts are ran, but I cannot verify this because we don't have any custom global JavaScript using jQuery.
What's happening is that your document is ready before your other scripts have loaded. You will note that none of my code uses $(document).ready(). That's because Canvas promised us that the jQuery would be available when the document was ready, so it was a redundant check. Now, with the optimization, it's downright dangerous. The document is ready before most of the scripts have been loaded. That means that much of the content that Canvas dynamically generates has not been generated with the content is ready.
If you have to have accordions, a safer approach would be to load the jQuery UI to get the Accordion and then launch it after the script has been loaded, rather than when the document is ready. This also has the benefit (this is arguable) of not having to load the jQuery accordion code on every single page. Yes, it's cached, but you could decide to load it only on content pages and save some space in the custom global JavaScript.
If you're dynamically loading the Jquery UI code, rather than including it in the custom JavaScript, then it may not have loaded before you try to invoke it. In this case, you might want to make the launch of your accordion code depend be part of the .success() or .complete() portion of the code that loads the script.
I used to use the jQuery getScript function to do this, but I recently read that wasn't the best way. Now what I do is check to see if the function (accordion for you) exists and if not load it.
This code is untested with accordions, but it's based on some of the modifications I had to make after October 2019 to get my scripts working.
What it does is check for the existence of the accordion function before it tries to execute it. If it's not there, it loads it and once it's loaded, then runs the code to do the activate them. If it already exists, then it skips the loading and just activates it.
(function() {
'use strict';
if (typeof jQuery.fn.accordion === 'undefined') {
const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/jquery-ui@1.12.1/ui/widgets/accordion.min.js';
script.onload = function() {
activateAccordions();
};
document.head.appendChild(script);
} else {
activateAccordions();
}
function activateAccordions() {
$('.enhanceable_content.accordion').accordion({
heightStyle : "content",
autoHeight : false,
collapsible : true,
active : false
});
}
})();
If you only wanted to run it on content pages, then you could insert this code after the 'use strict'; line.
if (!/^courses\/\d+\/pages/.test(window.location.pathname)) {
return;
}
A third possibility is that jQuery itself isn't available. If that's the case, then things get harder still. That would, at least at this stage, be a support issue as they've said that it will be or that they'll let us know before they remove jQuery.
If jQuery is loaded, but jQuery UI isn't loaded yet, then the example code should load it, but then you may have Canvas code come back and override parts of it. In this case, you could use the code above, but change the script.src line to use the jQuery UI distribution package rather than picking out just the accordions from jQuery UI.
In the meantime, a really quick way to get your code back up and running with the accordions if they're unavailable is to wrap your call in a check to make sure the accordion is available. For example, like this:
if (typeof jQuery.fn.accordion === 'function') {
$('.enhanceable_content.accordion').accordion({
heightStyle : "content",
autoHeight : false,
collapsible : true,
active : false
});
}
Thanks for the detailed reply @James ! I have been out of the office for the holiday, but I got some time at home to look at the new community.
I had actually tried moving a few things around before I left work on Friday and was able to get this to work. I moved the entire block of code to a secondary .js file that was being called from the main sub account .js file. I also moved the initialization code (from step 4 above) to after the jQuery code last Friday afternoon (which you recommended) and found that this fixed the issue. Imagine that, order matters. It’s still funny that some browsers worked and others did not.
As always I appreciate you response and hope you have a Happy Thanksgiving!!
Hi @mjennings ,
The error is due to either:
As the Canvas environment for different instances is different, I initially thought placing the custom JQuery UI script to the Custom JS file would be a clearer explanation and safer bet for most people.
For our Canvas environment, we use the following approach:
You may wish to give our approach a try:
/* ----------------------------------------------------------------------------------------------------*/
// Initiate JQuery UI and Widgets
/* ----------------------------------------------------------------------------------------------------*/
(function () {
// Retrieve and load a JavaScript file
// https://www.nczonline.net/blog/2009/07/28/the-best-way-to-load-external-javascript/
function loadScript(url, callback) {
var script = document.createElement("script");
script.type = "text/javascript";
if (script.readyState) { //IE
script.onreadystatechange = function () {
if (script.readyState == "loaded" || script.readyState == "complete") {
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function () {
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
// First load jQuery and then load jQuery UI
loadScript("https://code.jquery.com/jquery-3.3.1.min.js", function () {
loadScript("https://code.jquery.com/ui/1.12.1/jquery-ui.min.js", function () {
//jQuery and jQuery UI loaded so you can run jquery code here
// Activate Tabs within Canvas
$(document).ready(function(){
$(".enhanceable_content.tabs").tabs()
});
// Activate Accordion within Canvas
$(document).ready(function(){
$('.enhanceable_content.accordion').accordion({ heightStyle: "content", autoHeight: false, collapsible: true, active: false });
});
$(window).resize(function(){
// update accordion height
$('.enhanceable_content.accordion').accordion( 'refresh' );
});
});
});
})();
I will update the instructions on my post if the above approach is workable for you.
I sent you a message and updated on the post from James above. Thanks again for your willingness to help!!
Hi erinhallmark,
This update (from a year ago) is helpful info. I very much want to use InstUI, but the required resource allocation (namely time) makes it impossible for me to do so. I'm a solo ID managing the school's subaccount of our institution's instance of Canvas. Just keeping up with the maintenance on any changes is prohibitive, given that I'm also wearing a number of other hats related to the school's ed design + tech resources and services.
I know I'm not alone in this type of circumstance where we may have the skills to use InstUI (or the stubbornness to figure it out!) but we have to limit what we can maintain and support over the long term. It's something I bump into frequently with Canvas, and is my biggest frustration with the platform (or maybe second to the lack of parity between the browser UI and the apps).
I wish Instructure would provide:
leading up to your solution(s) for fully implementing these affordances in the default Canvas themes (via the RTE or HTML or something functional for the average end user who may not know what to do with HTML much less InstUI).
Canvas's current reliance on the community for providing these explanations and support (as wonderful as this community is!) leads to a lot wasted time and effort by those us of who are tasked with supporting use of the platform by faculty/adjuncts/admins who vary considerably when it comes to being able (DIY <> facilitated course builds) and willing (luddite <> techno-utopia) to use the LMS effectively.
Hi, Ofelia,
The reason we created this thread is so that we can learn more about how the previous style guide was being used. I'm not sure if you've read InstUI: Instructure’s Style Guide 2.0, but it outlines some of the background and thoughts that could come from generating more feedback. Like any Canvas project, our teams have to collect research and create a plan that would best serve our customers and incorporate that plan into existing resources and timelines.
Thanks for posting your feedback!
Erin
Thanks, erinhallmark. I have reviewed the style guide 2.0. IntUI looks wonderful, and it makes complete sense for Instructure to make that move. However, deprecating the old style guide/code without having something in place that allows an end-user to replicate some of the core functionality while still using HTML (i.e., without the need to fuss with the css or javascript) seems to have caught a lot of people unawares and left scrambling to figure out what to do. I look forward to more updates on the path forward with the new style guide.
All best,
Ofelia
Hi All
I stumbled onto this discussion because I was searching for a way to use the class=pill to make a little table that shows the date of a class so it looks like a page from a physical calendar-a-day pad. Silly me...
I'm an instructor. I've been told our school has instructional designers. I even ~saw~ one once. That's as close as I've ever gotten to help from an instructional designer. So for me, the entire shift to slowly disable simply jquery and simple css in favor of InstUI is unbelievably frustrating. I have read a bit about it, but nothing I have read gives me any clue as to how I as an end user can use any of it, and I don't have an instructional designer to go to. All I see is what used to be easy for me to do has become impossible.
For those who use the open-source version of Canvas from GitHub, we still need the old Style Guide because our style sheets still contain this content. However, the deprecated Style Guide page is missing several items. Please make a Style Guide for the open-source version of Canvas available again.
To participate in the Instructure Community, you need to sign up or log in:
Sign In