Tutorial | 25/06/20 | #WeTalkTech

When It's (Not) All About The Map

Released in February, ArcGIS Experience Builder allows you to create data-driven web applications using configuration and without the need for any code. In this post we’ll explore why you should consider Experience Builder for your next web site and show you how to get started.

Take control - One Design doesn't fit all...

Image showing an example of a landing page created with Experience Builder

Figure 1 - Content driven landing page created with ArcGIS Experience Builder

Experience Builder allows you to build a fully tailored experience to present your GIS data and content to your target audience – and yes, a map is optional though not mandatory.

Having attended web design courses over the years, I learned that one common app design principle is experience i.e. the experience of the product or information on display, the experience of the purpose or goal of the web site, and the user experience of interacting with (and navigating through) a site’s content, functions and features.

Well-designed e-commerce websites deliver a compelling experience about a brand. They tell a story about the products on sale, make the experience personal and develop a sense of trust with the user – ensuring that those return visitor stats are boosted, and that all-important order ends up in the basket. A poor experience can mean visitors won’t be returning any time soon and may seek out alternatives.

Become the customer

Image showing an ecologist taking water samples from a river

Figure 2 - Ecological consultants typically undertake environment and ecologic impact assessments and habitat and animal surveys.

Should the approach to presenting GIS data be any different? Web sites typically provide information to support a decision. In the case of an e-commerce site, the decision might be “do I make that purchase or not?”.
For GIS web sites, information and location underpin decision making… a combination of the what and where… “What tourist attraction to visit next time I’m in town?”, “What services are in my area and where can I access them?”
Good designers ‘think like the customer’, and I urge you to think about your customer or target audience when planning your next project. There is a wealth of information, media and other hidden gems tucked away in your humble geodatabase and it’s waiting to be showcased in new & innovative ways.
So why not build an experience around it.. Sound good? Then let’s get started.

Getting Started

To begin authoring web sites go to https://experience.arcgis.com/ and sign-in using a user type with creator privileges. Upon sign-in, you are presented with a launch-pad from where you start building your site. Where wireframing was once the de-rigueur of web design, Experience Builder allows you to prototype quickly and share previews for feedback, though it can be beneficial to think about your site structure and layout in advance.

Animated GIF showing the variety of layouts and templates available in ArcGIS Experience Builder

Figure 3 - Select the most appropriate layout and template when creating a new site

Map centric or Page centric?

Consider if your design is map centric or page centric? (Some sites mandate a big-map-up-front layout, others won’t). Next, choose a layout from one of the available templates or start with a blank page for complete control.

At this point it’s worth highlighting that Experience Builder is mobile adaptive, meaning that all of your designs will display on smart phones and tablets.

Hint: toggle the live view switch to get a preview of your page, then change the target device to preview what it looks like on a selection of screen sizes.

Animated GIF showing editing for mobile adaptive experience

Figure 4 - Edit for mobile adaptive experience

Once you’ve selected a template you’re ready to get designing. Working in Experience Builder feels a lot like working in other CMS platforms (Wix, WordPress, Drupal). Design tools are accessed from the main toolbar and components can be added to the site in a familiar drag ‘n’ drop pattern.

Image showing Experience Builder's Site Designer Interface

Figure 5 - Experience Builder's Site Designer Interface

1. Add Data

Now, you’ll need to set a data source. Using the add data tool, browse your organisation and select one or more web maps, web scenes (3D is supported) and feature layers to dynamically power the site’s content and data.

Hint: embed content on the page and 'hydrate' widgets with text and media direct from your live GIS data source. You can dynamically insert text blocks populated from your own live data. You can even format field values using Arcade expressions to present you data in a more meaningful way.

Animated GIF showing how to add dynamic data values from your feature layers

Figure 6 - Adding dynamic data values from your feature layers

2. Add Pages

When you create your site, a default web page is set up for you as your home page. You can add more pages to your site as required – select from available page layout templates or choose a blank page.

Hint: The menu widget is aware of your pages and supports navigation across the entire site. Choose from traditional menu with horizontal & vertical links, or a ‘hamburger’ menu.

3. Add Themes

A theme selector allows you to set look and feel, from a set of pre-configured css style sheets. Colour schemes can be modified to align to your corporate colour schemes or web site purpose.

Hint: Consider the emotional impact of colour on your site. Web designers harness this technique, as the right colours can create the right moods and atmosphere for your site.

Image showing the different themes and colour options available in Experience Builder

Figure 7 - Setting the theme & colours for your Experience

4. Add Widgets

Widgets are essentially a set of web controls that allow you to add content and functionality to web pages. Widgets are categorised in terms of basic (html controls such as images, buttons, text blocks repeatable lists) Layout (containers for controlling the position and layout of content on the page – rows, columns, sidebars, panels) and finally sections which allow the designer to create ‘views’ on a page to manage groups of related content – e.g. create a tabbed interface that allows navigate through different content sections without having to leave the page.

Image showing Widget controls available in Experience Builder

Figure 8 - ArcGIS Experience Builder Widget controls

Hint: Get creative by leveraging some of the recently added widgets – Integrate a survey 123 form on your page, Embed a dashboard or provide an immersive 3D view of your data using the fly controller widget.

Animated GIF showing embed tool in Experience Builder

Figure 9 - Adding a Survey123 form on a web page

Triggers & Actions

Experience builder supports inter-widget communication. Ok, that sounds a bit sci-fi, but essentially it allows a widget to react and do something (an action) after a specific event (a trigger) occurs in another widget. This event driven framework allows you to configure advanced functionality without the need for coding.

Hint: Configure the list widget listen for the map extent change trigger and set an action to filter the list showing only those features in the current map display.

Image showing Widgets supporting actions at current release

Figure 10 - Widgets supporting actions at the current release

Summary

In the past, I have encountered scenarios where GIS data has been exported, e.g. to a MySQL database, for the purpose of integrating it in a more traditional web site setting via 3^rd party CMS platforms. The challenge here is obvious - you are no longer working from a single source of truth for your data and you regularly need to re-sync CMS databases which adds a significant maintenance overhead.

Experience Builder offers web admins and us GeoGeeks alike, with the option to build beautifully designed web sites that are powered by live & authoritative GIS data.

The Experience Builder road map will see more widgets added, support for advanced use of Arcade across widgets and integration within ArcGIS Enterprise.

Just as Web AppBuilder, Operations dashboards, Story Maps have grown in popularity, I very much look forward to what unique GIS experiences, you - our customers, can deliver using this platform.

Image showing an example of a website created using ArcGIS Experience Builder

Figure 11 - Discover DC Website created with ArcGIS Experience Builder – with dynamic content and 3D scene interactions

Author

Nigel McGuirk

Nigel McGuirk is a solution architect with over 20 years’ experience designing and implementing Web GIS architectures, applications & workflows. He has a passion for location based technology and helping customers achieve their goals through well designed solutions on the ArcGIS platform. In his spare time he enjoys music, running and photography.