Use expression

This sample demonstrates how to resolve expression for multiple records in a custom widget.

In setting panel, select a data source and add an expression. In widget, you will see the expression is resolved to value. Please note the sample will only load the first page (100 records by default).

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

In setting.tsx, use DataSourceSelector to allow the user to select a data source.

<DataSourceSelector
  onChange={onDataSourceChange} types={SUPPORT_DATA_SOURCE_TYPES}
  useDataSources={useDataSources} widgetId={id} mustUseDataSource
/>

Use ExpressionBuilder to create an expression.

<ExpressionBuilder
  className='w-100' useDataSources={useDataSources} types={SUPPORT_EXPRESSION_TYPES}
  onChange={onExpression} expression={expression} widgetId={id}
/>

In widget.tsx, use DataSourceComponent to create the data source instance and pass in query load records.

<DataSourceComponent useDataSource={useDataSources[0]} query={DEFAULT_QUERY} widgetId={id}>
  {renderData}
</DataSourceComponent>

In renderData of DataSourceComponent, create ExpressionResolverComponent for each record and pass in records to provide data to resolve the expression.

<div className='record-list'>
  {
    dataSource.getRecords().map((r, i) => <ExpressionResolverComponent key={i} records={getRecordsForExpression(r, dataSource.id, dssUsedInExpression)} expression={expression} widgetId={id}>{renderExpressionResult}</ExpressionResolverComponent>)
  }
</div>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close