# Get and Set the Dashboard State

This use case implements one Aura component to illustrate the `getState` and `setState` methods in a basic working example. This component contains two `wave:waveDashboard` components, two buttons, and a text box to display the dashboard state for reference. The buttons trigger the calls to `getState` and `setState` methods, which are implemented in the Aura controller code.

## Example: Component Code

Create a simple custom Aura Component with the name `GetSetStateExample`. For more information on how to create Aura components, see the [Lightning Aura Components Developer Guide](https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/intro_components.htm).

The `dashboardDevName` attribute is the fully qualified developer name of the dashboard that you want to use. In production, this value is determined at runtime by discovering the CRM Analytics dashboard developer name. In this example, it’s hard-coded to focus on the state methods. For testing, enter a CRM Analytics dashboard developer name from your test org to replace the `dashboardDevName` default value. Use a dashboard with at least one filter or selection widget so the dashboard state can change with user interaction.

The `lightning:textarea` displays the dashboard state as received by the `getState` call. This state is the same state that’s passed into the `setState` method. This text enables you to inspect the state so that you can experiment and learn as you interact with the `dashboard_1` component.

The two `wave:waveDashboard` components are identical, except for the `aura:id`. The first dashboard, which is used to get the state, has an `aura:id` of `dashboard_1`. The second dashboard, which is used to set the state, has an `aura:id` of `dashboard_2`.

```xml
<aura:component implements="flexipage:availableForAllPageTypes,
    flexipage:availableForRecordHome" access="global" >
      <aura:attribute name="dashboardDevName" type="String" access="global" default="orgNamespace__Dashboard_Name" />
      <aura:attribute name="dashboardState" type="String" access="GLOBAL" default="Click getState"/>

    <div class="container">
      <div class="slds-form-element">
        <lightning:textarea aura:id="dashboardState" value="{!v.dashboardState}" class="json-view" label="Dashboard State" />
      </div>
      <div class="slds-form-element">
        <lightning:button onlick="{!c.getState}" label="getState"/>
      </div>
      <wave:waveDashboard aura:id="dashboard_1" developerName="{!v.dashboardDevName}" height="400"/>
    </div>

    <div class="container">
      <div class="slds-form-element">
        <lightning:button onclick="{!c.setState}" label="setState"/>
      </div>
      <wave:waveDashboard aura:id="dashboard_2" developerName="{!v.dashboardDevName}" height="400"/>
    </div>
</aura:component>
```

## Example: Controller Code

Create a controller for your custom component with the name `GetSetStateExampleController`. The controller code implements the state methods. When the buttons are clicked, each click executes the controller methods. In this example, `console.warn` calls are used to display what the methods are doing in a debugger.

The dashboard state is represented as a JSON object. This example uses the JSON object methods to parse the state into and out of the method payloads and to stringify the JSON for display.

The `getState` function finds `dashboard_1` and calls the `getState` method of that dashboard. In the `callback` function, the dashboard state is stored in the component `dashboardState` attribute for display in the text area and for use by the `setState` function.

The `setState` function gets the dashboard state from the `dashboardState` attribute, parses it back from a string into JSON, and sets it as the `config` parameter. It finds `dashboard_2` and calls the `setState` method of the dashboard with the `config` parameter.

```javascript
({
  getState: function (component, event, helper) {
    var dashboard = component.find("dashboard_1");
    var config = {};

    dashboard.getState(config, function (result, error) {
      if (error) {
        console.warn("getState error: ", error);
      }
      if (result) {
        let state = JSON.parse(JSON.stringify(result.payload));
        console.warn("getState state: ", state);
        let json = JSON.stringify(state, null, 2);
        console.warn("getState json: ", json);
        component.set("v.dashboardState", json);
      }
    });
  },

  setState: function (component, event, helper) {
    var json = component.get("v.dashboardState");
    console.warn("setState json: ", json);

    var config = JSON.parse(json);
    var dashboard = component.find("dashboard_2");
    dashboard.setState(config);
    console.warn("setState Done");
  },
});
```

## Test the Custom Component

1. Create an App Page via the Lightning App Builder with the name `Dashboard State Test`. For detailed steps on creating your page, see [Create an App Home Page with the Lightning App Builder](https://help.salesforce.com/articleView?id=lightning_app_builder_create_app_page.htm\&type=5) in Salesforce Help.

2. Verify that your `GetSetStateExample` component is in the Components menu, under the Custom heading.

3. Drag the `GetSetStateExample` component onto the page, and save your work.

4. Activate your page for visibility in Lightning Experience. For activation details, see [Activate Your Lightning App Page](https://help.salesforce.com/articleView?id=lightning_page_getting_into_salesforce1.htm\&type=5) in Salesforce Help.

5. Load your new `Dashboard State Test` page. On the initial load, both dashboards appear identical.

![Dashboard state component with identical dashboards.](https://a.sfdcstatic.com/developer-website/sfdocs/analytics/media/dashboard-component/bi_dbcomp_initial_load.png)

6. Click **getState**. Notice that the first dashboard component’s state JSON loads in the Dashboard State text area.

7. Change the state of the first dashboard by making a selection or updating the filter. Now the first dashboard looks different than the second dashboard.

![Dashboard state component with different dashboards.](https://a.sfdcstatic.com/developer-website/sfdocs/analytics/media/dashboard-component/bi_dbcomp_state_change\_1.png)

8. To retrieve the updated dashboard state, click **getState** again.

9. To pass the state of the first dashboard to the second dashboard, click **setState**. The second dashboard updates, and the dashboards are identical again.

![Dashboard state component with identical dashboard state again.](https://a.sfdcstatic.com/developer-website/sfdocs/analytics/media/dashboard-component/bi_dbcomp_state_change\_2.png)

For debugging or to see what the controller functions are doing, open the browser console. Each button click generates warning messages that are logged to the console.