Widget

What is a widget?

A widget in ArcGIS Experience Builder is a modular, configurable component that provides specific functionality within your web application. Widgets can handle various tasks such as displaying maps, managing user interactions through buttons, or visualizing data through lists and charts. Through configuration of widgets, developers can create interactive and dynamic web applications.

Experience Builder includes two categories of widgets:

• Out-of-the-box widgets: Pre-built components provided with Experience Builder that implement common functionality such as maps, buttons, and data visualization tools
• Custom widgets: Developer-created components built using the Developer Edition to implement specialized functionality and meet specific requirements

Each widget supports configuration to customize its behavior and appearance. Configuration can be managed through:

• The settings UI in the builder environment for modifying standard properties
• A JSON editor for advanced configuration options when no settings UI is available

Widget capabilities

While most widgets have a user interface, this is not a requirement. Widgets can provide various capabilities beyond their UI:

• Message and Data Actions

  Widgets can interact with other widgets through message actions and handle data through data actions. This enables widgets to communicate with each other and process data from different sources. See Widget communication for more details.

• Extensions

  Widgets can hook into specific points of the application lifecycle through extensions. For example, using the AppConfigProcessor extension point allows widgets to process and modify the application configuration at runtime. Learn more about available extension points in the Extension points guide.

How to use a widget

Here are the general steps to use a widget in ArcGIS Experience Builder:

1. Add a widget

To add a widget to your experience, follow these steps:

1. Navigate to the Widget panel in ArcGIS Experience Builder.
2. Drag and drop the desired widget onto a page or layout section.
3. The widget will be added to your experience and can be further configured.

2. Configure widget settings

To configure the properties of a widget, follow these steps:

1. Select the widget you want to configure.
2. Use the settings panel to adjust the widget's properties, such as data source, appearance, and behavior.
3. For widgets without a settings UI, use the JSON editor to manually configure options.

3. Arrange and style widgets

To arrange and style widgets within your experience:

1. Move and resize widgets within the layout to achieve the desired arrangement.
2. Apply styles such as background, border, and spacing to customize the appearance of each widget.
3. Use alignment and distribution tools to organize widgets for optimal usability.

Building widget UI

When developing custom widgets, you have several options for building the user interface:

• Jimu-UI library

  This library is the recommended approach for widget development. It provides pre-built components that integrate with Experience Builder's theme system. It ensures consistent styling and behavior across widgets.

• Calcite Design System

  Use Calcite components when jimu-ui does not provide the functionality you need. Calcite comes with a set of pre-built components that can be used to build the user interface of your widget. You can access Calcite components through @esri/calcite-components.

Working with data and maps

Widgets can work with data and maps in the following ways:

• When working with data (e.g., Feature Layers):

  • Use DataSourceSelector in settings
  • Use DataSourceComponent at runtime
  • See Use data in widget for details

• When working with Map widgets:

  • Use MapWidgetSelector and JimuLayerViewSelector in settings
  • Use JimuMapViewComponent at runtime

Custom widget development

Developers can create custom widgets to extend the functionality of ArcGIS Experience Builder. Custom widgets can be built using the ArcGIS Experience Builder Developer Edition which provides tools and APIs for creating and integrating new widgets into the builder environment.