Templates and form elements

Templates and form elements

by Mike Churchward -
Number of replies: 8
Picture of Core developers Picture of Plugin developers Picture of Testers

Hi -

I've been experimenting and adding renderers and templates to some of the plugins I maintain. Its been a learning experience!

Some of  the code currently uses "html_writer::" to output things like checkbox form elements. I know how I can easily reproduce this with renderers, but how do I do it with templates?

So, for example, I have a line of code that says:

$output .= html_writer::checkbox('q'.$this->id.'[]', $id, $checked, $text);

That results in HTML that looks like:

<input id="checkbox_5845d7bd0909b2" value="31" name="q127[]" type="checkbox">
<label for="checkbox_5845d7bd0909b2">1</label>

How would I reproduce this same sort of functionality using a mustache template?

Pointers to existing docs is fine too (I couldn't find any).

Average of ratings: -
In reply to Mike Churchward

Re: Templates and form elements

by Damyon Wiese -

https://github.com/moodle/moodle/blob/master/theme/boost/templates/core_form/element-checkbox.mustache


This example for the real mform checkbox is much more detailed - but you can see how it should work. 



Average of ratings: -
In reply to Damyon Wiese

Re: Templates and form elements

by Mike Churchward -
Picture of Core developers Picture of Plugin developers Picture of Testers

Thanks Damyon -

So far, my knowledge of templates is based on what I have extracted from the doc page. I have a couple of further questions...

  1. In your example, there is extensive use of "element" tags. This tag also seems to allow properties? (e.g. element.value).  I am not familiar with this construct. Is it a specific construct?
  2. The "html_writer::checkbox" code that I used previously, auto-generated the "id" attribute used in the "input" tag and the "label" tag. Does the "element.id" part of the mustache tag do the same?
  3. You mentioned the "real mform checkbox". Is that also part of Moodle's templates? Or did you just mean the php code version?

I appreciate the help.

mike

Average of ratings: -
In reply to Mike Churchward

Re: Templates and form elements

by Damyon Wiese -

Answer to 1.

The context for that example looks a bit like this:


$context = [

    'element' => [

        'value' => 'checkbox value when checked'

        'id' => 'id value',

        ....

    ],

    ....

];


The context is an array (can be an object) with keys and values. "element" is one of the keys - and the value is another array of keys and values.

So {{element.value}} is the same as $context['element']['value'] in php.


Answer to 2.

Yes - but only because the id was already added to the context that was given to that template.


Answer to 3.

In Moodle 3.2 we converted all the mform elements to (optionally) support rendering with mustache templates. Boost has the templates for every mform element and you can modify the markup for any mform element by editing the template.

Average of ratings: -
In reply to Damyon Wiese

Re: Templates and form elements

by Mike Churchward -
Picture of Core developers Picture of Plugin developers Picture of Testers

Thanks again Damyon.

I did not realize that mustache tags could be used / accessed that way. That actually makes it much more readable.

Regarding the mform rendering... So, essentially you are saying that the mform element templates are meant to replace the use of the PHP mform classes? So, if we use the templates, we don't use mform code the way we used to? Is that correct?

mike

Average of ratings: -
In reply to Mike Churchward

Re: Templates and form elements

by Damyon Wiese -

You build mforms in php the same as you always did. When they are converted into HTML it is now done with templates instead of the old HTML hardcoded in the quickforms classes.



Average of ratings: -
In reply to Damyon Wiese

Re: Templates and form elements

by Mike Churchward -
Picture of Core developers Picture of Plugin developers Picture of Testers

So if we use mforms the same way as we always did, then I guess there isn't any way to use them in templates for our own plugins?

For example, I have a plugin page that is now primarily form elements, generated in a PHP file using mform functions. Can I somehow create a template to layout these form elements and use "render_from_template" instead?

mike

Average of ratings: -
In reply to Mike Churchward

Re: Templates and form elements

by Damyon Wiese -

I don't understand what you want to do. If you use mforms, they should look like all other mforms. You style a checkbox (everywhere) with a template. You don't style checkbox on page X, checkbox on page Y.

You can do very limited layout things with mforms - display things on one line with groups, or one after the other. Other than that you should just accept how they look and not try and mash an mform into something else.

If you want to do something like - include a form in a popup - you can still use an mform with the fragments API.


Average of ratings: -
In reply to Damyon Wiese

Re: Templates and form elements

by Mike Churchward -
Picture of Core developers Picture of Plugin developers Picture of Testers

Its possible that I am misunderstanding template use. I am assuming that any page of output generated from my plugin should have a template that defines the output. That is, all HTML tags and layout should be in the template.

Based on that, I am trying to understand how I use mforms to in a template that defines the layout and tags, especially since mform elements are tags.

Without templates, this is all done in PHP using the mforms API and outputting it from PHP.

So, am I wrong to be trying to use a template to define the complete output if my output includes form elements? If I can use templates, is there a good example in core where the page's output is completely generated by a template and includes form elements?

mike

Average of ratings: -