Digitales

TYPO3 HowTo: Grouping Multiple Checkboxes in DCE

Dynamic Content Elements (DCE) is a very powerful TYPO3 plugin for creating any form of custom content element in TYPO3. Speeding up development time and eliminating the need to develop custom modules. If you work with TYPO3 a lot, you probably came across this extension before. When creating DCE’s in our projects, something annoying kept coming back that requires an elegant solution: How do I efficiently group multiple checkboxes?

Erik de Kuijper07-01-2019

2019-01-072022-02-18

Sometimes a few simple check/uncheck options you want your DCE to have, really start to pile up, and continuing to use single checkboxes not only look bad. But by not grouping your checkboxes you are creating a bad interface, and in turn reduce the usability for your end user. Looking to create multiple checkboxes you may have tried to add more numIndex values, and increase the maxItems. You may also have noticed that you are getting a random binary output, depending on what combination of checkboxes you’ve selected. How lovely binary output may be, we really only want the values we defined in our numIndex.

So what can we do?

For this case, Select really comes to the rescue. Did you know you could define a select configuration to not be a dropdown, but behave like a series of grouped checkboxes? Simply set the renderType to selectCheckBox, and don’t forget to increase the maxitems.

<config>
  <type>select</type>
  <renderType>selectCheckBox</renderType>
  <items type='array'>
    <numIndex index='0' type='array'>
      <numIndex index='0'>Foo</numIndex>
      <numIndex index='1'>foo</numIndex>
    </numIndex>
    <numIndex index='1' type='array'>
      <numIndex index='0'>Bar</numIndex>
      <numIndex index='1'>bar</numIndex>
    </numIndex>
    <numIndex index='2' type='array'>
      <numIndex index='0'>Baz</numIndex>
      <numIndex index='1'>baz</numIndex>
    </numIndex>
  </items>
  <size>1</size>
  <minitems>1</minitems>
  <maxitems>99</maxitems>
</config>

Output: foo,bar,baz

This creates a nice comma separated output of all the values selected. If this is all you need you’re done! If you want to iterate these values to for example, wrap each value with a span check this out:

Separating the comma separated values

The extension VHS probably needs no introduction; it adds a magnitude of extremely useful viewhelpers to FLUID. If you are reading this, you probably have this extension installed anyway.

We want to use the viewhelper v:iterator.explode to separate the values. Now you can define how each value should be rendered in your template.

Note: Don't forget to change the field to your fieldname.

{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<f:for each="{v:iterator.explode(content: '{field.multicheckbox}', glue: ',')}" as="item" iteration="i">
  <span>{item}</span>
</f:for>

Interessiert an unseren TYPO3 Lösungen?

Jetzt Kontakt aufnehmen