This sample shows how to use arcgis-coding-components in a widget. It supports Experience Builder Developer Edition versions 1.17–1.18. For versions prior to 1.17, widgets must initialize the coding components themselves.
Contents
manifest.json- Defines widget metadata and EXB version.src/runtime/widget.tsx- Functional runtime component that imports Calcite Components and Map components.src/setting/setting.tsx- Builder settings panel. Allows users to select a target map widget.
Prerequisites
- ArcGIS Experience Builder Developer Edition versions 1.17-1.18.
Installation
- Clone the SDK resources repository (or download zip).
- Copy the folder
widgets/web-component-widgets/use-coding-componentsinto your EXB installclient/your-extensions/widgets/ - Restart (or rebuild) the EXB dev environment if required.
- Add the widget to an experience and select a map widget in its settings panel.
How it works
The widget uses components from arcgis-coding-components, available in the Experience Builder SDK starting with 1.17. This SDK entry enables multiple widgets to reuse the same shared implementation.
- Data source wiring: Renders a
DataSourceComponentpointed at the selected map's feature layer. - Feature selection: In
onDataSourceInfoChange, grabs the first record from the data source and stores itsfeaturein local state. - Arcade Editor setup: References
ArcgisArcadeEditorviarefand, once afeatureis available, assigns a customprofile(bundles:core,dataAccess,geometry,portal) including$featureresolved to the underlyingFeatureLayer.
License
Please retain the Apache 2.0 license header when using code from this sample, as specified in License.txt.