Change Control Properties

• Oct 06, 2023
• 3 minutes to read

The Dashboard component for React uses properties listed in the DashboardControlOptions class.

State Management Modes

The Dashboard component for React can operate in controlled and uncontrolled state management modes.

In controlled mode, the parent React component updates a Dashboard component’s state. The Dashboard component raises events (for example, onOptionChanged) that you should handle to update the parent component’s state.

In uncontrolled mode, a Dashboard component maintains and update its own state. To specify an initial property value in this mode, add the default prefix to the property name.

You can update options that can be changed while the DashboardControl is running as follows:

• Add the default prefix to the property name to use it in uncontrolled mode.
• Handle the onOptionChanged event and specify the property value in the e.value event argument.

The following example shows how to use controlled and uncontrolled state management modes:

• The dashboardId property is changed according to the selected SelectBox value. The React’s useState hook returns a stateful value (dashboardId), and the setDashboardId function updates it.
• The defaultWorkingMode attribute defines the workingMode property’s initial value.

View Example

import React, { useState } from 'react';
import DashboardControl from 'devexpress-dashboard-react';
import SelectBox from 'devextreme-react/select-box';

const store = [
  "RevenueAnalysis",
  "SalesDetails",
  "SalesOverview"
]

function App() {
  const [dashboardId, setDashboardId] = useState(store[2]);
  return (
    <div style={{ position : 'absolute', top : '0px', left: '0px', right : '0px', bottom: '0px' }}>      
      <SelectBox
        dataSource={store}
        value={ dashboardId }
        onValueChanged={ (e) => setDashboardId(e.value) }>
      </SelectBox>
      <DashboardControl style={{ height: '90%' }} 
        endpoint="https://demos.devexpress.com/services/dashboard/api"
        defaultworkingMode="Designer"
        dashboardId = {dashboardId}>
      </DashboardControl>
  </div>
  );
};

export default App;

Properties of the Object Type

For properties of the Object type, use nested configuration components.

The example below configures the DashboardControlOptions.fetchRemoteService property: sets the server’s URL and passes a custom Authorization header from the client.

import React from 'react';
import './App.css';
import DashboardControl, { FetchRemoteService } from 'devexpress-dashboard-react';

const headerAuth = { "Authorization": "AuthToken123" };

function App() {  
  return (
    <div style={{ position : 'absolute', top : '0px', left: '0px', right : '0px', bottom: '0px' }}>
      <DashboardControl style={{ height: '100%' }} 
        endpoint="http://localhost:5000/api/dashboard">
          <FetchRemoteService
            headers = { headerAuth }/>  
      </DashboardControl>
  </div>
  );
}

export default App;

For the DashboardControlOptions.extensions Object type property, refer to the following topic: Modify Extensions.

You can find more information about properties in the DevExtreme Documentation: Component Configuration Syntax.

More Examples

The example below displays a dashboard in a pop-up window. The useState hook updates the state that contains the dashboard’s ID, name, and information about pop-up visibility. When you click a button, the pop-up becomes visible and renders a dashboard with the specified ID.

import React, { useState } from 'react';
import {DashboardControl} from 'devexpress-dashboard-react';
import Button from 'devextreme-react/button';
import Popup from 'devextreme-react/popup';

function App() {
  const store = [
    {"id": "support", "name": "Support Traffic"},
    {"id": "products", "name": "Product Details"},
  ];
  const dashboardEndpoint = `http://localhost:5000/api/dashboard`

  const [state, setState] = useState({ dashboardInfo: store[0], popupVisible: false  })

  const renderDashboard = () => {
    return <DashboardControl
    style={{ height:'100%', display: 'block', width: '100%' }}
    dashboardId = {state.dashboardInfo.id}
    workingMode = 'ViewerOnly'
    endpoint= { dashboardEndpoint }>
  </DashboardControl>
  }

  return (    
    <div>
      <p>Click one of the buttons below to display a dashboard in the popup window:</p>
      <Button text="Show Support Dashboard" onClick={ () => { setState(prevState => ({...prevState, dashboardInfo: store[0], popupVisible: true })) }}></Button>
      <Button text="Show Products Dashboard" onClick={ () => { setState(prevState => ({...prevState, dashboardInfo: store[1], popupVisible: true })) }}></Button>
      <Popup
          visible={state.popupVisible}
          title={state.dashboardInfo.name}
          contentRender =  {renderDashboard}
          onHiding = { () => { setState(prevState => ({...prevState, popupVisible: false })) }}>
        </Popup>
  </div>
  );
};

export default App;