Getting started with custom widgets in ArcGIS Experience Builder
If you’re new to ArcGIS Experience Builder or looking to deepen your understanding of customizing your applications, this guide will walk you through the essentials of getting started with custom widgets. In this blog, I’ll cover what custom widgets are, why you should consider creating them and the prerequisites required to successfully complete this process.
Understanding the underlying structure of custom widgets in ArcGIS Experience Builder is one of the most important factors before you start creating your own. There are various different widgets that you can create, or you can utilize the GitHub Repository for premade custom widgets to help you get started.
What are custom widgets in ArcGIS Experience Builder?
Before we begin to understand the components of widgets, it’s important to know what a widget is and what it can do. Widgets in ArcGIS Experience Builder are the configurable building blocks that provide specific functionality—such as maps, data views, search tools or media displays—that you can add to your web app. While the platform already offers various out-of-the-box widgets for you to use, these sometimes don’t meet the requirements or functionality that you may want within your application. This is when the benefits of custom widgets come into effect.
A custom widget is a self-contained piece of code that you develop to introduce new functionalities or modify existing behaviors within your Experience Builder application. These widgets are built using web technologies—primarily JavaScript, HTML and CSS—and follow a specific development framework provided by Esri.
Why create custom widgets?
Some of the benefits of creating your own custom widgets include:
- Tailored functionality: Address specific business or project needs not covered by default widgets.
- Enhanced user experience: Design intuitive interfaces and interactions that resonate with your audience.
- Integration capabilities: Connect with external APIs, services or data sources.
- Branding and styling: Match the widget’s appearance to your organization’s branding guidelines.
Required components to install
To start developing your own custom widgets in ArcGIS Experience Builder, you must have an ArcGIS Online or ArcGIS Enterprise deployment (version 10.6 or later). You must then install the developer edition of ArcGIS Experience Builder and set it up. Please view the documentation here on how to proceed with the setup.
ArcGIS Experience Builder developer edition download guide
When the developer edition has been installed, you must then make sure that you have access to an IDE or text editor to be able to open and configure your custom widgets. Any custom widget that you create will be located within the client folder for ArcGIS Experience Builder on the machine you have installed the developer edition on. This is where you can access all your files in the future to create and alter the widgets that you choose to create.
Understanding the folder structure
Now that you know the value that you can get from creating your own custom widgets, it’s a good idea to understand the structure and required components.
As mentioned previously, your custom widgets are stored in an Experience Builder web extension repository (in other words, the client folder). This client folder contains various files. The manifest.json file is one of the files that will be necessary for every custom widget. It includes information about your widget like the name, type, description and any type of copyright/licensing.
Within the Experience Builder repository there are two folders, which are for widgets and themes. The widget folder is where you will create a sub-folder for your new widget. Within this folder, you have various files needed for your widget to work.
ArcGIS Experience Builder repository layout
To understand more information on the files needed, have a look at the widget implementation page, which highlights the full process to create a widget.
Utilizing the GitHub libraries
Creating custom widgets will require you to have to create your own code and fully understand the structure of its components. There are some alternatives that you can use when creating your ArcGIS Experience Builder applications, however.
One option is to simply use the GitHub repository and use pre-built custom code applications. You would use this specifically if you see a widget that has added functionality that you need in your application that is not yet available in the out-of-the-box widgets available in Experience Builder.
The second option would be to use one of the custom widgets created within this repository and expand on it to meet the needs of your application. This would allow you to maintain the functionality of the widget that has already been created, but gives you the opportunity to grow it and alter its functionality. Alternatively, you can alter your own applications that you have already created.
Below, you can see examples of the various custom widgets already available to be used or altered directly from the GitHub repositories.
GitHub repository for custom applications
Conclusion
Creating custom widgets in ArcGIS Experience Builder unlocks the full potential of your GIS applications, allowing you to tailor functionalities to your specific needs. While the process involves a learning curve, especially if you're new to web development, the modular architecture, comprehensive documentation and supportive community make it accessible and easy to get started.
I highly recommend beginning with simple widgets and gradually expanding them to meet your application's specific needs. Start by experimenting with basic components, explore the full capabilities of the API and progressively develop more complex features. Eventually, you will have developed some widgets that will help you create the ArcGIS Experience Builder application of your dreams.
Happy widget building!