CODEWITHSUNDEEP
cakephpcakephp-3.0
user3733648
user3733648

Reputation: 1333

Cakephp 3 Form helper checkbox template

I am trying to change the checkbox template which at the moment looks like

'checkbox' => '<input type="checkbox" name="{{name}}" value="{{value}}"{{attrs}}>',
'checkboxWrapper' => '{{label}}',

which generates html like

<div class="form-group">
 <input class="form-control" type="hidden" name="active" value="0">
  <label for="active">
   <input type="checkbox" name="active" value="1" id="active">
    Active
  </label>
 </div>
</div>

But what I need is that the code should look like

<div class="checkbox m-b-15">
 <input class="form-control" type="hidden" name="active" value="0">
 <label>
  <input type="checkbox" name="active" value="1" id="active">
   <i class="input-helper"></i>
   Active
 </label>
</div>

How should I actually change the template and which templates of FormHelper so that the code look like I need?

Upvotes: 1

Views: 2000

Answers (2)

obinoob
obinoob

Reputation: 657

you can write a custom checkbox, input text etc by using a custom widget! Please read about here: https://book.cakephp.org/3.0/en/views/helpers/form.html#using-widgets

If you still having troubles you can always use my example. Keep in mind that I'm using fully costumized checkbox css is not provided this is just an example in order to help you understand how it works.

What you need:

  1. Create a widget
  2. Load the widget
  3. Load the template in your form view
  4. Render the checkbox :)

In order to write your custom checkbox you need to create a CustomCheckboxWidget class that extends BasicWidget. Now, all you need to do is customize your render function.

This is a complete example: CustomCheckboxWidget

*To use your custom template you need to load the widget by adding the following lines to App.View.php

'Form' => [
   'widgets'  => [
   'custom'  => ['App\View\Widget\CustomCheckboxWidget']
   ],
],

At the initialize function...

In you view form example.ctp just add:

$this->Form->setTemplates([
   'checkbox' => '<div class="{{checkboxstyle}}">'.
   '<input type="checkbox" name="{{name}}" id="{{name}}" value="{{value}}"{{attrs}}>'.
   '<label for="{{name}}"><span class="{{bold}}">{{text}}{{icon}}</span></label>'.
   '{{error}}'.
   '</div>'
]);

And render the custom checkbox obviously:

<?= $this->Form->custom('field',[
   'hiddenField' => false,
   'displayMessage' => true,
   'checkboxstyle' => 'checkbox checkbox-danger',
   'text' => 'Some label'
   ]);
?>

Regards,

Upvotes: 1

RavatSinh Sisodiya
RavatSinh Sisodiya

Reputation: 1608

You can use nestingLabel form template to format your checkbox layout. Use {{input}} {{hidden}} and label

Use following code before your checkbox.

$this->Form->setTemplates([
      'nestingLabel' => '<div class="checkbox m-b-15">{{hidden}}<label{{attrs}}>{{input}}{{text}}</label></div>',
]);

Reference: vendor/cakephp/cakephp/src/View/Helper/FormHelper.php
protected $_defaultConfig = [...]

Upvotes: 2

Related Questions