Use the pivot filter control

This page shows how to use a pivot filter control.

Tip

Check out our newest documentation on extension development using the Azure DevOps Extension SDK.

Basic usage

This sample shows basic usage of a pivot filter. Please try to use html markup below since it picks up necessary styles from hub-pivot and filters classes.

  <div class="hub-pivot">
    <div class="filters filter-container"></div>
  </div>
  
  <div class="log"></div>

  import Controls = require("VSS/Controls");
  import Navigation = require("VSS/Controls/Navigation");
  
  var container = $(".filter-container");
  
  Controls.create(Navigation.PivotFilter, container, {
    behavior: "dropdown",
    text: "My Filter",
    items: [
      { id: "v-1", text: "Value 1", value: "v1" },
      { id: "v-2", text: "Value 2", value: "v2", selected: true },
      { id: "v-3", text: "Value 3", value: "v3" }
    ],
    change: function(item) {
      var $log = $(".log"); 
      $log.html(`${$log.html()}<p>Filter changed to ${item.text} (${item.value})</p>`);
    }
  });