Skip To Content ArcGIS for Developers Sign In Dashboard

Overview

You will learn: how to build the base implementation for a widget.

ArcGIS Experience Builder allows you to choose from a variety of widgets and build applications interactively. These applications are called experiences. If you would like to give users more options, you can create your own custom widgets and add them to ArcGIS Experience Builder. The type of widget you build depends on the functionality you are after. You can build widgets that interact with the map or widgets that perform an operation outside of ArcGIS. Once a widget is created and installed, ArcGIS Experience Builder will automatically detect the widget and make it available for users.

In this tutorial, you will create a folder and the main files required to create a new widget. These files will be used as a starter for other widget tutorials.

Before you begin

Install ArcGIS Experience Builder

Be sure to download, install, and configure ArcGIS Experience Builder Developer Edition.

Steps

Create a new folder

The first step to create a new widget is to create a folder for the widget files.

  1. In your file browser, go to the folder where ArcGIS Experience Builder was extracted.

  2. In the ArcGIS Experience Builder folder, expand the following path: /client/your-extensions/widgets.

  3. In the widgets folder, create a new folder called starter-widget. Your folder path should look like this: /client/your-extensions/widgets/starter-widget.

Create a manifest file

A manifest file is required to define the widget's properties. These are read by ArcGIS Experience Builder when it loads.

  1. In the starter-widget folder, create a file named manifest.json. Add the following JSON object to define the widget:

     {
       "name": "starter-widget",
       "type": "widget",
       "version": "1.0.0",
       "exbVersion": "1.0.0",
       "author": "Your Name",
       "description": "A hello world starter widget",
       "copyright": "",
       "license": "",
       "properties": {},
       "supportedLocales": ["en"],
       "defaultSize": {
         "width": 800,
         "height": 500
       }
     }
    

Implement the base class

The main logic for the widget should be implemented in the widget.tsx. This file needs to implement the BaseWidget class.

  1. In the starter-widget folder, create a new folder called src. In this folder, create another folder called runtime.

  2. In the runtime folder, create a file named widget.tsx. Add the following code to implement the BaseWidget class.

     /** @jsx jsx */
     import { AllWidgetProps, BaseWidget, jsx } from "jimu-core";
    
     export default class Widget extends BaseWidget<AllWidgetProps<any>, any> {
       render() {
         return (
           <div className="widget-starter jimu-widget">
             This is your starter widget!
           </div>
         );
       }
     }
    
  3. In the terminal, stop (ctrl + c) and re-start the npm start script that is running in the client folder.

Test your widget

Once the folder and main files are in place, you can test your widget by running ArcGIS Experience Builder and adding it to a new page. The Builder will automatically detect the widget and make it available.

  1. In a web browser, go to ArcGIS Experience Builder. e.g. https://localhost:3001

  2. In the Builder, click Create New to create a new experience page.

  3. Click the Create button on the Blank scrolling page template.

  4. The Insert widget panel is opened for you. From there, drag your new starter-widget widget on to the experience.

  5. In the ArcGIS Experience Builder toolbar, click Save then Preview and the Experience will open in a new browser tab with your custom widget.

Congratulations, you're done!

Compare your widget with our completed widget. To add some functionality to your widget, check out the next tutorial.

Challenge

Add a map widget to the experience page

  1. Click the Insert widget button, and drag the Map widget onto the experience.
  2. Click the Map widget in the preview area, then click Select map in the widget settings panel.
  3. In the Select data panel, click the Add new data button.
  4. In the Add data modal, select the Public tab and search for web map eb1be6543e304b4d81ed55439c412c2c. Click the search result to select it and then click Done. (Note this web map has no operational layers intentionally.)
  5. Click the newly-added LA Parks and Trails Map in the Select data panel to select the web map.

Explore other widgets

Go here and explore more widgets