Hello,
could you elaborate on this some more? I think I am having the same issue. I am able to successfully use my widget in the experience builder developer environment, but once I try to preview my experience, my widget is unable to read my datasources. Below is a sample of my code. Line 21 seems to return undefined for the layerview datasource when previewing my experience, but in the builder mode, it works fine.
How can I fix this?
import { DataSource, React, type AllWidgetProps } from "jimu-core";
import { type IMConfig } from "../config";
import { JimuMapView, JimuMapViewComponent } from "jimu-arcgis";
import { MouseEvent, useState } from "react";
import { Dropdown, DropdownButton, DropdownItem, DropdownMenu } from "jimu-ui";
import ConditionController from "./conditionController";
const Widget = (props: AllWidgetProps<IMConfig>) => {
const [dataSources, setDataSources] = useState<DataSource[]>([]);
const [selectedDataSource, setSelectedDataSource] = useState({
dataSource: null,
schema: null,
});
function onActiveViewChange(activeView: JimuMapView) {
console.log(activeView);
if (activeView) {
activeView.whenAllJimuLayerViewLoaded().then(() => {
const layerViews = activeView.getAllJimuLayerViews();
const dataSources = layerViews.map((layerView) => {
return layerView.getLayerDataSource();
});
setDataSources(dataSources);
});
} else {
setDataSources([]);
}
}
function handleDataSourceSelection(mouseEvent: MouseEvent<any, MouseEvent>) {
const ds = dataSources.find(
(ds) => ds.id === (mouseEvent.target as HTMLInputElement).value
);
setSelectedDataSource({ dataSource: ds, schema: ds.getSchema() });
}
return (
<div className="widget-demo jimu-widget m-2">
<p>QueryBuilder Widget</p>
{dataSources.length > 0 && (
<Dropdown activeIcon menuItemCheckMode="singleCheck" menuRole="listbox">
<DropdownButton>
{selectedDataSource.schema?.label || "Select a Datasource"}
</DropdownButton>
<DropdownMenu>
{dataSources.length > 0 &&
dataSources.map((dataSource) => {
return (
<DropdownItem
active={dataSource.id === selectedDataSource.dataSource?.id}
value={dataSource.id}
key={dataSource.id}
onClick={handleDataSourceSelection}
>
{dataSource.getSchema().label}
</DropdownItem>
);
})}
</DropdownMenu>
</Dropdown>
)}
{selectedDataSource.schema && selectedDataSource.schema.fields && (
<ConditionController
fields={Object.keys(selectedDataSource.schema.fields).map(
(k) => selectedDataSource.schema.fields[k]
)}
key={selectedDataSource.dataSource?.id}
/>
)}
<JimuMapViewComponent
useMapWidgetId={props.useMapWidgetIds?.[0]}
onActiveViewChange={onActiveViewChange}
/>
</div>
);
};
