Since version: 1.32
The Experience Builder Widget Formatting profile is used for widgets in ArcGIS Experience Builder, excluding list widgets and widgets within list items. This profile allows you to write expressions that generate dynamic content and styles based on the widget's data sources. For dynamic content, the expression is expected to return a value. For dynamic style, the expression should return a dictionary containing supported style properties and their corresponding values.
Context
The following products implement this profile:
Spatial reference
This profile does not include geometry functions and therefore does not need to define a spatial reference for the execution context.
Time zone
The Experience Builder time zone determines the execution context's default time zone.
Profile variables
| Variable Name | Type | Description |
|---|---|---|
$data | Dictionary | The data sources used by the widget. |
$data is a dictionary containing key-value pairs, where each key is a data source ID (e.g., data). $data has the following properties:
| Property | Type | Description |
|---|---|---|
layer | FeatureSet | A reference to a server-side or client-side layer. |
query | Dictionary | Filters that have been applied to the layer. |
selected | FeatureSet | Features that have been selected in the data source. |
loaded | FeatureSet | Features already loaded in the data source. |
loaded | Text[] | A list of field names representing fields already loaded in the data source. |
$data is a dictionary containing the following properties:
| Property | Type | Description |
|---|---|---|
distance | Number | The distance used for spatial filtering. |
geometry | Geometry | The geometry used to filter the data source. |
geometry | Number | The number of decimal places for geometries returned by the query operation. |
gdb | Text | The version of the geodatabase used for the data source. |
group | Text[] | An array of field names used for grouping statistics in the data source. |
object | Text[] | An array of object IDs representing the features in the data source. If specified, the query will only be executed against these features. |
order | Text[] | An array of field names used to order or sort the results. Specify ASC (ascending) or DESC (descending) after the field name to control the order. |
out | Text[] | An array of field names to be returned in the data source. |
out | Dictionary[] | |
return | Boolean | Indicates whether distinct values should be returned in the data source. |
return | Boolean | Indicates whether the geometry of the features should be returned. |
return | Boolean | Indicates whether the M values of the geometry should be returned. |
return | Boolean | Indicates whether the Z values of the geometry should be returned. |
spatial | Text | The spatial relationship used to filter the data source (e.g., intersects, contains, crosses, overlaps, touches, etc.). |
sql | Text | The SQL format used for the data source (e.g., none | standard | native). |
time | Dictionary | A dictionary containing the start and end time of the data source's time extent, with keys start and end, both of type Date. |
units | Text | The units used for the distance (e.g., meters, kilometers, etc.). |
where | Text | SQL where clause used to filter the data source based on attribute values. |
Function bundles
Return types
Number | Text | Date | DateOnly | Time | Dictionary
If the return value is text, number, or date, the value will be used as dynamic content to display in the widget. If the return value is a dictionary, the dictionary can contain value and styles. Style can change the rendering style of the widget.
For a list of valid dictionary keywords, click here.
Example
var dataSource = $dataSources['dataSource_1-187acf797e1-layer-5-selection'];
var selectedFeatures = dataSource.selectedFeatures;
var featureCount = Count(selectedFeatures);
var color = '';
var icon = null;
if (featureCount <= 0) {
color = 'black';
icon = {
name: 'Icon 1',
color: 'white'
};
} else if (featureCount <= 50) {
color = 'yellow';
icon = {
name: 'Icon 2',
color: 'blue'
};
} else {
color = 'green';
icon = {
name: 'Icon 3',
color: 'red'
};
}
return {
background: {
color
},
icon
};