Custom Widget Datasources Not Loading in Experience Builder Dev Preview

PartyPelican

Hello,

I was wondering if anyone has experienced/fixed this issue. My widget works as expected when in experience builder developer edition. However, when viewing the experience in preview mode, my datasources don't seem to load and the widget throws an error. Line 21 is where the datasource for each layerview should be returned, this doesn't seem to work in preview mode. 

Anyone run into this issue before? I appreciate any help!

 

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>
  );
};

 

 

PartyPelican

Hope this helps people having the same issue but apparently datasources are created on demand, they're not all loaded by default. The solution is to use jimuLayerView.createLayerDataSource(). You can read about it here:

https://github.com/Esri/arcgis-experience-builder-sdk-resources/issues/193