Calcite components in a custom widget

calcite-design-system

Use Calcite Design System components to build modern and visually appealing apps.

What is Calcite Design System?

Calcite Design System, also known as Calcite components, is a set of UI components for creating consistent, user-friendly experiences across web applications. The system includes a library of:

These components allow developers to build applications that integrate with ArcGIS. You use Calcite components to build:

How to use Calcite components in a custom widget

ArcGIS Experience Builder Developer Edition (DE) includes support for Calcite Design System components. This allows you to build custom widgets with visually appealing user interfaces. To see the compatible versions, go to Update to the latest version.

The general steps to use Calcite components in a custom widget are:

1. Set up your environment

You need to install ArcGIS Experience Builder Developer Edition and the necessary components.

  1. Download and install the current LTS version of Node.js.
  2. Download and install ArcGIS Experience Builder Developer Edition.

2. Create custom widget

Next, create a custom widget and set up your development environment.

  1. Open your preferred Integrated Development Environment (IDE), such as Visual Studio Code, and navigate to the client directory in the Experience Builder project file structure.
  2. Create a new directory for your custom widget inside the client/your-extensions/widgets directory.
  3. Follow the directory structure outlined in Widget implementation.

3. Add Calcite components

Once you have a new widget, you can import the Calcite library and reference the components.

1
import { CalciteButton } from 'calcite-components'

Add the imported Calcite components in render function of your widget. For example, to include a Calcite button, you can do something like this:

1
2
3
render() {
  return <CalciteButton iconStart="folder-plus" label="Add new folder"></CalciteButton>
}

Update to the latest version

With Calcite Design System and ArcGIS Experience Builder Developer Edition being released on different schedules, it is important to regularly update and test your custom widgets. Using the latest Calcite components ensures your custom widgets provide a better user experience with reliable and modern integrated components.

This table shows the supported Calcite versions for each release of Experience Builder Developer Edition.

Experience Builder DE versionCalcite Design System version
1.121.4.2
1.131.9.2
1.142.5.1
1.152.8.5
1.162.13.0

To import a specific version of ArcGIS Calcite components into ArcGIS Experience Builder Developer Edition, you can follow these steps:

  1. Open the client/package.json file in your Experience Builder project and check that the calcite-components dependency is listed. You can specify the version you want to use:

    1
    2
    "@esri/calcite-components": "^2.13.0",
    "@esri/calcite-components-react": "^2.13.0"
  2. Run the command npm ci in your project directory. This will install the specified version of Calcite components along with other dependencies.

  3. In your custom widget code, import the desired Calcite components using:

    1
    import { CalciteButton } from 'calcite-components';

    This allows you to use the imported components within your widget's render function.

    1
    2
    3
    render() {
      return <CalciteButton iconStart="folder-plus" label="Add new folder"></CalciteButton>
    }

Tutorials

Tools

Use tools to access your and create and manage content for your low-code applications.

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

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close