Skip navigation
All People > jhine-esristaff > Jason Hine's Blog > 2016 > July

Jason Hine's Blog

July 2016 Previous month Next month

Have you ever been working with a GIS web app and said to yourself, "This app is great -- the only thing it's missing is..."? Maybe you're using one of Esri's configurable web app templates, or you've used Web AppBuilder for ArcGIS to build an app. One great thing about those solutions is that they're easy to configure -- no coding required -- but sometimes configuration might not seem like enough to get you the exact appearance and functionality your end-users need. What to do?


In this post, we're going to look at a few options for tinkering with these kinds of GIS web apps, and we're going to see what's possible without first having to become a professional web developer. If you've already watched the ArcGIS App Strategies training seminar (free, 20min), we'll be looking what's possible within the Configure and Extend strategies.


(Oh, and if you're already a professional web developer, this post might still be worth reading if, like me, you're always looking for ways to reduce development effort and save time!)


Go (con)figure...

In addition to the configurable options provided by the app templates and Web AppBuilder for ArcGIS, there are a few more places where configurable solutions may be hiding out:


  • Github: Traditionally considered a resource for developers, Esri's Github page offers the GIS professional some additional configurable GIS web app solutions, including app templates. Try a keyword search on the functionality you're looking for, and when you find something interesting, use the green "Clone or Download" button to download it as a ZIP.
  • GeoNet: There's a large and growing community of GIS professionals connecting on GeoNet and sharing tips, tricks, and more -- you can even find ready-to-use themes (example) and widgets (example) that will plug right into apps created with Web AppBuilder for ArcGIS. Try using GeoNet's magnifying glass (to the far right of the Home tab) to do a keyword search of existing posts; you can also ask the community a question from GeoNet's home page.
  • ArcGIS Marketplace: This oft-overlooked resource might just have the configurable solution you're looking for... and it might even be free! Use a keyword search and filters to find relevant content. And if you find the perfect solution but it's for-fee, consider the cost of learning to become a skilled web developer (or hiring one) -- some solutions are worth paying for!


Each of these resources may contain solutions you can use without needing to touch any code. In some cases, solutions may have instructions guiding you through a few minor code changes during implementation.


Extend some functionality

If you're a GIS professional faced with the prospect of wading into the code behind a GIS web app, take heart -- there's quite a bit you can do without needing to become a full-fledged developer! Yes, there will be some coding involved, but just like you can learn to bake a cake without first needing to become a master chef, you can also learn ways to extend the code behind GIS web apps without first needing to spend thousands of hours studying and practicing web programming skills.


  • Find, learn from, and reuse code that's already close to what you need. See if you can find an existing solution -- maybe in one of the resources listed above, or in a collection of code samples (example) -- that's kind of what you're looking for. Even experienced developers use this approach to learn unfamiliar coding patterns, and they know that it can be a lot easier to tweak existing code than it is to write new code from scratch. 
  • Take advantage of "recipes" -- predefined code patterns. Do you have a cook book at home? I do, and when I follow a recipe carefully, the dish (usually) turns out great... but without the recipe, what I make might not even qualify as "food". In the developer world, there's something called a "framework" -- a kind of "recipe" that can make it easier to add functionality to an app. For example, there's a framework that supports the creation of custom widgets using Web AppBuilder for ArcGIS (Developer Edition). Don't let "developer edition" deter you -- that just refers to the fact that this special edition of Web AppBuilder for ArcGIS is designed to be extended with custom themes and widgets.

  • Take advantage of pre-made ingredients. When I make a pie, I usually buy a pre-made pie shell and then add my own filling, because pie crust is time-consuming to make and, frankly, I'm not very good at it. A similar approach is possible when working with widgets -- you can take what is essentially an empty widget "shell" and add your own "filling" to produce a custom widget with a lot less coding time and effort than if you'd made it "from scratch". Web AppBuilder for ArcGIS (Developer Edition) provides a couple options for empty shells; after downloading and unpacking the ZIP, look under client\builder\stemapp\widgets\samplewidgets for CustomWidgetTemplate and Demo. If you prefer to make your own reusable "shell", here's a recipe for that, too.


Grasp the basics

You don't have to become a master chef, but following a recipe in a cook book does require some basic cooking knowledge and skills. The same is true for developer tasks. Here are a few recommended resources to help you gain the basic knowledge and skills you'll need to approach the occasional GIS web app programming challenge:

  • Learn the basics of HTML, CSS and JavaScript from a multitude of free online tutorials. I like the ones at because they include working examples and short quizzes for self-evaluation.
  • Work through the Getting Started samples in the ArcGIS API for JavaScript, referring back to online HTML, CSS and JavaScript resources (like as needed.
  • Take a look at Esri's new instructor-led course, Introduction to Web Development using ArcGIS API for JavaScript. This course is designed and paced for GIS professionals who may be stretching into GIS app development topics for the first time.


Happy GIS web app building!


Opinions expressed in this post are solely my own and do not express the views or opinions of my employer.