Condition on tab

[david4City]

Is there a solution to hide a tab based on the selection from an other tab. Conditions don't seem to work on tabs.

Enhancement

Would be nice to be able to have condition on a tab

Expected behaviour

Consider this form :

[
  {
    "type": "tabs",
    "tabs": [
      {
        "items": [
          {
            "items": [
              {
                "titleMap": [
                  {
                    "name": "Option A",
                    "value": "clusters_of_delivery_points_1"
                  },
                  {
                    "name": "Option B",
                    "value": "clusters_of_delivery_points_2"
                  },
                  {
                    "name": "Option C",
                    "value": "minimum_linear_density"
                  }
                ],
                "notitle": true,
                "type": "radios",
                "key": "clustering"
              }
            ],
            "title": "Clustering",
            "type": "fieldset",
            "htmlClass": "form-group form-border"
          }
        ],
        "title": "Tab 1"
      },
      {
        "items": [],
        "condition": "model.clustering==='minimum_linear_density'",
        "title": "Tab 2"
      }
    ]
  }
]

Tab 2 should show only when Option C is selected in Tab 1.

[Anthropic]

@david4City I agree, this could be an expected behaviour.

Can you do me a favour and try updating your tabs template to include this:
ng-if="(!tab.condition || evalExpr(tab.condition, { model: model, arrayIndex: $index}))"

The full template would look like this, but adding just one attribute may be easier if you don't want to try compiling the templates.

If you can try that and not find any issues with it then I am happy to look at adding it as a PR.

<div ng-init="selected = { tab: 0 }" class="schema-form-tabs {{form.htmlClass}}">
  <ul class="nav nav-tabs">
    <li ng-repeat="tab in form.tabs"
        ng-disabled="form.readonly"
        ng-click="$event.preventDefault() || (selected.tab = $index)"
        ng-class="{active: selected.tab === $index}"
        ng-if="(!tab.condition || evalExpr(tab.condition, { model: model, arrayIndex: $index}))">
        <a href="#">{{ tab.title }}</a>
    </li>
  </ul>

  <div class="tab-content {{form.fieldHtmlClass}}">
  </div>
</div>

[Anthropic]

It still needs some code in the decorator if you want to destroy the data after it is added if the tab is then hidden. I'll look into that side of it too.

[Anthropic]

Well it appears easy, the builder function for tabs would need to be updated to this

  var tabs = function(args) {
    if (args.form.tabs && args.form.tabs.length > 0) {
      var tabContent = args.fieldFrag.querySelector('.tab-content');

      args.form.tabs.forEach(function(tab, index) {
        var evalExpr = '(evalExpr(' + args.path + '.tabs[' + index + ']' +
                       '.condition, { model: model, "arrayIndex": $index}))';
        var div = document.createElement('div');
        div.className = 'tab-pane';
        div.setAttribute('ng-disabled', 'form.readonly');
        div.setAttribute('ng-show', 'selected.tab === ' + index);
        div.setAttribute('ng-class', '{active: selected.tab === ' + index + '}');
        if(!!tab.condition) {
          div.setAttribute('ng-if', evalExpr);
        };

        var childFrag = args.build(tab.items, args.path + '.tabs[' + index + '].items', args.state);
        div.appendChild(childFrag);
        tabContent.appendChild(div);
      });
    }
  };

[Anthropic]

@david4City you can get the latest dist/angular-schema-form-bootstrap.js (not in the minified version yet) from the latest commit to the webpack branch to give it a try, it includes all the dependencies so you just need that file, you can look at the example file to see how to use it. Be great if you could try it out and let me know how you go :)

[david4City]

Hi.
Thanks for the quick reply.
I can only see the feature/webpack-babel branch.
Is the webpack branch private ?

[Anthropic]

@david4City feature/webpack-babel is what I was referring to :)

[Anthropic]

FYI this still needs work, it fails if you hide the first tab. I remembered there was already a PR to add this functionality a while back in the bootstrap repo. I have been looking at it but it also has the issue of failing if the first tab is not available, once I solve that issue it will be ok, but I need to find a way to push the selected tab value to the first visible tab.

[kyse]

I wrote the PR your referring to I believe? If you email me I'll try and address the issue and update the PR.

[Anthropic]

Hi @kyse, yes this one json-schema-form/angular-schema-form-bootstrap#24

I added a comment to it, I admit I wasn't thinking when I made the basic change above in my own code and ran into the issue where a removed tab can cause issues in tab selection, I added a question to that issue if you can shed some light on it I would appreciate it :)

[waynewalter]

This will be an awesome feature. When can how can I get it please?

[Anthropic]

Just leaving this here for myself :)
#329 also has related information as it manages accordion status display.