Formslib Help Please...

Formslib Help Please...

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

I want to lay out a form that has two columns. Each column has a set of drop downs that are used to select options for a report.

So, something like:

Label 1a:
Selector 1a
 Label 2a:
Selector 2a
Label 1b:
Selector 1b
 Label 2b:
Selector 2b
Label 1c:
Selector 1c
 Label 2c:
Selector 2c

Can I do this using Formslib? And if so, how?

mike
Average of ratings: -
In reply to Mike Churchward

Re: Formslib Help Please...

by Guido Vega -
Hi Make,

A while ago I had a similar problem and I had a good go at it and I couldn’t find a satisfactory way, but I let you on what I know.

As you may know, the formslib lib is base in Pear’s HTML_QuickForm package and therefore you can find good documentation at html-quickform.php in specific the “Basic renderers” section.

Within your definition() function you could have something like:

$mform =& $this->_form;
$renderer =& $mform->defaultRenderer();
$templateL = '<table border="0"><tr><td>{content}</td>';
$templateR = '<td>{content}</td></tr></table>';

$mform->addElement('select', 'Selector_1a', 'Label 1a:', $options);
$mform->setType('Selector_1a', PARAM_INT);
$renderer->setElementTemplate($templateL, 'Selector_1a');

$mform->addElement('select', 'Selector_2a', 'Label 2a:', $options);
$mform->setType('Selector_2a', PARAM_INT);
$renderer->setElementTemplate($templateR, 'Selector_2a');

etc...

I know... $templateL and $templateR are messy and nasty, but it gets worse. Moodle overwrites the element’s template that we just set with the default template (I’m not sure if this done intentionally to have better control of the overall site style and look or if it’s a bug), so you may have to modify formslib.php (you see I told you that it was unsatisfactory). Look for the renderElement() function add the following:


if (isset($this->_templates[$element->getName()])) {
$html = str_replace('{content}', $html, $this->_templates[$element->getName()]);
}

Before the following line near the end of the function

$this->_templates[$element->getName()] = $html;

I decided not to change formslib and stick to the standard format but I suppose its good info.

I hope you find this useful.

Regards,
GV


Average of ratings: -
In reply to Guido Vega

Re: Formslib Help Please...

by Martin Dougiamas -
Picture of Core developers Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers
I wasn't aware that we overrode templates that way. If Guido's patch allows devs to provide their own templates while still using the default Moodle templates the rest of the time then it seems safe to put into HEAD and 1.8.
Average of ratings: -
In reply to Martin Dougiamas

Re: Formslib Help Please...

by Martin Dougiamas -
Picture of Core developers Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers
See MDL-11318 to track this issue.
Average of ratings: -
In reply to Martin Dougiamas

Re: Formslib Help Please...

by Jamie Pratt -
I put a patch in 1.8 and HEAD but use of templates is not really recommended and you lose some functionality if you do use templates as formslib relies on using the templates itself to insert help buttons and some other stuff.
Average of ratings: -
In reply to Martin Dougiamas

Re: Formslib Help Please...

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
However, one strength of the Moodle approach is that all forms are laid out consistetly.

What is this form where you want two columns? why is it so important to have it that way?
Average of ratings: -
In reply to Tim Hunt

Re: Formslib Help Please...

by Mike Churchward -
Picture of Core developers Picture of Plugin developers Picture of Testers
Because, that's how I want it. smile

Seriously, this is all well and fine for a standard release of Moodle. However, one of Moodle's other huge strengths is its customizability! Not every Moodle user wants to have it look the way it does now, and have very specific requirements for how they want it to look. Surely we don't want to force our own opinions on what looks best on everyone?

In this particular case, this is a custom report front-end where various filters and searches can be selected. I could do it with the standard Moodle layout and have everything fall down the page one after the other, but that would mean scrolling before completing the selections. Not everyone wants to do this. In this case, putting the selectors side by side resolves this and makes the user experience much better.

mike
Average of ratings: -
In reply to Mike Churchward

Re: Formslib Help Please...

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
The other tool you have available is CSS. The formslib HTML that Moodle outputs by default gives you lots of hooks, so you can do some pretty radical changes of layout with just CSS.

For instance, on the quiz settings form, compare the 'Students may review' options between 1.8.x and HEAD, using any theme based on standard.
Average of ratings:Useful (1)
In reply to Tim Hunt

Re: Formslib Help Please...

by Martin Dougiamas -
Picture of Core developers Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers
Absolutely right, that really has to be the preferred way. Changing the XHTML is really a last resort (but it's still good to be ABLE to do it).
Average of ratings: -
In reply to Tim Hunt

Re: Formslib Help Please...

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

It may be my CSS skills (or lack thereof), but is there a way to lay out the form with 2 columns for that one section using just CSS?

mike
Average of ratings: -
In reply to Mike Churchward

Re: Formslib Help Please...

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
Well, it is going to involve using floats. It should be quite easy if you are prepared to have they laid out in the order

A B
C D

Somewhat harder if you want

A C
B D

where at the moment you have

A
B
C
D

Can you put the HTML somewhere public, so I can have a go with the web developer toolbar edit css thing
Average of ratings: -
In reply to Tim Hunt

Re: Formslib Help Please...

by Mike Churchward -
Picture of Core developers Picture of Plugin developers Picture of Testers
Well, I would want to be able to put the elements I need in each column... If I can't do that, then there wouldn't be much point.

I've attached a quickly mocked-up sample of what I'm getting at, using tables. If you can see a way to do that with formslib, let me know.

mike
Average of ratings: -
In reply to Mike Churchward

Re: Formslib Help Please...

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
Well, I have to say, I would never want to make a form look like that! I realise you say it is a quick mock-up, but still.


To start with, I woudl copy the saved search interface from Bugzilla. That is, I would take it out of the search form. Instead, after you have done a search, there should be a "Save this serach as" option at the end, and somewhere there should just be a list of links, or a dropdown, to run any previously saved search.


For sort by, why don't you want to do what is done almost everywhere else in Moodle, and have clickable table column headings to do sorting?


If you do both of those, you are back to a simple linear form for the rest.
Average of ratings:Useful (1)
In reply to Tim Hunt

Re: Formslib Help Please...

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

I did a quick mock-up in html, without any of the styles associated with it. So, of course it doesn't look very pretty. For all intensive purposes, you can remove all of the "saved search code", and just look at the two column area at the bottom. Sometimes, you need to do ugly mockups to convince people that certain areas should be moved around... But that doesn't change the usefulness of the two columns of selectors that we are talking about.

If we're going to argue about function, I would have to share the entire spec. The report that gets generated by this is not an interactive columnar form like others in Moodle. It is a laid out, printable form. The selection criteria helps set up what the report will show. There aren't columns to click on.

But, this isn't about function, this is about form layout. So we really shouldn't worry about what the form is doing. Again, if what we are saying is "if we don't like the layout of what you are trying to do, then we don't want you to do it", we're into territory I didn't want to be in. Do we really want to force all users of Moodle to do it the way we say formslib should do it?

I intentionally laid out a form that (I probably wouldn't use), but one that could be laid out easily enough in previous versions. This isn't something that would be going into core Moodle, or else I would agree it should conform to the display requirements of Moodle.

To make it easier, I've attached one that isn't quite so odd.
Average of ratings:Useful (1)
In reply to Mike Churchward

Re: Formslib Help Please...

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
Ok, so start by making your moodle form look like this:

-------------------

Report type: o Summary o Detail

Search by: Job Title 1 [Choose... ] Job Title 2 [Choose... ] Job Title 3 [Choose... ] Job Title 4 [Choose... ]

Bogus lable: [Select saved query ]

Sort by: Level 0 [Choose... ] Level 1 [Choose... ] Level 2 [Choose... ]

(Get report) (Save Query) (Exit)

--------------------

Here, o is a radio button, [] is a dropdown () is a button.

The way to get several things on a line like this is http://docs.moodle.org/en/Development:lib/formslib.php_Form_Definition#addGroup. There are lots of examples in the code.


Once you are there, it is time to use CSS to make it not suck. Using your favourite tool (Firefox + Firebug, Web developer toolbar, or Dom Inspector would be my choice), find a container in the HTML that surrounds each of the four lumps

* Report type: {and the associated controls}
* Search by: {and the associated controls}
* Bogus lable: {and the associated controls}
* Sort by: {and the associated controle}

Work out how to refernce them in CSS, then set each of them to width: 49%; float: left. You may have to go smaller than 49% to get them to fit side-by-side.

Set the row of submit buttons to be clear: both.

Set the label "Bogus lable:" (but not the associate controls) to be display: none, or visibility: hidden, or something. (Or come up with a meaningful label for this control.)

Finally, work out how to get the line-breaks you want between the Job-title and level controls. I think that might be a case of making them display: block.

If you can get close, post the actual Moodle Form HTML, and CSS, and I may be able to help you tweak it, but right now, I am going to bed.
Average of ratings:Useful (1)
In reply to Tim Hunt

Re: Formslib Help Please...

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
Oops, the unstyled form should have the bits in the order

* Report type: {and the associated controls}
* Bogus lable: {and the associated controls}
* Search by: {and the associated controls}
* Sort by: {and the associated controle}

and I should add the the trick of using float-left like this to do multi-column layouts is a standard CSS trick. The quiz questions have been laid out like this since before I took over 18 months ago.
Average of ratings:Useful (1)
In reply to Guido Vega

Re: Formslib Help Please...

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

Thanks for the info, but I agree with you that its not worth making the changes to the core unless they're part of the core (which they may be now according to posts below). In this case, I can also build the form without formslib, but I lose all of the advantages of using it.

mike
Average of ratings: -
In reply to Mike Churchward

Formslib - Some New Help Please?

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

I haven't had a chance to try your suggestion with CSS yet (I had to get the code done, so I just bypassed formslib altogether).

I have a new one though. Again, I cannot find a way to do this using formslib.

The user wants to replace drop-downs with radio buttons for some form elements. The reason for this is that their studies have shown the users have an easier time completing the form when they can see all the options at once.

They would also like the radio buttons to be grouped one under the other rather than in one line. And, there should be no default selection and it is a required field.

I have tried using every combination of addGroup, addRule, addGroupRule that I can think of, but I cannot get that display. The issues I am having are:
1) Getting the radio button group to work such that the buttons fall below each other rather than in a line, and
2) Getting a required rule to work such that the group label is styled rather than the button text.

Is there a way to do this?

mike
Average of ratings: -
In reply to Mike Churchward

Re: Formslib - Some New Help Please?

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
Hang on. I saw an example of this on a form earlier today. Now where was it ...thoughtful

Yes, that's it. The question import/export forms. These have the added bonus they were done by Jamie Pratt, the inventor of formslib, so they must be done right.

From any course page, click on 'Questions' in the admin block, then click on the import or export tab.
Average of ratings: -
In reply to Tim Hunt

Re: Formslib - Some New Help Please?

by Mike Churchward -
Picture of Core developers Picture of Plugin developers Picture of Testers
Okay! That works (mostly). That solves the getting them one on top of another and applies a required rule that does what I want. Thanks for that!

The only issue is that it colours each of the text options red and not the group label... In this case, it makes more sense for the label to be red and each option the default black.

Any ideas?

mike
Average of ratings: -
In reply to Mike Churchward

Re: Formslib - Some New Help Please?

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
I noticed that too. I don't like the appearance of the import/export forms.

I created MDL-11446. I hope I will get time to fix it tomorrow.
Average of ratings: -