Implementation of Instructure UI within Canvas LMS

[NatFeibish]

Hi, all. I got React with InstructureUI working on my local server, but I'd like to use it within the Canvas LMS. I thought that once I had the static build files, I'd be able to upload them. But I can only upload one or two CSS files and one JS file, and it doesn't seem to be working. How do bring my application into Canvas LMS?

If this is not possible or not the intended use of InstructureUI, I'd love to hear that as well. Is InstructureUI even for use with Canvas?

[James · Accepted solution]

@NatFeibish 

When they first came out with Instructure UI, they called it InstUI so I'm likely to call it that.

End-users do not use InstructureUI within Canvas. Instructure wrote it for the developers of Canvas to use so that they had a consistent look and feel and could be sure that accessibility concerns were met.

That said, they thought it was such a great product that they made it available for other people to use in their React applications. Those applications do not have to integrate with Canvas. InstUI is a React library. If you happen to be writing an external tool / LTI for Canvas, then you can give your app the same look and feel as Canvas.

But if you're wanting to integrate it within Canvas to modify things on the page, you're looking at it the wrong way.

Here's a bit of history. Canvas had a StyleGuide that would allow people writing custom JavaScript that ran within Canvas to make it look like Canvas. They deprecated that. They started new code from jQuery to React. React makes it very difficult for people customizing Canvas with JavaScript to do anything. CSS class names had opaque and useless identifiers. React has its shadow DOM that made it hard to look for things. We had to write mutation observers to watch for the content to appear / change and then act on it. We had to count how many levels down something was or search for text because the use of identifiers would change with every update.

Internally, they developed InstUI and touted it as the new StyleGuide. All the people modifying Canvas with custom JavaScript were giddy -- a new StyleGuide. Woohoo!

Well, it was for Canvas Developers (the people who write the Canvas code) but not for the people using Canvas and wanting to modify the UI. There were some people who had a lot of customizations, but still within the Canvas framework using custom JavaScript.

They even did not expose React or InstUi to us for us to use -- despite it being the best thing ever. If we wanted to use React, we had to load our own copy. I'm not a React programmer, but that's probably for the best. I'm not sure how two Reacts and their shadow DOMS would deal with managing the same objects.

Once we figured all that out, we were disappointed, but understood the purpose.

InstUI is very much used within Canvas -- by Canvas -- for Canvas. It is not really for other people to use in their custom Javascript or CSS files as those manipulate the Canvas pages and those are already under the control of one InstUI.

InstUI is a React library and you are free to use it in your React application. Do not use it to try and manipulate the Canvas UI. You can use embed it in an iframe from some site you host, but it won't have access to the Canvas UI. You can write an external tool, but again, that's external to Canvas.

[NatFeibish]

Thanks for explaining this. It was anything but straightforward -- I can't say I'm too impressed with Canvas right now. But, onward. I really appreciate your time!!

[renaat_demuynck]

Hi,

Over the years, I've made lots of custom code using Instructure UI components, and it is possible to make it work. You do however need a build tool like Webpack to compile it all into a single JavaScript and CSS file.

I agree, it's a pain to hack into Canvas UI, especially with the opaque classnames of the React components. But often even the React components are not completely opaque. They get classnames like 'css-183j57y-formFieldLayout', so you can hack into the shadow DOM.

Because I always had to handle the same things over and over like checking what page I was on, waiting for elements to appear, what role the current use had, … I've created a plug-in framework that handles all these things, so I don't have to reinvent the wheel each time. The framework has different services for routing, DOM handling, translations, … You can find it here: https://www.npmjs.com/package/@artevelde-uas/canvas-lms-app.

I hope this can be of any help.

Sincerely,
Renaat