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
• React
• JSX
• Jimu

TypeScript

TypeScript is a superset of JavaScript. TypeScript is the language used to develop widgets. There are a multitude of online resources that go into detail on what TypeScript is, why it is used, and how you can use it.

React

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. For example, in Experience Builder, you would simply update a widget’s state and then render a new UI based on this new state. To make it easier to builder interfaces, Experience Builder uses reactstrap. This is a React component UI library based on Bootstrap 4.

Please refer to the React documentation for more information about developing with React.

JSX

JSX is a JavaScript extension syntax that allows you to describe what the widget's UI’s should look like through React.

Jimu

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

To get started quickly with the minimal set of files required, see the simple widget in the your-extensions\widgets folder.

For more details on widget development, learn about widget implementation.

Just the Basics

If you're brand 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.