Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Form Questions /

Radio boxes with custom form field template.


Reply


2 Posts   956 Views

Avatar
neverthemachineforever

Community Member, 3 Posts

16 August 2013 at 1:30pm

Hi All,

My apologies if this has been asked before. I haven't been able to find a definitive answer.

I have a custom form with has been cut up by our front end developer, which has some pretty nice styling around radio boxes, but quite custom markup.

I've followed the Custom form field templates section of http://doc.silverstripe.org/framework/en/topics/forms and everything was going fine until I got to the radio boxes. I'm pretty sure that OptionsetField is the correct form field type to output radio boxes.

To play around, I've done this in my custom form constructor:
$fields = new FieldList(
OptionsetField::create('thing', 'select a thing', array('thing1' => 'thing1', 'thing2' => 'thing2'))
);

But when doing this:
$Fields.dataFieldByName(thing)
In my layout, I get default html coming out including an unordered list and default label tags. I need these to be completely custom.

Can anyone please give me some advice around the recommended way to customize this output?

Cheers,
Ben.

Avatar
martimiz

Forum Moderator, 1132 Posts

17 August 2013 at 11:12pm

Edited: 17/08/2013 11:13pm

Hi,
I think the preferred way to do this would be by using custom templates. The Optionsetfield uses two templates (you can find them in framework/templates/forms):

- OptionsetField.ss
- OptionsetField_holder.ss (3.1 only, in 3.0 it uses FormField_holder.ss)

Use these as an example, create your own in mysite/templates/forms/ (for instance MyOptionsetField.ss), and tell the OptionsetField to use them. Something like:

OptionsetField::create('thing', 'select a thing', array('thing1' => 'thing1', 'thing2' => 'thing2'))
   ->setTemplate('MyOptionsetField')
   ->setFieldHolderTemplate('MyOptionsetField_holder'); // <- if needed

(don't forget to ?flush=1)