Controls

Enhance your dashboard's adaptability with VizzlyState, a feature designed to dynamically modify filters from outside the component. This allows for a flexible data presentation, catering to real-time changes and user interactions.

Setup

Refer to the Setup Guide to configure VizzlyState for your environment, ensuring seamless integration and functionality.

Reload reload()

To ensure your dashboard always displays the most up-to-date information, the reload() method offers a straightforward solution. This method refreshes the dashboard's data, ideal for responding to data changes or user role updates.

Usage

Incorporate reload() into your application to allow users or system admins to refresh dashboard data on demand. Below are examples in React and HTML for implementing the reload functionality.

Code Example

import Vizzly, { VizzlyState } from '@vizzly/dashboard';
 
return (
  <Fragment>
    <button
      onClick={() =>
        VizzlyState.reload('identifier-123')
      }
    >
      Reload Dashboard
    </button>
    <Vizzly.Dashboard
      id="identifier-123"
      // Your dashboard properties go here, such as `identity`
    />
  </Fragment>
);

Save save()

The save() function enhances dashboard interactivity by enabling developers to save the dashboard state from outside the component. This capability, especially when combined with featureToggles.disableAutoSave, provides developers with precise control over when and how the dashboard state is preserved. It's ideal for implementing custom save triggers or integrating save functionality into a larger application workflow, offering flexibility in user experience design.

It's important to ensure that the scope is set to read_write to utilize the save() function.

Code Example

import Vizzly, { VizzlyState } from '@vizzly/dashboard';
 
return (
  <Fragment>
    <button
      onClick={() =>
        VizzlyState.save('identifier-123')
      }
    >
      Save
    </button>
    <Vizzly.Dashboard
      id="identifier-123"
      // Your dashboard properties go here, such as `identity`
    />
  </Fragment>
);

Feature Control

You can change featureToggles through VizzlyState. This will allow you to dynamically change the way your dashboard behaves with out having to reload the dashboard.

Code Example

import Vizzly, { VizzlyState } from '@vizzly/dashboard';
 
return (
  <Fragment>
    <button
      onClick={() =>
        VizzlyState.set('identifier-123', { featureToggles: { disableAutoSave: true } })
      }
    >
      Save
    </button>
    <Vizzly.Dashboard
      id="identifier-123"
      // Your dashboard properties go here, such as `identity`
    />
  </Fragment>
);