Professional Forum: Reply to post 'form bootstrap_tabs'

VOI · Mar 28, 2014

Hi,

just read the following post in the Professional Support forum:
http://www.fabrikar.com/forums/index.php?threads/form-bootstrap_tabs.38081/

Since I only subscribed to Standard Support I thought I post my solution here:
I implemented a feature to highlight any tabs with validation errors on my site by replacing line 72 of default.php of the bootstrap_tabs template with the following lines:

Code:

<li <?php
      $is_err = false;
      foreach ($group->elements as $element) {
        if ($element->error != '') {
          $is_err = true;
          break;
        } 
      }
      if ($i == 0) {
        if ($is_err) {
          echo 'class="active fabrikErrorGroup"';
        } else {
          echo 'class="active"';
        }
      } elseif ($is_err) {
        echo 'class="fabrikErrorGroup"';
      }
      echo ' style="'.$group->css.'"';
      ?>>

In the custom_css.php file I then added the following lines:

Code:

/* color & highlight group with validation errors */
.fabrikErrorGroup a {
    background-color: rgb(242, 222, 222) !important;
  color: #b94a48;
}
 
.active.fabrikErrorGroup a,
.active.fabrikErrorGroup a:hover,
.active.fabrikErrorGroup a:focus {
    border: 1px solid #b94a48 !important;
    border-bottom-color: transparent !important;
  color: #b94a48 !important;
  background-color: rgb(255, 255, 255) !important;
}
 
.fabrikErrorGroup a:hover,
.fabrikErrorGroup a:focus {
    background-color: rgb(222, 173, 173) !important;
  color: #b94a48;
}

Maybe someone wants to use this code as well.

Chris

cheesegrits · Mar 31, 2014

Thank you. We should probably build that in.

I'll add a github issue to keep that on our radar.

-- hugh

cheesegrits · Mar 31, 2014

Although thinking about it, it really needs to be done in JavaScript, no in PHP in the template, for when AJAX validations are used. An AJAX validation won't re-build the page from the template on the server side.

So it would have to be done somewhere in the form.js, in a function that could be triggered again after an AJAX validation, which adds / removes the error class from the tab as appropriate. Can't remember if we already have a way for the JS to detect if it's dealing with a tabbed template or not, though.

Here's the github issue:

https://github.com/Fabrik/fabrik/issues/1221

-- hugh

chris.paschen · Apr 12, 2017

Is there any update available to this (it's been a while and I think the template file code has changed a bit).

Am I checking the correct file (/components/com_fabrik/views/form/tmpl/bootstrap_tabs/default.php)?
I'm not seeing any <li> item in that folder at all. Am I just in the wrong folder/file?

(using Fabrik 3.5.2)

troester · Apr 12, 2017

Best is not to modify bootstrap_tabs (will be overridden by an update) but to create a custom template:
just copy the bootstrap_tabs folder to eg bootstrap_tabs_err

in default.php I did (in code mode you can't highlight, so code as plain text here)
...
foreach ($this->groups as $group) :
$this->elements = $group->elements;
$is_err = false;
foreach ($group->elements as $element) {
if ($element->error != '') {
$is_err = true;
break;
}
}

$err_class = $is_err ? 'fabrikErrorGroup' : '';

$tabId = $this->form->id . '_' . (int)$this->rowid . '_' . $i;
// If this is multi-page then groups are consolidated until a group with a page break
// So we should only show a tab if: it is first tab, or if it is a page break
if (!$model->isMultiPage() || $i === 0 || $group->splitPage) :
$tab = new stdClass;
$tab->class = $i === 0 ? 'active '.$err_class : $err_class;
$tab->css = $group->css;
$tab->href = 'group-tab' . $tabId;
$tab->id = 'group' . $group->id . '_tab';
$tab->label = !empty($group->title) ? $group->title : $group->name;;
$tabs[] = $tab;
$i ++;
endif;
endforeach;
...

custom_css.php is still like @VOI mentioned.

cheesegrits · Apr 12, 2017

@troester - do you see any reason not to merge those changes into github, and put the CSS in our main fabrik.css?

-- hugh

troester · Apr 12, 2017

See your post #3 ^^
If I understand it correctly the php won't cover ajax validations.

But would it break anything?

cheesegrits · Apr 12, 2017

Oh yeah, duh.

Hmmm, not sure if it'd hurt, or whether I can figure a way to do it in JS that works for both.

-- hugh

chris.paschen · Apr 14, 2017

OK ... I'm not finding any code block in my bootstrap_tabs/default.php file that begins with:

foreach ($this->groups as $group) :
$this->elements = $group->elements;

Just to make sure I'm in the proper place, I'm looking in /components/com_fabrik/views/form/tmpl/boostrap_tabs
Although I'm actually working on a copy of this in a different directory, but I've checked the original /boostrap_tabs directory's default.php (as well as the same on a completely different fabrik install, and in my latest download of the 3.2 version from github).

The closest things I'm seeing are 2 different foreach blocks:

foreach ($this->groups as $group) :
$tabId = $this->form->id . '_' . (int)$this->rowid . '_' . $i;
...

and

foreach ($this->groups as $group) :
$this->group = $group;
$tabId = $this->form->id . '_' . (int)$this->rowid . '_' . $i;
if ($i == 0 || !$model->isMultiPage() || $group->splitPage) :
if ($i != 0) :
...

Am I just in the wrong view? Or is there something else that I'm missing?

cheesegrits · Apr 14, 2017

It's the first one, @troester just didn't highlight that elements line as being new.

https://github.com/Fabrik/fabrik/bl...iews/form/tmpl/bootstrap_tabs/default.php#L70

-- hugh

chris.paschen · Apr 14, 2017

I made that change, but still not seeing any change in tabs.
I also don't see any 'fabrikErrorGroup' tags applied to any tabs (even though there is an error on one).

My code for that file starting at line 72 is now:

foreach ($this->groups as $group) :

$this->elements = $group->elements;
$is_err = false;
foreach ($group->elements as $element) {
if ($element->error != '') {
$is_err = true;
break;
}
}

$err_class = $is_err ? 'fabrikErrorGroup' : '';

$tabId = $this->form->id . '_' . (int)$this->rowid . '_' . $i;
// If this is multi-page then groups are consolidated until a group with a page break
// So we should only show a tab if: it is first tab, or if it is a page break
if (!$model->isMultiPage() || $i === 0 || $group->splitPage) :
$tab = new stdClass;
$tab->class = $i === 0 ? 'active '.$err_class : $err_class;
$tab->class = $i === 0 ? 'active' : '';
$tab->css = $group->css;
$tab->href = 'group-tab' . $tabId;
$tab->id = 'group' . $group->id . '_tab';
$tab->label = !empty($group->title) ? $group->title : $group->name;;
$tabs[] = $tab;
$i ++;
endif;
endforeach;

I did notice that the original code from VOI starts with :

<li <?php
$is_err = false;
foreach ($group->elements as $element) {

However, the code from troetster starts directly with:

foreach ($this->groups as $group) :

There's no "<li" in his, and not in my file either. Is that something that got changed in the core template and not needed or am I actually missing something?

troester · Apr 15, 2017

The template has changed, no <li anymore.
But
$tab->class = $i === 0 ? 'active '.$err_class : $err_class;
$tab->class = $i === 0 ? 'active' : ''; remove this line

Did you create the custom_css.php?

chris.paschen · Apr 15, 2017

OK ... I finally figured it out. I'm documenting for anyone that follows this in the future.

First, I removed that extra line from the default file.
However, I was still not getting the styling correct, although it was at least showing an error class on the tab.
However, the tab wasn't displaying properly yet.
I noticed that the class on the tab was 'fabrikErrorGroup, but for some reason the sample CSS above didn't include just ".fabrikErrorGroup" as one of the classes styled. I'm not sure why the system wasn't working, but I added that to the first style section, so that it now was:

/* color & highlight group with validation errors */
.fabrikErrorGroup,
.fabrikErrorGroup a {
background-color: rgb(108, 48, 77) !important;
color: #ffffff;
}

Yet, it still wasn't being applied.

I'm using Gantry 5 for our template and I remember seeing several comments around the forum that there were some 'issues' with the custom_css.php and gantry templates.

I moved all the styling into my gantry template override file and now it works fine.

Thanks for helping get through this. And I'd also 'vote' to have this added to the package (if it doesn't cause any issues).

cheesegrits · Apr 16, 2017

I implemented this locally, and added handling for Ajax submits. I'll commit it soon.

Sent from my HTC6545LVW using Tapatalk

cheesegrits · Apr 17, 2017

OK, should be working in github as of this commit:

https://github.com/Fabrik/fabrik/commit/93d6be23f6750a1e182bcccf4330d4164376a053

I added the styling to the tabs template.css. Also should be working in AJAX submits.

-- hugh

Professional Forum: Reply to post 'form bootstrap_tabs'

VOI

Member

cheesegrits

Support Gopher

cheesegrits

Support Gopher

chris.paschen

Chris Paschen

troester

Administrator

cheesegrits

Support Gopher

troester

Administrator

cheesegrits

Support Gopher

chris.paschen

Chris Paschen

cheesegrits

Support Gopher

chris.paschen

Chris Paschen

troester

Administrator

chris.paschen

Chris Paschen

cheesegrits

Support Gopher

cheesegrits

Support Gopher

Useful links

Members online