Ozri 2015 GIS Generations

Web AppBuilder: Build your first widget in 15 minutes

Hi all,

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).
  • Virtually all of the code in the JS file will be familiar to those who’ve used the ArcGIS API for JavaScript. While there is an API exclusive to Web AppBuilder, it’s relatively small and you’ll be able to accomplish a lot just with some familiarity of the JS API.  It also means that you’re working with a wide user community for help and code samples.

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.

  1. 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.
  2. 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.


James M

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!

6 thoughts on “Web AppBuilder: Build your first widget in 15 minutes

    1. Melissa Meneghetti

      Our company is looking to generate a similar functionality to the custom widget that was shown here…allows users to summarise numeric attributes. Is it possible to get access to the source code of that widget (area summary) so that we can use it as a shoot off point?

  1. Melissa Meneghetti

    Possible to get source code for the area summary custom widget that was presented in this demo. Looking to generate very similar functionality and it would be great to use this as a starting point.

  2. Katie K Post author

    Demo download (zip) – https://esriaustralia.com.au/u/lib/public/DemoWidgets.zip

    Please note: the demo supplied was developed with Web AppBuilder 1.2 using a simple dataset. It is not production-ready code. Compatibility with newer versions of Web AppBuilder has not been tested and may not work with other templates, layer types or datasets. HTML layout and CSS may need to be changed for the widget to function correctly.


Got something to say?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s