Moodle App Customisation: Difference between revisions
Juan Leyva (talk | contribs) No edit summary |
Tim Bahula (talk | contribs) (Clarifying punctuation and grammar) |
||
| Line 10: | Line 10: | ||
With the first three options you are not required to compile or build your custom application | With the first three options, you are not required to compile or build your custom application. With the last one, you are required to compile and publish your custom app in the stores. | ||
== Changing the app appearance for your site == | == Changing the app appearance for your site == | ||
The Mobile app can retrieve your custom styles from your Moodle site. Since is an HTML5 app, you can apply | The Mobile app can retrieve your custom styles from your Moodle site. Since it is an HTML5 app, you can safely apply CSS3 styles. | ||
In your Moodle installation go to Plugins / Web services / Mobile and enter in the mobilecssurl field a valid URL pointing to a CSS file containing your custom styles (theme). | In your Moodle installation, go to Plugins / Web services / Mobile and enter in the mobilecssurl field a valid URL pointing to a CSS file containing your custom styles (theme). | ||
The CSS should be placed inside your Moodle installation (in your custom theme or inside a local plugin) | The CSS should be placed inside your Moodle installation (in your custom theme or inside a local plugin) | ||
Once the user is logged in the app, there is a periodical process that retrieves your remote CSS files for applying your custom styles into the app. | Once the user is logged in to the app, there is a periodical process that retrieves your remote CSS files for applying your custom styles into the app. | ||
Notice that | Notice that the first time a user opens the app, he will see the default "orange" style. Your custom styles will be applied once the user has added a site in the app. | ||
Notice | Notice that styles come from a site; thus, there is no way to change the initial Add site / Manage account pages styles. | ||
See [[Moodle Mobile Themes]] for additional information. | See [[Moodle Mobile Themes]] for additional information. | ||
| Line 30: | Line 30: | ||
== Mobile support for plugins == | == Mobile support for plugins == | ||
You can create Moodle plugins to change how the app works | You can create Moodle plugins to change how the app works. See [[Mobile support for plugins]] for complete information. | ||
== Creating a custom application == | == Creating a custom application == | ||
| Line 42: | Line 42: | ||
'''Phonegap Build''' | '''Phonegap Build''' | ||
[http://build.phonegap.com Phonegap Build] is an online service that lets you build the app | [http://build.phonegap.com Phonegap Build] is an online service that automatically lets you build the app for different platforms. The main advantage is that it simplifies the process of building a lot. | ||
You just put your www/ folder in a | You just put your www/ folder in a GitHub account, and Phonegaps automatically builds the app for different platforms pulling your GitHub code. | ||
Notice that the free version is for open repositories, but you can use the non-free version for private repositories. | Notice that the free version is for open repositories, but you can use the non-free version for private repositories. | ||
Please, note that you will have to adapt your src/config.xml file to a PhoneGap Build compatible one. Since January 2019 the old moodlemobile-phonegabuild repository where a compatible version for PhoneGap Build was hosted has been [https://moodle.org/mod/forum/discuss.php?d=395128 deprecated]. | Please, note that you will have to adapt your src/config.xml file to a PhoneGap Build compatible one. Since January 2019, the old moodlemobile-phonegabuild repository where a compatible version for PhoneGap Build was hosted has been [https://moodle.org/mod/forum/discuss.php?d=395128 deprecated]. | ||
'''Ionic CLI''' | '''Ionic CLI''' | ||
| Line 58: | Line 58: | ||
The app can be configured via Moodle site settings. You can disable features, rename strings, add new elements to the main menu or change how log out works in the app. This requires Moodle 3.3 or the [[https://docs.moodle.org/en/Moodle_Mobile_additional_features Moodle Mobile additional features plugin]]. | The app can be configured via Moodle site settings. You can disable features, rename strings, add new elements to the main menu or change how log out works in the app. This requires Moodle 3.3 or the [[https://docs.moodle.org/en/Moodle_Mobile_additional_features Moodle Mobile additional features plugin]]. | ||
Please refer to the Configuring the app from your site section | Please refer to the Configuring the app from your site section on this page: https://docs.moodle.org/en/Moodle_Mobile_guide_for_admins | ||
== Testing and developing == | == Testing and developing == | ||
Revision as of 13:04, 30 April 2021
Overview
Moodle Mobile can be customized in different ways:
- Changing the app appearance for your site.
- Adding support in your plugin for the mobile app.
- Configuring how the app should work via Moodle site settings.
- Creating a custom application (with your custom name and icon) based on the Moodle Mobile code.
With the first three options, you are not required to compile or build your custom application. With the last one, you are required to compile and publish your custom app in the stores.
Changing the app appearance for your site
The Mobile app can retrieve your custom styles from your Moodle site. Since it is an HTML5 app, you can safely apply CSS3 styles.
In your Moodle installation, go to Plugins / Web services / Mobile and enter in the mobilecssurl field a valid URL pointing to a CSS file containing your custom styles (theme).
The CSS should be placed inside your Moodle installation (in your custom theme or inside a local plugin)
Once the user is logged in to the app, there is a periodical process that retrieves your remote CSS files for applying your custom styles into the app.
Notice that the first time a user opens the app, he will see the default "orange" style. Your custom styles will be applied once the user has added a site in the app.
Notice that styles come from a site; thus, there is no way to change the initial Add site / Manage account pages styles.
See Moodle Mobile Themes for additional information.
Mobile support for plugins
You can create Moodle plugins to change how the app works. See Mobile support for plugins for complete information.
Creating a custom application
See Moodle Mobile custom apps or The Branded Moodle Mobile App service by Moodle HQ
Building
There are two options for building the app, aka compile it to different devices:
Phonegap Build
Phonegap Build is an online service that automatically lets you build the app for different platforms. The main advantage is that it simplifies the process of building a lot.
You just put your www/ folder in a GitHub account, and Phonegaps automatically builds the app for different platforms pulling your GitHub code.
Notice that the free version is for open repositories, but you can use the non-free version for private repositories.
Please, note that you will have to adapt your src/config.xml file to a PhoneGap Build compatible one. Since January 2019, the old moodlemobile-phonegabuild repository where a compatible version for PhoneGap Build was hosted has been deprecated.
Ionic CLI
You can also build the app using the Ionic CLI tools, see: http://ionicframework.com/docs/cli/run.html
Configuring how the app should work via Moodle site settings
The app can be configured via Moodle site settings. You can disable features, rename strings, add new elements to the main menu or change how log out works in the app. This requires Moodle 3.3 or the [Moodle Mobile additional features plugin].
Please refer to the Configuring the app from your site section on this page: https://docs.moodle.org/en/Moodle_Mobile_guide_for_admins
Testing and developing
Chromium or Google Chrome browser
See Moodle Mobile development using Chrome or Chromium
Moodle Desktop
Refer to Moodle Desktop
