Add de-select option to page field single page, type radios

[Martijn Geerts]

Add de-select option to single page select using radio buttons.

The problem

I have the following structure:

home
 |
 |-- car
 |
 `-- bike

I want to have a Pagefield with radio buttons, select cars or bikes or nothing. But when you select one option, you can't deselected it.

You could however solve this with a third page in the tree and name it “I don't travel”, but that doesn't make any sense.

home
 |
 |-- car
 |
 |-- bike
 |
 `-- I don't travel    <-- we don't want that, makes no sence

A Solution

1. create a field with the type of page, name transport for example.

2. on the "details tab" select: Single page (Page) or empty page (NullPage) when none selected

3. under the input tab go to: Custom PHP code to find selectable pages

4. type:

// deselect page
$deselect = new Page;
$deselect->parent = $page;
$deselect->name = 'unused';
$deselect->template = 'basic-page'; // need to be a available template
$deselect->title = "I don't travel";

// pagearray with cars and bikes
$transport = $pages->find("parent=1, template=basic-page");

// change title used for radio button (if wished)
foreach($transport as $vehicle) {
    $vehicle->title = "Travel by: " . $vehicle->title;
}

// empty pagearray, used for returning
$array = new Pagearray();

// fill the array
$array->import($transport);
$array->add($deselect);

return $array;

5. save it

Now, add this field to your template. On pages using this template you can now select Travel by: car or Travel by: bike or “I don't travel”.

The following radio options appear at the field:

// radio button options shown in the field

( ) Travel by: Car
( ) Travel by: Bike
(•) I don't travel    <-- default value, Nullpage

If “I don't travel” is chosen, the field returns a Nullpage, you could check it with $page->transport->id === 0.

If there's nothing chosen, the radio button for “I don't travel” is pre selected, as that radio has no value.

( Post edit: clarifying the example )

Edited December 20, 2013 by Martijn Geerts

[Soma]

Radios aren't made for deselecting, You may use ASM select then?

[Martijn Geerts]

With ASM it will work as good as this way with radios. But there's use case for the radio option in a project I'm working on right now.

Showing all options at first sight clarifies what the field does more then using the ASM route.

[Soma]

It's the nature of Radios in HTML, I've never seen or needed a radio group options to be unselectable. Maybe I'm wrong.

Edit: Maybe I've misunderstood your post, ignore me.

[Joss]

It is a bit of an odd one this, but I can see where Martijn is coming from. 

You see this in surveys where your answers may be Choose "1" or "2" or "none of the above apply"

Actually, the third option is a defined answer equal in weight to the other two, but to the user it is like saying "ignore this" or "deselect my first thought and move on"

The use of radio buttons, as opposed to a dropdown select, is always interesting. I tend to use it where I want the user the opportunity to gaze over all the options in one go before having to make a decision. But they do lose a bit of the usability of a dropdown where you can have a default or selectable "no value" blank, if you wish.

My rule of thumb is if it is complicated (like a survey) then use radios. If it is simple (Yes/no perhaps or a simple list) then a drop down is fine