Getting started with widget development

ArcGIS Experience Builder is built with React and the ArcGIS API for JavaScript. It allows you to create custom widgets for your specific workflows. To create your own widgets, you will need a basic understanding of the following:

• TypeScript is a superset of JavaScript. TypeScript is the language used to develop widgets.
• React is a JavaScript library for creating user interfaces. React is an abstraction away from the DOM; it encourages you to think of your application and UI in various states and render those states to make it easy to keep your UI consistent.
• JSX is a JavaScript extension syntax that allows you to describe what the widget's UI’s should look like through React.
• Jimu is Experience Builder’s JavaScript library used to create widgets.

Installation

Experience Builder is available as a ZIP file for installation. For more details, please review the installation page.

Widget

A widget is a configurable and sharable functional unit in Experience Builder. Basically, a widget is a React component injected with these common properties by the jimu framework:

• Configurations for widget, such as id, label, config, etc.
• Runtime information about the widget including state, isClassLoaded, etc.
• Local language strings
• Data source instance and status information
• URL parameter information

Widget location

Custom widgets are placed within an Experience Builder web extension repo. A web extension repo is a folder within the client folder that contains a manifest.json file with contents:

1
2
3
4
5
6
7
{
  "name": "my-web-extension-repo",
  "type": "exb-web-extension-repo",
  "description": "This is a sample extension repository.",
  "copyright": "",
  "license": ""
}

Developer edition of Experience Builder comes with an example web extension repo located at client/your-extensions. You may use this one or create your own. Using your own may work better when utilizing source code repository systems like Git. When creating your own, you may see errors reported by your code editor, like missing type declarations for Jimu modules. To fix this, add the folder of the web extension repo to the include array within the tsconfig.json file like this:

1
2
3
4
5
6
7
8
9
10
{
  "include": [
    "dist/widgets",
    "your-extensions",
    "types",
    "jimu-core/lib/types",
    /** ADD the name of your web extension repo folder: **/
    "my-web-extension-repo"
  ],
}

Widget files

At the root of the web extension repo are two folders: widgets and themes. To create a custom widget, create a new folder within the widgets folder with the name of the custom widget. All the files for the custom widget will be placed into this new folder.

1
2
3
4
5
- my-web-extension-repo/
    - manifest.json
    - themes/
    - widgets/
        - my-custom-widget/

Within the widget folder, a valid widget must contain a manifest.json file and other required files.

• For more details on the manifest.json file, see widget manifest.
• For more details on other required files and general widget development, learn about widget implementation.
• To get started quickly with the minimal set of files required, see the simple widget in the your-extensions\widgets folder.

Just the Basics

If you're new to Experience Builder development and want to understand the basic concepts, check out the following:

• Core concepts
• If you learn best by looking at code, review our samples and clone the repo.