This afternoon I presented ‘Web AppBuilder: Build your first widget in 15 minutes’. I packed a lot of info into those fifteen minutes so I thought it’d be worthwhile to provide you with a recap and links to several of the resources I mentioned.
I began by briefly explaining what Web AppBuilder is. If you aren’t familiar with the versions of Web AppBuilder available through ArcGIS Online and Portal for ArcGIS, I’d recommend having a look at the Web AppBuilder for ArcGIS webpage before diving into custom development with the Developer Edition. Those versions aren’t extensible but it’s good to know what you can do without customisation before beginning to write code – for many applications, the widgets provided out-of-the-box will get the job done.
Next I gave a quick rundown of how Web AppBuilder for ArcGIS (Developer Edition) differs, and what you can do with it, specifically how it connects to ArcGIS Online or your organisation’s portal and there are two main types of development:
- Custom themes, giving your apps a unique look & feel
- Custom widgets, giving your apps tools & functionality that can’t be achieved using the standard widgets (this is what I focused on today…)
Before you begin creating a widget you need to decide whether you want an in-panel widget or an off-panel widget. As the name implies, an in-panel widget lives in a panel – exactly how the panel behaves depends on the theme you’re using. An off-panel widget can be a widget that hovers over the map like a scale bar or one that has no user interface whatsoever, like a listener for a custom data source. This article – In-panel and off-panel widgets – goes into a bit more detail about the specific differences than I did.
Every widget has a set of required components – this article describes what they are, and although I discussed many of them later in the presentation, I think it’s worthwhile to have an idea of what they are before diving in any further.
At this point I jumped out of the slides, and into the steps you can take to start widget development as quickly as possible. There are a few ways to go about this, but here’s what I’ve done in the past (and more-or-less what is described here in the software development kit) and it’s worked well for me:
- Go to the client\stemapp\widgets\samplewidgets subfolder of your Web AppBuilder directory.
- Copy the Demo folder, giving it a name like ‘MyWidget’ (I called mine ‘OzriDemo’).
- Jump into the folder and open up the Widget.js file. There are a set of standard widget event handlers defined here that you can start plugging code into, to see how things work. Also, you’ll want to change the BaseClass property to match your widget name.
- Go up and over a few directories to client\stemapp\sample-configs, where you’ll find a config-demo.json file. Open it up, and at the bottom you’ll see all of the sample widgets listed there. Pop your own in, following the example of the others:
- Start up Web AppBuilder – if you haven’t already – and open the app by going to this URL:
http://%5Byour host name:3344]/webappviewer/?config=sample-configs/config-demo.json
- You should see your new widget included in the toolbar, and you can start slamming code in there, reloading as you go, to test changes.
That’s a great way to kick off development but I wanted to make sure I included a ‘real’ custom widget in the demo, so I put together an app based on a web map of Adelaide CBD public infrastructure and services…
… and built a custom widget that allows users to summarise numeric attributes of a feature layer by drawing a polygon around the features they’re interested in.
Most of the features in my web map don’t have numeric attributes but the streetside trees do include circumference and height in metres, so I’ve configured the tool to summarise the latter.
After showing how the tool worked, I cracked open the Widget.html and Widget.js file to point out a couple of things:
- The HTML doesn’t include head or body tags, only what would be within the body (this is relevant because it means you can’t directly add references to third-party JS or CSS files here – more on that later).
If you do need third-party JS and CSS files, this article describes how to include them, and I showed how to pull a Twitter JS library into an app to create a simple Twitter feed widget:
It was a blitz no doubt, but there are two things I hope that our guests took away from the presentation.
- Have a look at Web AppBuilder in ArcGIS Online or Portal before you dive into Developer Edition – you might be able to do exactly what you need to do without any customisation.
- If you do need to develop custom features, the Developer Edition is a great launchpad because it gives you such a great deal of functionality to start with, letting you focus on the custom bits.
P.S.: Here’s a link to the GitHub repository I mentioned that includes a set of custom widgets developed by Esri. They may accomplish what your solution needs, and if not they’re still good samples to have a look at!