Can a colorpicker be added to the mod_form page

Can a colorpicker be added to the mod_form page

by AL Rachels -
Number of replies: 5
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers

I have colorpickers on a plugin settings page, but was wondering if it is possible to add one to an activity setup on the mod_form.php page. Is it possible with or without $mform.

I currently have a color setting on mod_form.php by using $mform->addElement('text', ....etc. but would like to use a colorpicker so I don't need to look up hex color codes.

Average of ratings: -
In reply to AL Rachels

Re: Can a colorpicker be added to the mod_form page

by Mark Sharp -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

If you're doing a plugin settings page, you can use the settings.php file and add the admin_setting_configcolourpicker class.

e.g.

$setting = new admin_setting_configcolourpicker($name,
               $visiblename, $desc, $defaultsetting, $previewconfig, $usedefaultwhenempty);
$setting->set_updatedcallback('theme_reset_all_caches');
$page->add($setting);

cf: https://github.com/moodle/moodle/blob/master/lib/adminlib.php#L9559 and https://docs.moodle.org/dev/Admin_settings

In reply to Mark Sharp

Re: Can a colorpicker be added to the mod_form page

by AL Rachels -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers

Hi Mark,

Thanks for the reply. I already have a colorpicker setup and working on the plugin settings page using code similar to what you provided. The problem is that only an admin can make those color changes.

I want a teacher to be able to change the color setting for the activity when they add it into a course. I do have that setup and working on the mod_form.php page, but it is just a plain text entry box so the teacher has to type in a hex color code or a color name. e.g. #95FC89, red, pink, lightgreen, etc. It would be much simpler and faster if I could use a color picker to do the entry with.

In reply to AL Rachels

Re: Can a colorpicker be added to the mod_form page

by Mark Sharp -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Ah right, well, you could still use the Moodle colour picker. This is a line from the colour picker class I mentioned above:

$PAGE->requires->js_init_call('M.util.init_colour_picker', array($this->get_id(), $this->previewconfig));

So you could call that from your plugin lib.php just replace $this->get_id() with the id of your text box, and previewconfig, not sure, I don't think you need that.

This is the description above the init_colour_picker js in lib/javascript-static.js

 * Designed to be used with admin_setting_configcolourpicker although could be used
 * anywhere, just give a text input an id and insert a div with the class admin_colourpicker
 * above or below the input (must have the same parent) and then call this with the
 * id.
 *
 * This code was mostly taken from my [Sam Hemelryk] css theme tool available in
 * contrib/blocks. For better docs refer to that.
In reply to Mark Sharp

Re: Can a colorpicker be added to the mod_form page

by AL Rachels -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers

Thanks for the info Mark. I will try your suggestion and see if I can get it to work. It would be nice to include in my upcoming release, which is working okay as just an input where the teacher can type either a hex color code or web color name.

In reply to Mark Sharp

Re: Can a colorpicker be added to the mod_form page

by Ravi kumar -


I tried your given solution but it not working, i also want to add color picker in moodle form_setting page.
our effort is as-

$PAGE->requires->js( new moodle_url($CFG->wwwroot . '/lib/javascript-static.js'));
$mform->addElement('text', 'color', get_string('colorpicker', 'congrea'),array(''id'=> 'clour'));
$mform->addElement('html', '<div class="admin_colourpicker">');
$PAGE->requires->js_init_call('M.util.init_colour_picker', array('clour', 'null'));