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...
Figure 1 - Content driven landing page created with ArcGIS Experience Builder
Experience Builder allows you to build a fullytailoredexperience 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
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 whatandwhere… “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.
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.
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.
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.
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.
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.
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.
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.
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 3rd 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.
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.