Extension points

The ArcGIS Experience BuilderArcGIS Experience Builder is a highly configurable app builder product that creates immersive web apps by combining maps, data, and interactive widgets with little to no coding.Learn more framework is designed to be extensible. As a developer, you can extend Experience Builder in various ways, such as creating custom widgets and themes. In addition to these, you can also create deeper customizations using Jimu extensions.

What is an extension point?

An extension point in the Experience Builder Jimu library is a named contract that defines how developers can extend framework behavior. An extension is a class that implements the interface for a specific extension point.

The base interface is BaseExtension for all extensions. Each extension has its own interface, which extends from the base interface. For example, the extensionSpec.AppConfigProcessorExtension interface exported from jimu-core is used for the AppConfigProcessor extension point.

To provide an extension in a widget, you must declare it in the widget's manifest.json file.

Why use an extension point?

An extension point allows you to hook into the Experience Builder framework and modify or enhance its behavior in ways that are not possible through standard widget development. For example, you can use an extension to:

• Modify the app configuration before any other widgets get loaded at runtime
• Integrate third-party libraries that require initialization
• Define custom Redux actions and reducers for your widget

How to implement an extension

To implement an extension, you need to:

1. Create a class that implements the extension point interface defined in the extensionSpec.
2. Export the extension class from a file in your widget's src folder.
3. Declare the extension in your widget's manifest.json file under the extensions section. For example:

1
2
3
4
5
6
"extensions": [
  {
    "point": "<Extension point name>",
    "uri": "<Extension uri, relative to src folder>"
  }
]

Types of extension points

Jimu defines a variety of extension points that are documented in the API reference. Some commonly used extension points include:

Code examples

1
2
3
4
5
6
"extensions": [
    {
      "point": "APP_CONFIG_PROCESSOR_EXTENSION",
      "uri": "extensions/translation"
    }
  ]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { type extensionSpec, type AppConfig, utils, createIntl, getAppStore } from 'jimu-core'
import defaultMessage from '../runtime/translations/default'

export default class Translation implements extensionSpec.AppConfigProcessorExtension {
  id = 'translation'
  widgetId: string

  async process (appConfig: AppConfig): Promise<AppConfig> {
    // Do not replace when run in builder.
    if (window.jimuConfig.isInBuilder) {
      return Promise.resolve(appConfig)
    }
    const widgetJson = appConfig.widgets[this.widgetId]

    const intl = createIntl({
      locale: getAppStore().getState().appContext.locale,
      messages: Object.assign({}, defaultMessage, widgetJson.manifest.i18nMessages)
    })

    utils.replaceI18nPlaceholdersInObject(appConfig, intl, defaultMessage)
    return Promise.resolve(appConfig)
  }
}