Use a feature layer (class)

Data sources are a key concept of the ArcGIS Experience Builder architecture. You may want to utilize a data source within your custom widget. This sample demonstrates how to use a feature layer as a data source.

This widget is written as a React class component. The equivalent widget written as a React function component can be found here.

How to use the sample

Clone the sample repo and copy this widget's folder (within widgets) to the client/your-extensions/widgets folder of your Experience Builder installation.

How it works

When the widget is added to an Experience, the Experience author chooses a data source. This data source is available in the code under the useDataSources prop.

In the TSX in the render function near the bottom of use-feature-layer\src\runtime\widget.tsx, the DataSourceComponent is loaded and the data source (this.props.useDataSources[0]) is passed to it (along with some other properties):

<DataSourceComponent useDataSource={this.props.useDataSources[0]} query={this.state.query} refresh={this.state.refresh} queryCount onQueryStart={() => this.setState({refresh: false})}>
  {
    this.dataRender
  }
</DataSourceComponent>

This is the typical usage of DataSourceComponent: you can pass in useDataSource and query, and render the query result by using a render function as a child component. See DataSourceComponent for more information on the properties.

DataSourceComponent uses the render props pattern to pass the DataSource, the IMDataSourceInfo, and count to the child component. In this case, the child is a function that is defined in the custom widget, this.dataRender.