Use calcite components widget

This sample demonstrates how to use Calcite components in a custom widget.

Reminder before use

Before you use Calcite components, we suggest you review the components in the jimu-ui package. Jimu-ui is the primary component library for the developer edition of ArcGIS Experience Builder, and you may want to use that first because it will keep your custom widgets and themes consistent with the rest of the Experience Builder theme. If you do have a requirement to use Calcite components, this example will help you.

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.
  • Run npm i in the widget root directory (npm run copy will also be executed as postinstall, it will copy the calcite-icon to src/runtime/assets)
  "scripts": {
    "postinstall": "npm run copy",
    "copy": "ncp node_modules/@esri/calcite-components/dist/calcite/assets/ ./src/runtime/assets/"

How it works

First, install @esri/calcite-components, @esri/calcite-components-react, and ncp to the widget directory.

  "dependencies": {
    "@esri/calcite-components": "^1.0.0-beta.61",
    "@esri/calcite-components-react": "^0.2.0",
    "ncp": "^2.0.0"

Then, import { applyPolyfills, defineCustomElements } from '@esri/calcite-components/dist/loader', and call applyPolyfills() to apply the necessary polyfills of calcite-components.

After the widget is loaded, call:

defineCustomElements(window, { resourcesUrl: `${folderUrl}/dist/runtime/` })

to register the components of calcite-components as web components, and specify the resource load directory through the resourcesUrl. Now you are free to use the components of calcite-components in your widget.

This widget uses this calcite components example to demonstrate the usage.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.