Custom Form Template - a couple issues

[Bren]

Hello all.
I made a custom form template that looks good and flows/tabs the way I need top down in 3 columns (versus left to right in each row); but has a couple issues that I haven't figured out, yet. My first element has a validation that is missing the Eyeball with the tool tip "This is a required field". The validation alert works on submit; but doesn't highlight the element.
Also, I have a radio button element that looks good; but when the state is changed it doesn't get recorded / updated after submit in the form. Below is a copy of my custom form template changes from the default.php file.

<?php
/**
* Bootstrap Form Template
*
* @package     Joomla
* @subpackage  Fabrik
* @copyright   Copyright (C) 2005-2016  Media A-Team, Inc. - All rights reserved.
* @license     GNU/GPL http://www.gnu.org/copyleft/gpl.html
* @since       3.1
*/

// No direct access
defined('_JEXEC') or die('Restricted access');

$form = $this->form;
$model = $this->getModel();
$groupTmpl = $model->editable ? 'group' : 'group_details';
$active = ($form->error != '') ? '' : ' fabrikHide';

if ($this->params->get('show_page_heading', 1)) : ?>
    <div class="componentheading<?php echo $this->params->get('pageclass_sfx')?>">
        <?php echo $this->escape($this->params->get('page_heading')); ?>
    </div>
<?php
endif;

if ($this->params->get('show-title', 1)) :?>
<div class="page-header">
    <h1><?php echo $form->label;?></h1>
</div>
<?php
endif;

echo $form->intro;
?>
<form method="post" <?php echo $form->attribs?>>
<?php
echo $this->plugintop;
?>

<div class="fabrikMainError alert alert-error fabrikError<?php echo $active?>">
    <button class="close" data-dismiss="alert">×</button>
    <?php echo $form->error; ?>
</div>

<div class="row-fluid nav">
    <div class="<?php echo FabrikHelperHTML::getGridSpan(6); ?> pull-right">
        <?php
        echo $this->loadTemplate('buttons');
        ?>
    </div>
    <div class="<?php echo FabrikHelperHTML::getGridSpan(6); ?>">
        <?php
        echo $this->loadTemplate('relateddata');
        ?>
    </div>
</div>


    <?php
    /* Load the group template - this can be :
     *  * default_group.php - standard group non-repeating rendered as an unordered list
     *  * default_repeatgroup.php - repeat group rendered as an unordered list
     *  * default_repeatgroup_table.php - repeat group rendered in a table.
     */
    //$this->elements = $group->elements;
    //echo $this->loadTemplate($group->tmpl);
   
    /*Display elements directly by group + element name; only element labels and content, no group settings used;*/
    $sitename = $this->groups['Sites']->elements['site_name'];
    $address= $this->groups['Sites']->elements['address'];
    $city = $this->groups['Sites']->elements['city'];
    $state = $this->groups['Sites']->elements['state'];
    $zip = $this->groups['Sites']->elements['zip'];
    $contact = $this->groups['Sites']->elements['contact'];
    $phone= $this->groups['Sites']->elements['phone'];
    $email = $this->groups['Sites']->elements['email'];
    $notes = $this->groups['Sites']->elements['notes'];
    $sitedocs = $this->groups['Sites']->elements['site_docs'];
    $sitestatus = $this->groups['Sites']->elements['site_status'];
    ?>
   
    <fieldset class="<?php echo $group->class; ?>" id="group<?php echo $group->id;?>" style="<?php echo $group->css;?>">
        <div class="span6">
            <div class="row-fluid">
                <div class="control-group <?php echo $element>containerClass ; ?>">
                    <div class="fabrikLabel myLabel">
                        <?php echo $sitename->label_raw;?>
                    </div>
                    <div class="fabrikElement myElement">
                        <?php echo $sitename->element;?>
                    </div>
                </div>
            </div>
            <div class="row-fluid">
                <div class="control-group <?php echo $element>containerClass ; ?>">
                    <div class="fabrikLabel myLabel">
                        <?php echo $address->label_raw;?>
                    </div>
                    <div class="fabrikElement myElement">
                        <?php echo $address->element;?>
                    </div>
                </div>
            </div>
            <div class="row-fluid">
                <div class="control-group <?php echo $element>containerClass ; ?>">
                    <div class="fabrikLabel myLabel">
                        <?php echo $city->label_raw;?>
                    </div>
                    <div class="fabrikElement myElement">
                        <?php echo $city->element;?>
                    </div>
                </div>
            </div>
            <div class="row-fluid">
                <div class="control-group <?php echo $element>containerClass ; ?>">
                    <div class="fabrikLabel myLabel">
                        <?php echo $state->label_raw;?>
                    </div>
                    <div class="fabrikElement myElement">
                        <?php echo $state->element;?>
                    </div>
                </div>
            </div>
            <div class="row-fluid">
                <div class="control-group <?php echo $element>containerClass ; ?>">
                    <div class="fabrikLabel myLabel">
                        <?php echo $zip->label_raw;?>
                    </div>
                    <div class="fabrikElement myElement">
                        <?php echo $zip->element;?>
                    </div>
                </div>
            </div>
        </div>
           
        <div class="span6">
            <div class="row-fluid">
                <div class="control-group <?php echo $element>containerClass ; ?>">
                    <div class="fabrikLabel myLabel">
                        <?php echo $contact->label_raw;?>
                    </div>
                    <div class="fabrikElement myElement">
                        <?php echo $contact->element;?>
                    </div>
                </div>
            </div>
            <div class="row-fluid">
                <div class="control-group <?php echo $element>containerClass ; ?>">
                    <div class="fabrikLabel myLabel">
                        <?php echo $phone->label_raw;?>
                    </div>
                    <div class="fabrikElement myElement">
                        <?php echo $phone->element;?>
                    </div>
                </div>
            </div>
            <div class="row-fluid">
                <div class="control-group <?php echo $element>containerClass ; ?>">
                    <div class="fabrikLabel myLabel">
                        <?php echo $email->label_raw;?>
                    </div>
                    <div class="fabrikElement myElement">
                        <?php echo $email->element;?>
                    </div>
                </div>
            </div>
            <div class="row-fluid">
                <div class="control-group <?php echo $element>containerClass ; ?>">
                    <div class="fabrikLabel myLabel">
                        <?php echo $notes->label_raw;?>
                    </div>
                    <div class="fabrikElement myElement">
                        <?php echo $notes->element;?>
                    </div>
                </div>
            </div>
        </div>
       
        <div class="span6">
            <div class="row-fluid">
                <div class="control-group <?php echo $element>containerClass ; ?>">
                    <div class="fabrikLabel myLabel">
                        <?php echo $sitedocs->label_raw;?>
                    </div>
                    <div class="fabrikElement myElement">
                        <?php echo $sitedocs->element;?>
                    </div>
                </div>
            </div>
            <div class="row-fluid">
                <div class="control-group <?php echo $element>containerClass ; ?>">
                    <div class="fabrikLabel myLabel">
                        <?php echo $sitestatus->label_raw;?>
                    </div>
                    <div class="fabrikElement myElement">
                        <?php echo $sitestatus->element;?>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>

<?php   
if ($model->editable) : ?>
<div class="fabrikHiddenFields">
    <?php echo $this->hiddenFields; ?>
</div>
<?php
endif;

echo $this->pluginbottom;
echo $this->loadTemplate('actions');
?>
</form>
<?php
echo $form->outro;
echo $this->pluginend;
echo FabrikHelperHTML::keepalive();

Does anyone see a mistake that I may have made or has any suggestions?
Thanks in advance.

 

[troester]

With custom form templates you must make sure to keep all Fabrik structure.

In fieldset all $group-> stuff is not defined (which may be ok as long as you don't try to do some JS on groups etc)

Your elements are missing all stuff which is necessary for tooltips (see e.g. default_group_label_above.php)
I assume there's also something (class, id) missing for the radio button which is using JS for display.

And if you don't include the id element I can't imagine that it's updating any data.
So stay nearer to the Fabrik way by copying the structure from default_group.php and default_group_xylabels.php into default.php

BTW: If you only want to have 3 columns you can set the group(s) layout to 3 columns and reorder your elements, no need for a custom form.

 

[Bren]

Hi troester.
I wish there was a better wiki on how to create customer form templates. I copied and added to the example from the wiki link below to create what I've got. I also followed Robs old vid from the wiki for creating a custom details view template. Something more guidance for custom forms would be great.
http://www.fabrikar.com/forums/index.php?wiki/form-and-details-templates/

Yes, I was using the 3 column layout before making the custom form template; but I don't like the left to right tab order by row. I really need the tab order to go vertically top to bottom in each column first then more right. My custom form template works well for the tab order. Any other suggestions?
Thanks in advance.