Do you dream of creating a central hub for geographic information within your organization? A place where employees can effortlessly access data, perform simple analyses, and gain valuable insights, regardless of their technical expertise? Imagine an application so versatile it caters to various departmental needs without overwhelming users with complexity. This “everything app” concept might sound ambitious, but with ArcGIS Experience Builder, it’s now within reach.
Perhaps you’ve explored Esri’s Atlas Instant App and found it promising, yet not quite tailored to your specific requirements. Or maybe you’re working with Enterprise versions where Atlas isn’t yet fully integrated. If so, this guide is for you. We’ll walk through the process of building a powerful “everything app” using Experience Builder, leveraging custom widgets and strategic design principles.
To embark on this journey, ensure you have access to Developer Edition 1.14, 1.16, or a higher version, or Enterprise Edition 11.3 or later. (Note: Version 1.15 has a known bug affecting the Add/Remove Layers Widget). If you’re not yet using Developer Edition, remember that you don’t need to be a developer to harness its capabilities.
You’ll also need to incorporate a selection of Custom Widgets to enhance your app’s functionality:
Before uploading the Add/Remove Layers Widget to your Enterprise, it’s highly recommended to pre-load your layers and groups into the layers.ts file of the Widget for optimal performance.
Setting the Stage: Enterprise Portal and Web Map Configuration
Our foundation will be built on Enterprise 11.3. First, register the necessary Custom Widgets within your Enterprise Portal. Next, navigate to the Web Map Viewer and create a seemingly blank map. We’ll utilize hybrid layers for parcel and road data to enable advanced labeling and prepare for the Query Widget setup. Specifically, we’ll use the Feature Layer With Map Image Layer Labeling approach, omitting code enhancements for this build. At this point, your Enterprise Portal should house all Custom Widgets, and your Webmap should primarily display labels for key layers. Now, let’s launch Experience Builder to bring our “everything app” to life.
Experience Builder Layout: Embracing the Sidebar Strategy
Start by selecting the Blank Fullscreen template in Experience Builder. We are designing a single-page application, optimized for tablets in landscape mode, with no specific mobile optimization in this iteration.
Confronting the blank canvas can be daunting. A strategic approach is crucial. We’ll heavily rely on Sidebars – in fact, this layout incorporates five, each serving a distinct purpose. The initial Sidebar will implement the Hidden Widget Trick. Drag a Sidebar onto the canvas and set it to Full Size. Within the Collapsible section, embed the Custom Font Widget. In the Sidebar’s Settings Panel, rename the Sidebar for clarity – descriptive names are essential when using multiple sidebars. Then, set the Size to 0, disable Resizable and the Collapse Button, and set the Default State to Collapsed. The Custom Font Widget will now operate invisibly, applying its font modifications silently in the background.
Alt text: Screenshot showing the settings panel of a sidebar widget in ArcGIS Experience Builder, configured to hide the custom font widget by setting size to 0 and collapsing it by default, illustrating the hidden widget trick.
Next, we’ll create a “Header”. Instead of using the dedicated Header section, we’ll employ a clever technique: Sidebars as Headers. Drag another Sidebar, set it to Full Size, rename it to “Header Sidebar,” dock it to the Top, set the Size to 80px, disable Resizable and the Collapse Button, and choose a dark blue Top Panel Fill. This Sidebar now functions as our application header.
Alt text: Image depicting a sidebar widget used as a header in ArcGIS Experience Builder, positioned at the top with a dark blue background, showcasing the sidebar header technique.
Time for another Sidebar! This one, however, won’t be full size initially. Drag a Sidebar and insert a Map Widget into its always-open side, setting the Map Widget to Full Size. Integrate the Webmap created earlier. Activate Zoom, Home, Compass, Measure, Fullscreen, and Extent Navigate Tools, while deactivating others. (If using a version with the standalone Measure Widget, use that instead of the Measure Tool.) Disable Enable Pop-up in the Map Widget. Rename this Sidebar to “Map Sidebar.” We’ll revisit the collapsible side of this Sidebar later.
Alt text: Screenshot of ArcGIS Experience Builder interface showing a map widget embedded within a sidebar widget, labeled as “Map Sidebar,” demonstrating the layout structure.
The next Sidebar will house the Identify Widget and manage its auto-opening and closing behavior. Name it “Identify Sidebar.” Drag a Sidebar, resize it slightly, rename it, and dock it to the Right. Before proceeding further, drag the Identify Widget into the Collapsible side of the Map Sidebar – a temporary placement. The Identify Widget requires the widget_id of the Sidebar it controls. As widget IDs are not directly visible in ArcGIS Enterprise, the easiest method to determine this ID is to place the Identify Widget immediately after the Sidebar and subtract one from the Identify Widget’s ID number. Assuming you’ve followed the steps, the Identify Sidebar should be widget_id 6. Connect the Identify Widget to the Map Widget. Now, drag the entire Map Sidebar into the Always Open Side of the Identify Sidebar. Don’t worry about the current visual appearance; we’ll refine it after adding the final Sidebar.
Add one more Sidebar and name it “Table Sidebar.” Dock it to the Down position. Click back on the Identify Sidebar and drag it into the Always Open Side of the Table Sidebar. Now, let’s adjust the appearance. Set the Table Sidebar to Full Size, then do the same for the Identify Sidebar, and finally for the Map Sidebar. Utilizing the Outline in the Page Settings Panel can be helpful for selecting and resizing nested Sidebars. If correctly configured, you should now have five nested Sidebars surrounding a Map Widget, free from “The Sidebar Problem™”.
Alt text: Diagram illustrating the nested sidebar structure in ArcGIS Experience Builder, showing five sidebars layered around a central map widget to create a complex layout.
Styling and Configuring Sidebars for Functionality
With the sidebar structure in place, let’s style and configure them for optimal user experience and functionality. Starting with the Map Sidebar, this panel will contain map-related widgets like Map Layers and Legend, and potentially other widgets with vertical outputs. It should be expanded upon app load and remain primarily open. Therefore, the default settings of Overlay off and Default State Expanded are suitable. Increase the Size to 400px for better visibility of content. Enhance the Collapse Button’s prominence by increasing its size and applying color. Set the Icon to the Solid Triangle, size to 20, Background Default color to blue, and Background Hover color to red, aligning with branding guidelines. Adjust the Width to 20, Height to 80, and Offset X to 20 for desired placement.
Moving to the Identify Sidebar, also set its Size to 400px. However, as this Sidebar is primarily controlled by the Identify Widget and will initially be blank, Overlay on and Default State Collapsed are more appropriate. With the Right Panel overlaying the map, assign a background Fill color – the standard Light color (light silvery-grey) works well. For the Collapse Button, replicate the styling of the Map Sidebar’s button but set Offset X in the negative direction.
For the Table Sidebar, add a Table Widget to its Collapsible Side, set to Full Size – the Table Widget is now configured. In the Table Sidebar Settings, enable Overlay and set Default State to Collapsed. This drawer will be user-activated, typically after using the Add To Table Action. Ideally, an Action to auto-open this drawer would exist, but it’s not yet available. The Collapse Button for the Table Sidebar needs to be even more prominent due to its location and orientation. Increase the Icon size and Height to 25, Width to 120, and Offset Y to -25, using the same color scheme as other Collapse Buttons.
Collapse the Map Sidebar to declutter the interface for the next steps. The Collapsible Side of the Identify Sidebar should currently be empty. Place a Grid Widget within it and set it to Full Size. Drag the Identify Widget into the Grid. Then, drag the Identify Controller Widget directly onto the Identify Widget. The Grid Widget should automatically create tabs for these widgets. Connect the Identify Controller Widget to the Map Widget. In the Grid Widget Settings, disable Allow Resize and Allow Expansion. Consider renaming the Widgets within the Grid to clarify the Tab titles.
Alt text: Interface showing the Identify Widget and Identify Controller Widget nested within a Grid Widget in ArcGIS Experience Builder, demonstrating the tabbed layout for identify functionality.
Collapse the Identify Sidebar as well. Now, focus on the empty Collapsible Side of the Map Sidebar. Insert a Column Widget, set it to Full Size and Gap to 0px. Within the Column, add a Views Navigation Widget and select a Quick Style – styles displaying View titles are recommended. Beneath the Views Navigation Widget, add a Section Widget. This stacking order ensures the Section Widget neatly aligns under the View Navigation Widget within the Column. In the Section Widget Settings Panel, Style Tab, set Width and Height to Stretch if necessary. Inside the Section Widget, add another Column Widget, set to Full Size and Gap to 0px.
Within this nested Column structure, we’ll place the Add/Remove Layers Widget. This step can be time-consuming. Pre-loading layers and groups into the Widget before uploading to Enterprise is highly recommended. While configuring via the Settings Panel is possible, managing numerous layers there is inefficient. Even modifying the layers.ts file can be complex, but less so than using the Settings Panel for extensive layer configurations. If layers are pre-loaded, simply drag and drop the Widget and connect it to the Map Widget. Otherwise, configuring this Widget can take hours or days, depending on the number of layers. Refer to the Widget’s help text for setup guidance.
Assuming the Add/Remove Layers Widget is configured, add a Map Layers Widget below it in the same Column. Connect it to the Map Widget. Configure Options as needed – enabling all except the sub-option to show the legend by default, and sticking with eyeballs for visibility control is a good starting point. Enable Customize Layers and hide any hidden map layers. In the Style Tab, set Height to Stretch.
At this stage, enter Preview Mode to test. Verify that the Add/Remove Layers Widget functions correctly, the Map Layers Widget’s Add To Table Action populates the Table Sidebar, and clicking the map triggers the Identify Sidebar with results. The Identify Controller should toggle Identify functionality per layer. Confirm the absence of “The Sidebar Problem™”.
Add a New View to the Section Widget. Place a Basemap Gallery Widget in it, set to Full Size, and connect to the Map Widget. Repeat this, adding a Legend Widget in another new View.
Create another View and add a Select Widget. This Widget has additional settings. Enable Allow Selection of Data Generated At Runtime. Attribute Selection can be toggled – it will effectively be active regardless, as runtime layers alter the Select Widget’s operation and enhance its capabilities. In Customize Layer options, remove Webmap-loaded layers and in Interactive Selection, enable all Select By options.
Add a final New View and insert a Query Widget, setting it to Full Size. Configure this based on your data needs. Spatial queries for parcel data and attribute queries for road and parcel data using hidden Webmap layers are effective examples. The Query Widget caters to common user queries, while the Select Widget and Map Layers Widget’s Set Filter option enable more complex, ad-hoc queries, satisfying both novice and advanced users. Configure pre-built queries for common searches.
Alt text: Screenshot of a pre-configured Query Widget in ArcGIS Experience Builder, showing spatial and attribute queries set up for parcel and road data, tailored for common user searches.
In the Action Tab of the Query Widget, set up a Record Selection Changes > Map > Zoom To Action.
This completes the content for the Section Widget. For widgets with extensive outputs like Near Me or List Widgets, consider adding them as separate Views in this space. Rename the Views in the Section Widget Settings Panel to reflect their content (e.g., “Layers,” “Basemaps,” “Legend,” “Select,” “Query”) and reorder them logically. Preview the application again to review the configured functionality.
Alt text: Preview mode screenshot of ArcGIS Experience Builder application showing the View Navigation widget with renamed views like Layers, Basemaps, Legend, Select, and Query, demonstrating the organized view structure.
Header Enhancement: Search and Widget Controller
The “Header” area is currently blank. Let’s populate it. Start by adding a Custom Search Widget to the Header and use Horizontal and Vertical Center options for positioning. Retrieve the Identify Widget’s ID (e.g., 7) from its Settings Panel and input it into the Custom Search Widget Settings Panel. This modified Search Widget is designed to trigger the Identify Widget and is intended for Locator Sources (potentially point-type Layer Sources as well). Under the Content Tab, keep Result Panel enabled and consider activating Recent Searches and Auto Select The First Result. This Search Widget requires a Map Widget and a Record Selection Changes > Map > Zoom To Action. Configure this Action.
Test the search functionality in Preview Mode. Ensure it triggers the Identify Widget and locates expected data. Adjust the Custom Zoom Scale (smaller values for closer zoom) as needed.
Next, add a Widget Controller to the Header. Snap it to the Right and Vertically Center it. Use a Floating Widget Panel Arrangement with a Large Icon Size. Disable Indicator and enable Advanced settings. Set the Default Icon color to blue and Selected and Hover colors to red, matching the Sidebar Collapse Buttons.
Populate the Widget Controller with menu-type widgets – those not used daily but valuable for occasional access, widgets with small outputs, and those encouraging map interaction. Essential widgets include Add Data, Bookmark, Custom Draw, and Print. If using a version with the standalone Measure Widget, include it here as well.
In the Add Data Widget, Action Tab, add a Data Added > Map > Add To Map Action. For the Bookmark Widget, use the Simple Template (second option). Connect it to the Map Widget and enable Allow To Add Bookmarks In Widget. This Bookmark Widget allows user-defined bookmarks, enhancing flexibility.
Connect the Draw Widget to the Map and rename its title (e.g., “Draw Tools”). The Custom Draw Widget is used for its freehand drawing options and sketch editing capabilities. While newer OOTB Draw Widgets offer text support, the Custom Draw Widget remains valuable for its drawing flexibility.
In the Print Widget, connect it to the Map Widget and add a Print Service. Resize the Print Widget within the Widget Controller’s panel by dragging the handle in the lower left corner for better visual presentation.
Additional widgets considered for the Widget Controller in a full application include:
- Text box with helpful links.
- Text box with help text.
- What3Words Widget.
- NearMap Widget.
- Rain Radar Widget.
For a final functional widget, add a Coordinates Widget to the lower-left of the Map Widget and connect it to the Map Widget. In the Style Tab, set Width and Height to Auto and Snap To Left to minimize blank space and prevent layout issues. If using a coordinate system other than Web Mercator, configure it as a secondary option due to potential compatibility issues.
Final Touches: Branding and Aesthetics
To enhance the visual appeal, add an Image Widget to the Header for a logo. Set Width to Auto, Height to 90%, and use Vertical Center. Apply a left margin of 1% using the target box option.
Alt text: Screenshot of the header section in ArcGIS Experience Builder, showing an image widget added for branding, positioned with vertical center alignment and a left margin.
Next to the Image Widget, add a Text Widget for the application title. Use Vertical Center, Width and Height on Auto. Create a title and subtitle, with the subtitle font size approximately half of the title, using white text for contrast against the dark header background and right justification.
Alt text: Final header design in ArcGIS Experience Builder, showcasing both an image widget for logo and a text widget for application title and subtitle, demonstrating the completed header aesthetics.
This completes the “everything app” build. While not perfect, it’s a functional, no-code application achievable in less time than documenting its creation. Consider building it yourself or exploring the Atlas Instant App as alternative.
