ItemState Class

Contains states of individual dashboard items displayed in the dashboard.

Declaration

export class ItemState

Remarks

A dashboard state describes the result of client actions end-users perform on a dashboard:

State Value	API
selected master filters values	ItemState.MasterFilterValues
current drill-down levels	ItemState.DrillDownValues
a selected tab page	ItemState.TabPageName
Range Filter settings	ItemState.RangeFilterState
a selected dashboard item layer1	ItemState.SelectedLayerIndex
selected parameter values	DashboardState.Parameters

¹ For the Pie, Card, Treemap, Gauge and Choropleth Map dashboard items.

The following example shows how to apply the dashboard state to the Energy Statistics demo. The Year parameter is 2008, the Card‘s master filter value is Solid Fuels.

public btnClick() {
  var state: DashboardState = { 
    Parameters:{ 
      "Year": 2008 
    }, 
    Items: {
      "cardProductionImportByType": {
        MasterFilterValues: [["Solid Fuels"]]
      }
    } 
  }
  this.dashboardControl.setDashboardState(state);
}

The code below shows how to apply the dashboard state to the Sales Overview demo. The Range Filter‘s predefined period is 6 Month, the Grid‘s master filter value is Nevada.

public btnClick() {
  var state: DashboardState = { 
    // ... 
    Items: {
      "gridSalesByState": {
        MasterFilterValues: [["Nevada"]]
      },
      "range": {
        RangeFilterState: {
          PeriodName: "6 Months"
        }
      }
    } 
  }
  this.dashboardControl.setDashboardState(state);
}

Use the DashboardControl.setDashboardState method to apply a dashboard state to the loaded dashboard.

Properties

DrillDownValues Property

Specifies values for the drill-down hierarchy.

Declaration

DrillDownValues?: Array<PrimitiveType>

Property Value

Type	Description
Array<PrimitiveType>	An array of the PrimitiveType objects that specify values for the drill-down hierarchy.

Remarks

The code below shows how to specify the drill-down values in the Customer Support demo when you set a dashboard state. The Chart’s drill-down value is Mobile.

public btnClick() {
  var state: DashboardState = { 
    // ... 
    Items: {
      "chartProcessedIssuesByPlatform": {
        DrillDownValues: ["Mobile"]
      }
    } 
  }
  this.dashboardControl.setDashboardState(state);
}

MasterFilterValues Property

Specifies selected master filter values.

Declaration

MasterFilterValues?: Array<Array<PrimitiveType>>

Property Value

Type	Description
Array<Array<PrimitiveType>>	An array of the PrimitiveType object arrays that specify selected master filter values.

Remarks

The code below shows how to apply the master filter values in the Sales Overview demo when you set a dashboard state. The Grid’s master filter values are Nevada and Texas.

public btnClick() {
  var state: DashboardState = { 
    // ... 
    Items: {
      "gridSalesByState": {
        MasterFilterValues: [["Nevada"], ["Texas"]]
      }
    } 
  }
  this.dashboardControl.setDashboardState(state);
}

RangeFilterState Property

Specifies the state of the Range Filter dashboard item.

Declaration

RangeFilterState?: RangeFilterState

Property Value

Type	Description
RangeFilterState	A RangeFilterState object that specifies the state of the Range Filter dashboard item.

Remarks

The code below shows how to specify a predefined period (6 months) to a Range Filter when you set a dashboard state:

public btnClick() {
  var state: DashboardState = { 
    // ... 
    Items: {
      "range": {
        RangeFilterState: {
          PeriodName: "6 Months"
        }
      }
    } 
  }
  this.dashboardControl.setDashboardState(state);
}

The code below shows how to apply a custom period (from January, 2017 to June, 2018) to a Range Filter when you set a dashboard state:

public btnClick() {
  var state: DashboardState = { 
    // ... 
    Items: {
      "range": {
        RangeFilterState: {
          Selection: {
            Minimum: new Date(2017, 0, 1),
            Maximum: new Date(2018, 5, 1)
          }
        }
      }
    } 
  }
  this.dashboardControl.setDashboardState(state);
}

SelectedLayerIndex Property

Specifies an index of the selected dashboard item layer.

Declaration

SelectedLayerIndex?: number

Property Value

Type	Description
number	An integer value that specifies an index of the selected layer.

Remarks

The code below shows how to apply the selected layer index in the Sales Performance demo when you set a dashboard state. The Choropleth Map’s layer index is set to 2.

public btnClick() {
  var state: DashboardState = { 
    // ... 
    Items: {
      "choroplethMapSalesByState": {
        SelectedLayerIndex: 2
      }
    } 
  }
  this.dashboardControl.setDashboardState(state);
}

TabPageName Property

Specifies the selected tab page name for the Tab Container.

Declaration

TabPageName?: string

Property Value

Type	Description
string	A string that is a component name of the selected tab page.

Remarks

The code below shows how to specify a tab page in the Sales Details demo when you set a dashboard state. The tab page’s name is set to pageDashboardItem3.

public btnClick() {
  var state: DashboardState = { 
    // ... 
    Items: {
      "tabContainerDashboardItem1": {
        TabPageName: "pageDashboardItem3"
      }
    } 
  }
  this.dashboardControl.setDashboardState(state);
}