Cakephp 3 multiple custom template formhelpers

11,341

Solution 1

What this fix does is allow you to have custom template forms (from cakephp 3!!!!) using bootstrap. If you want to set sizes using the form helper and all of it's goodness (security and what not).

Jose Zap of Cakephp told me to try bootstrap plugins and widgets and what not, but the real way to do this should have been this:

Step 1: Create config/templatesConfig.php and add your custom form stuff.

<?php
$config = [
    'Templates'=>[
        'shortForm' => [
            'formStart' => '<form class="" {{attrs}}>',
            'label' => '<label class="col-md-2 control-label" {{attrs}}>{{text}}</label>',
            'input' => '<div class="col-md-4"><input type="{{type}}" name="{{name}}" {{attrs}} /></div>',
            'select' => '<div class="col-md-4"><select name="{{name}}"{{attrs}}>{{content}}</select></div>',
            'inputContainer' => '<div class="form-group {{required}}" form-type="{{type}}">{{content}}</div>',
            'checkContainer' => '',],
        'longForm' => [
            'formStart' => '<form class="" {{attrs}}>',
            'label' => '<label class="col-md-2 control-label" {{attrs}}>{{text}}</label>',
            'input' => '<div class="col-md-6"><input type="{{type}}" name="{{name}}" {{attrs}} /></div>',
            'select' => '<div class="col-md-6"><select name="{{name}}"{{attrs}}>{{content}}</select></div>',
            'inputContainer' => '<div class="form-group {{required}}" form-type="{{type}}">{{content}}</div>',
            'checkContainer' => '',],
        'fullForm' => [
            'formStart' => '<form class="" {{attrs}}>',
            'label' => '<label class="col-md-2 control-label" {{attrs}}>{{text}}</label>',
            'input' => '<div class="col-md-10"><input type="{{type}}" name="{{name}}" {{attrs}} /></div>',
            'select' => '<div class="col-md-10"><select name="{{name}}"{{attrs}}>{{content}}</select></div>',
            'inputContainer' => '<div class="form-group {{required}}" form-type="{{type}}">{{content}}</div>',
            'checkContainer' => '',]
    ]
];

Step 2: From your controller inside the method for the correct view call this line.

Don't forget add this on the top of your controller

use Cake\Core\Configure;

$this->set('form_templates', Configure::read('Templates'));

Step 3: Add this within the bootstrap.php file

// Load an environment local configuration file.
// You can use this file to provide local overrides to your
// shared configuration.

Configure::load('templatesConfig','default'); //fixed

Step 4(finally): Add this line with the template name you want Bam!.

<?php $this->Form->templates($form_templates['shortForm']); ?>

Solution 2

Let's say you need all inputs to use a custom markup in a form to show the label after the input (default is before) and a different class for the hardcoded error-message for errors:

$this->Form->create($entity, ['templates' => [
    'formGroup' => '{{input}}{{label}}',
    'error' => '<div class="error">{{content}}</div>'
]]);

If you want to only customize a single input, pass the same 'templates' key to the FormHelper::input() options like so:

$this->Form->input('fieldname', ['templates' => [
    'formGroup' => '{{input}}{{label}}',
    'error' => '<div class="error">{{content}}</div>'
]]);

If you need to define multiple templates and re-use them whenever you want, here's something you can try (mind I am writing it here, never used it before):

// in bootstrap (as this is a config i believe
Configure::write('templates', [
    'foo' => [....],
    'bar' => [....]
]);

// in any view
$this->Form->templates(Configure::read('templates.foo'));
$this->Form->create(...);
....

You could also create your own helper and define the templates there, etc.

It really all depends on what you want to achieve but that should give you a good understanding of how templates work (not just in forms by the way).

Share:
11,341
Urasquirrel
Author by

Urasquirrel

I'm passionate about playing with the kaleidoscope of new technologies. I'm always hoping and pushing to make something that changes everything.

Updated on June 21, 2022

Comments

  • Urasquirrel
    Urasquirrel almost 2 years

    So I'm at work (working with sensitive data might I add for posterity's sake), and the powers that be decide we need to use the all powerful and least documented new tool by Cakephp 3.0 (beta at this time).

    Edit: My goal is to create several different templates for forms to call through the formhelper template or input methods. There really isn't much of an a good example for this. Customizing the Templates FormHelper Uses: As seen in the book(and nowhere else on the internet anywhere) the very short documentation is thus: http://book.cakephp.org/3.0/en/core-libraries/helpers/form.html#customizing-the-templates-formhelper-uses

    The site says you can use the template method and then give a vague "use":

    $myTemplates = [
        'inputContainer' => '<div class="form-control">{{content}}</div>',
    ];
    

    $this->Form->templates($myTemplates);

    Then it says you can use the input() method for which it gives no example. And last but not least the custom template FormHelper should allow you to "make" or "create" as many of these custom formhelpers as you wish, but they give no example use of how to do that!? lulwut?

    I can easily use it once like their example, but where's the power in a single custom template? That doesn't do me anygood.

    So by a new possible solution I try and get a new error.

    I get this error(within my view)(from the following code):

    Fatal Error Error: Class 'Configure' not found

    //within bootstrap.php
    Configure::write('templates', [
        'shortForm' => [
            'formstart' => '<form class="" {{attrs}}>',
            'label' => '<label class="col-md-2 control-label" {{attrs}}>{{text}}</label>',
            'input' => '<div class="col-md-4"><input type="{{type}}" name="{{name}}" {{attrs}} /></div>',
            'select' => '<div class="col-md-4"><select name="{{name}}"{{attrs}}>{{content}}</select>    </div>',
            'inputContainer' => '<div class="form-group {{required}}" form-type="{{type}}">{{content}}    </div>',
            'checkContainer' => '',],
        'longForm' => [
            'formstart' => '<form class="" {{attrs}}>',
            'label' => '<label class="col-md-2 control-label" {{attrs}}>{{text}}</label>',
            'input' => '<div class="col-md-6"><input type="{{type}}" name="{{name}}" {{attrs}} /></div>',
            'select' => '<div class="col-md-6"><select name="{{name}}"{{attrs}}>{{content}}</select>    </div>',
            'inputContainer' => '<div class="form-group {{required}}" form-type="{{type}}">{{content}}    </div>',
            'checkContainer' => '',],
        'fullForm' => [
            'formstart' => '<form class="" {{attrs}}>',
            'label' => '<label class="col-md-2 control-label" {{attrs}}>{{text}}</label>',
            'input' => '<div class="col-md-10"><input type="{{type}}" name="{{name}}" {{attrs}} />    </div>',
            'select' => '<div class="col-md-10"><select name="{{name}}"{{attrs}}>{{content}}</select>    </div>',
            'inputContainer' => '<div class="form-group {{required}}" form-type="{{type}}">{{content}}    </div>',
            'checkContainer' => '',]
    ]);
    
    //within my view
    <?php
        $this->Form->templates(Configure::read('templates.shortForm')); 
    ?>
    

    Old Update: I added

    use "Cake\Core\Configure;" 
    

    in my view and everything works great, but I would like to add this to the appropriate file in the hierarchy so that I don't have to add that to every view,

    that is unless of course it causes efficacy issues for the entire app as a whole. Does anyone know which file it should go in? Regards and TIA!

    Newest Update: I just figured it out. So simple! check my answer below! Hope this helped someone