DataSourceComponent

Function

DataSourceComponent(props: { children?: ReactNode | DataRenderFunction; dataSource?: DataSource; forceRefreshVersion?: number; localId?: string; onAllChildDataSourcesCreated?: (ds: DataSource) => void; onCreateDataSourceFailed?: (err: any) => void; onDataSourceCreated?: (ds: DataSource) => void; onDataSourceInfoChange?: (info: IMDataSourceInfo, preInfo?: IMDataSourceInfo) => void; onDataSourceSchemaChange?: (schema: IMDataSourceSchema, prevSchema?: IMDataSourceSchema) => void; onDataSourceStatusChange?: (status: DataSourceStatus, preStatus?: DataSourceStatus) => void; onQueryRequired?: (queryRequiredInfo: QueryRequiredInfo, preQueryRequiredInfo?: QueryRequiredInfo) => void; onSelectionChange?: (selection: ImmutableArray<string>, preSelection?: ImmutableArray<string>) => void; query?: QueryParams; queryCount?: boolean; queryScope?: QueryScope; useDataSource?: ImmutableObjectMixin<UseDataSource> & { dataSourceId: string; dataViewId?: string; fields?: ImmutableArray<string>; mainDataSourceId: string; rootDataSourceId?: string; useFieldsInPopupInfo?: boolean; useFieldsInSymbol?: boolean }; widgetId?: string }, context?: any): ReactElement<any, any>

A react component that makes data source easy to use. It helps widgets to create data source instance, load records and listen changes of data source. In most cases, you can pass in useDataSource and query , and render the query result by using a render function as a child component. The query result records are put into data source records property (Internally, it calls load() method).

Use dark colors for code blocksCopy
<DataSourceComponent useDataSource={props.useDataSources[0]} onDataSourceCreated={handleDataSourceCreated} onCreateDataSourceFailed={handleDataSourceFailed} onDataSourceInfoChange={handleDataSourceChange} />

Use dark colors for code blocksCopy
const renderData = (ds: DataSource, info: IMDataSourceInfo) => {
return <div>
{
  ds && ds.getRecords().map(r => <div>{r.getId()}</div>)
}
</div>
}
<DataSourceComponent widgetId={props.id} query={{ where: '1=1' }} useDataSource={props.useDataSources[0]}>{renderData}</DataSourceComponent>

Parameters

Parameter Type

Parameter	Type
`props`	{ children?: ReactNode \| DataRenderFunction; dataSource?: DataSource; forceRefreshVersion?: number; localId?: string; onAllChildDataSourcesCreated?: (ds: DataSource) => void; onCreateDataSourceFailed?: (err: any) => void; onDataSourceCreated?: (ds: DataSource) => void; onDataSourceInfoChange?: (info: IMDataSourceInfo, preInfo?: IMDataSourceInfo) => void; onDataSourceSchemaChange?: (schema: IMDataSourceSchema, prevSchema?: IMDataSourceSchema) => void; onDataSourceStatusChange?: (status: DataSourceStatus, preStatus?: DataSourceStatus) => void; onQueryRequired?: (queryRequiredInfo: QueryRequiredInfo, preQueryRequiredInfo?: QueryRequiredInfo) => void; onSelectionChange?: (selection: ImmutableArray<string>, preSelection?: ImmutableArray<string>) => void; query?: QueryParams; queryCount?: boolean; queryScope?: QueryScope; useDataSource?: ImmutableObjectMixin<UseDataSource> & { dataSourceId: string; dataViewId?: string; fields?: ImmutableArray<string>; mainDataSourceId: string; rootDataSourceId?: string; useFieldsInPopupInfo?: boolean; useFieldsInSymbol?: boolean }; widgetId?: string }
`context`	any

props

{ children?: ReactNode | DataRenderFunction; dataSource?: DataSource; forceRefreshVersion?: number; localId?: string; onAllChildDataSourcesCreated?: (ds: DataSource) => void; onCreateDataSourceFailed?: (err: any) => void; onDataSourceCreated?: (ds: DataSource) => void; onDataSourceInfoChange?: (info: IMDataSourceInfo, preInfo?: IMDataSourceInfo) => void; onDataSourceSchemaChange?: (schema: IMDataSourceSchema, prevSchema?: IMDataSourceSchema) => void; onDataSourceStatusChange?: (status: DataSourceStatus, preStatus?: DataSourceStatus) => void; onQueryRequired?: (queryRequiredInfo: QueryRequiredInfo, preQueryRequiredInfo?: QueryRequiredInfo) => void; onSelectionChange?: (selection: ImmutableArray<string>, preSelection?: ImmutableArray<string>) => void; query?: QueryParams; queryCount?: boolean; queryScope?: QueryScope; useDataSource?: ImmutableObjectMixin<UseDataSource> & { dataSourceId: string; dataViewId?: string; fields?: ImmutableArray<string>; mainDataSourceId: string; rootDataSourceId?: string; useFieldsInPopupInfo?: boolean; useFieldsInSymbol?: boolean }; widgetId?: string }

context

any

Returns

ReactElement<any, any>

ArcGIS Experience BuilderAPI Reference

DataSourceComponent

Was this page helpful?

Was this page helpful?