Access Multiple Domains and Workspaces
Sometimes, you need to render visualizations from different workspaces and different domains on one page. For example, you might be creating a dashboard with a sales overview for different products, or you want to use a product from a different domain to benchmark products in your current domain.
Every GoodData.UI instance is connected to a specific domain. To use multiple domains in the same application, create multiple GoodData.UI instances and pass them to your components. Every component imported from @gooddata/react-components
contains an optional sdk
property, by which you can specify the component that will fetch data.
Example
import React, { PureComponent } from "react";
import bearFactory from "@gooddata/sdk-backend-bear";
import { InsightView } from "@gooddata/sdk-ui-ext";
export default class SampleVisualizations extends PureComponent {
constructor(props) {
super(props);
const domain1 = "my-custom-domain.com";
this.backend1 = bearFactory({ hostname: domain1 });
const domain2 = "another-custom-domain.com";
this.backend2 = bearFactory({ hostname: domain2 });
}
render() {
return (
<div>
<div style={{ height: 400, width: 600 }}>
<InsightView
backend={this.backend1}
workspace="<workspaceId-from-backend1>"
insight="<identifier-from-backend1>"
/>
</div>
<div style={{ height: 400, width: 600 }}>
<InsightView
backend={this.backend2}
workspace="<workspaceId-from-backend2>"
insight="<identifier-from-backend2>"
/>
</div>
</div>
);
}
}