[ARCHIVED] How to modify the mobile app

[idavidson]

The same javascript and css files that I upload to modify the web interface don't affect the mobile app. Is there a separate API for mobile? I haven't seen any discussions on this subject.

[rseilham]

Hi Iver Davidson‌, 

I'm not all too familiar with the JS portion of mobile, but I know that the stylesheet is different. I want to direct you to a session I did last year about CSS and Mobile: Using CSS in the Canvas Mobile app 

Essentially for our style sheet, it's basic compared to our web CSS. 

We have yet to explore using JS in mobile, but it's not the same JS you use for the web. I'm going to ping  @kenneth_larsen ‌ to see if he can add anything to this thread. He has experience using JS and CSS with the mobile app. 

[idavidson]

Thank you!

[kenneth_larsen]

Hi idavidson,

It seems like I was part of another discussion about JavaScript in the mobile app, but it appears to have been deleted. 

When you are working in the Theme Editor in Canvas, you have the ability to add a CSS and a JavaScript file that load in the desktop version and files that will load in the mobile app.

The mobile JavaScript and CSS files do load into Canvas but there are distinct differences between the desktop version of Canvas and the mobile apps. A lot depends on what you are trying to style with your CSS or what your JavaScript targets.

CSS

Because the environment is different, your CSS may be scoped in such a way that it does not apply to the content. I have not really experienced issues with the CSS aspect (except that I have had to recreate some things like buttons and table styles that I was pulling from the CSS Canvas was already loading into the browser).

JavaScript

There are a variety of challenges when it comes to using JavaScript in the mobile app. Here are two of the major things to be aware of: 

• jQuery is not already loaded in the mobile app.
• The urls for content are not laid out like they are in the browser.

If you have specific things that you are trying to accomplish that you want help figuring out, let me know and I will help where I can.

[Hans_Magnus]

I recently tried to apply a simple script to the Teacher and Student app. It's just a simple alert, no jQuery or advanced API calls.

It seems like the script isn't running at all, and the alert is only displayed if I go to Pages > Edit Page in the Teacher app. This is also the case if I use Discussions > Edit Discussion. So it seems like the script is only kicking in when the text editor loads. Any clues about this?

[rseilham]

 @Hans_Magnus ‌, 

This is quite interesting. I know that the JS/CSS only work with Canvas Pages inside the mobile apps, but I haven't thought of (or tried) to use it in the Canvas Teacher app. I'm curious if the Canvas Teacher app doesn't fully support CSS/JS (since it was originally written for the Student app). 

I'm assuming this works in the Student app? Let me know and I'll dig deeper. 

[Hans_Magnus]

Hello, and thanks for replying!

This doesn't work in the Student app, and can't be reproduced since there is no "Edit Page" button in the Student app.

[rseilham]

 @Hans_Magnus ‌, 

The Android app update 6.2 released on May 11th added the ability for students/users to edit pages in the app, although I highly doubt this is editable since it's not part of a content page. 

[idavidson]

I appreciate the additional comments on my posting. What I am trying to do with the mobile app is change the help link to our own help desk, something I was able to do with the desktop app.

[Hans_Magnus]

I'm curious to know if anyone has done anything with JS in the mobile apps at all. Do you know of any working examples?

[kenneth_larsen]

I have done a fair amount with CSS and JS in the mobile apps and I have to admit that it is a somewhat frustrating process. I am spoiled with developer tools in the browser that allow me to inspect things and view the console logs and I feel a little blind when trying to work with the mobile app.

Here are some screencasts from ios and android from a little while back:

Also, in regards to some of the earlier conversation, the CSS and JavaScript are loaded in both the student and the teacher apps. Here are a couple of things for which you should be aware (although some of these may have changed over the last year without me knowing):

• jQuery is not included by default in the mobile app
• CSS loaded into the browser version of Canvas (example: Canvas Style Guide) is not loaded into the apps
• Occasionally I have also seen the CSS/JS you load into the app finding its way into the desktop so you will want to add code to watch for that and prevent it for interfering with the browser version of Canvas.

[kenneth_larsen]

Considering the context of the discussion, I guess I should also add that all of my playing has been with regards to user created content and not trying to change the app interface in any way.

[rseilham]

idavidson‌, 

I heard of this request for a while now. Schools want custom help links inside the mobile app. Unfortunately the CSS and JS only work with content pages, so this wouldn't be possible. It would have to be a feature update to the app. 

This feature request by  @KristinL  was opened for voting last year and didn't get much traction: 

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

Either way, I would suggest you create another feature idea and even get the Canvas Mobile Users Group involved to bring this back to everyone's attention. 

[rseilham]

Hi idavidson‌, 

I talked to  @KristinL ‌ and she alerted me that this Feature Idea is back again and currently open for voting: https://community.canvaslms.com/ideas/11207-custome-help-menu-for-mobile" modifiedtitle="true" title.... Feel free to vote and add your comments. Thanks!

[Jason_Ross]

I noticed this thread was a little old, but was having the same questions.  Our School does not use the work Syllabus so we have a Javascript to change it to Learning Plan.  When i added the Javascript to the browser its working normally but when i add it to the mobile it still says Syllabus.  Any reason why it would not take that change.

This is what we are using

$(document.body).find('a.syllabus').each(function() { //search with links only
    var tmp = $(this).children().remove();
    var text = $(this).text();
    text = text.replace(/Syllabus/g, "Learning Plan");  //replace modules with topics
    $(this).text(text);
    $(this).append(tmp);
});
$(document.body).find('h1.ic-Action-header__Heading').each(function() { //search with links only
    var tmp = $(this).children().remove();
    var text = $(this).text();
    text = text.replace(/Course Syllabus/g, "Learning Plan");  //replace modules with topics
    $(this).text(text);
    $(this).append(tmp);
});
$(document.body).find('button.btn.btn-primary').each(function() { //search with links only
    var tmp = $(this).children().remove();
    var text = $(this).text();
    text = text.replace(/Update Syllabus/g, "Update");  //replace modules with topics
    $(this).text(text);
    $(this).append(tmp);
});
$(document.body).find('span.ellipsible').each(function() { //search with links only
    var tmp = $(this).children().remove();
    var text = $(this).text();
    text = text.replace(/Syllabus/g, "Learning Plan");  //replace modules with topics
    $(this).text(text);
    $(this).append(tmp);
});

Thanks

Jason

[kenneth_larsen]

 @jross , the problem is that your code is written using jQuery and jQuery is not loaded into the mobile app so anything using the $ jQuery indicator will not work. You would need to rewrite your code using vanilla JavaScript for it to work in the mobile app. Or you would need to pull in a version of jQuery into the mobile app environment.