observeState

Allows to receive contextual state and environmental information of the dashboard. The callback function provided to observeState receives the state data. The function is triggered when dashboard component initializes and whenever the state data is updated.

Common use cases for this method

1. A dashboard page in an app's backoffice, receiving environment data from the host such as the user's locale.
2. A widget rendered within the dashboard, receiving contextual data from the page that's hosting it.
3. A modal opened from a dashboard page or from a widget, receiving data from either.

Signature

1
observeState<P>(observer: Observer<P>): void

Function Parameters

Observer

1
(componentParams: P, environmentState: EnvironmentState) => void

EnvironmentState

1
{
2
  locale: string;
3
  pageLocation: PageLocation;
4
}

PageLocation

1
{
2
  pageId: string;
3
  pathname: string;
4
  search?: string;
5
  hash?: string;
6
}

About pathname

The value of pathname is any part of the URL path that comes after the route to the current dashboard page.

For third-party app dashboard pages, this is anything appended to the URL after the Relative route value that you set when creating the dashboard page extension in the Wix Developers Center.

Examples

To set up a dashboard client, refer to the setup guide.

Receive state passed by your host

1
client.dashboard.observeState((componentParams) => {
2
  // This value is logged on initialization and whenever the `observer` object changes. 
3
  console.log(componentParams.customPageParameter);
4
});

Receive user's locale

1
client.dashboard.observeState((_, environmentState) => {
2
  // This value is logged on initialization and whenever the `observer` object changes. 
3
  console.log(environmentState.locale);  
4
});