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>