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 ?