Pages, rows, columns, sidebars, responsive design, and the layout patterns that make or break your app. This is the foundation everything else sits on.
Everything you need to go from a blank screen to a working app. No code, no tricks — just the fundamentals done right.
Before you build anything, let's get oriented. When you open Experience Builder, you see a lot of panels. Here's what each one does.
Widgets live here. Drag them onto the canvas. Use the search icon at top to find specific widgets quickly.
The page tree. Shows every widget nested inside its parent. This is your best friend for selecting deeply nested elements.
Content, Style, and Action tabs for whatever's selected. Changes here affect only the selected widget/container.
The app preview. Drag widgets here. Click to select. Resize by dragging edges. This is what your users will see.
The builder is like a photo collage app: the left panel is your toolbox of stickers (widgets), the center is your poster (canvas), and the right panel is the inspector that lets you customize whatever sticker you've selected. The outline tree is like the layers panel in Photoshop — it shows you the stacking order and nesting.
Every EB app starts with pages. A page is a full-screen view — like a slide in a presentation or a screen in a mobile app.
Content fills the viewport exactly. Good for dashboard-style apps where everything is visible at once. No scrollbar.
Content extends below the viewport. User scrolls to see more. Good for long-form apps, reports, and story-style layouts.
Don't use 15 pages when 3 pages with good navigation would work. Every page is a full context switch for the user. Use screen groups (Lesson 11) or sections to show/hide content within a single page instead.
Rows and Columns are the invisible boxes that organize your widgets. Think of them as the framing studs in a wall — you don't see them, but they hold everything in place.
Imagine a bookshelf. A Row is a single shelf (horizontal). A Column is a vertical divider within a shelf. Your widgets are the books that go in the spaces between dividers. Rows stack vertically. Columns divide horizontally within a row.
Divides space horizontally into up to 12 columns. Widgets sit side by side. The Row uses a 12-column grid — each column is 1/12th of the row's width.
Stacks widgets vertically, like a scrolling page within a page. Widgets stack top to bottom. Scrollable if content overflows.
| Layout | Direction | Best for |
|---|---|---|
| Row | Horizontal (side by side) | Map + sidebar, multiple equal panels, dashboard grids |
| Column | Vertical (stacked) | Scrolling content, widget stacks, form-like layouts |
| Flow Row (new!) | Horizontal continuous | Icon bars, button groups, flexible horizontal alignment |
Row (12 cols) → Left 8 cols: Map widget → Right 4 cols: Column widget containing a List and a Chart stacked vertically. Congratulations — you just built the skeleton of 80% of all operational dashboards.
The Sidebar is one of EB's most useful layout widgets. It creates a collapsible panel that the user can open/close with an arrow toggle. Perfect for tools, legends, and filters that shouldn't take up screen space all the time.
The Sidebar widget should typically be a top-level container (directly on the page). If you nest it inside a Row, it gets constrained and doesn't behave as expected. Let it be the master container, then put your Row inside its main area.
With a layout in place, it's time to fill it. Here are the widgets you'll use in almost every app, and the one thing to know about each.
| Widget | What it does | First thing to configure |
|---|---|---|
| Map | Shows your web map or scene | Click "Select map" → choose a web map from your content or AGOL |
| Text | Displays text, titles, descriptions | Click into it and type. Use the formatting bar for headings, bold, links. |
| Image | Displays an image | Upload, URL, or connect to data for dynamic images |
| Button | Clickable button | Set the link action — URL, page, or widget trigger |
| List | Repeating cards from data | Connect to data source first, then design the template item |
| Legend | Map legend | Just drop it in — auto-connects to the map |
| Layer List | Toggle layer visibility | Drop in, it auto-connects. Customize which layers appear in settings. |
| Filter | Let users filter data | Connect to data, choose field, set filter type (value, range, etc.) |
Sidebar (full page) → Main area: Map widget (connected to any web map) → Sidebar panel: Column → Legend + Layer List + Filter. That's a fully functional, publishable app in about 5 minutes.
This is the most important step most beginners miss or get wrong. Widgets don't automatically know about your data — you have to connect them.
When you add a Map widget and select a web map, EB automatically creates data sources for each layer in that map. Other widgets (List, Table, Chart, Filter) connect to these data sources.
When you have multiple tools (Legend, Layer List, Filters, Bookmarks) but limited space, the Accordion widget stacks them with collapsible headers. Only one section is open at a time.
An Accordion is like a stack of file drawers — you pull open one drawer at a time. Everything stays organized, and users only see what they've actively opened. Perfect for mobile-friendly sidebars.
You now have: the builder interface, pages, rows/columns, Sidebar layout, widget basics, data connections, and the Accordion pattern. You can build a functional app. The Intermediate section teaches you to make it professional.
Responsive design, widget controllers, headers and footers, fixed vs scrolling content, and the layout patterns that separate good apps from great ones.
Your app will be viewed on desktops, tablets, and phones. EB gives you three device views in the builder. The critical thing to understand: changes in a smaller view only affect that view and smaller.
| What you can change per view | What you can't change per view |
|---|---|
| Widget position and size | Which widgets exist (all views share the same widgets) |
| Visibility (show/hide widgets) | Widget content settings |
| Row column proportions | Data connections |
| Padding and margins | Action configurations |
Switch to phone view. Select your Row. Change it from 2 columns (8/4 split) to 1 column (12/12 stacked). Now your map takes full width on mobile, and the sidebar content stacks below. 90% of responsive problems are solved by adjusting Row column ratios per device view.
Instead of having Legend, Layer List, and Bookmarks all visible at once, the Widget Controller puts them behind toolbar icons. Users click an icon to open that tool. Like a toolbar in ArcGIS Pro.
Accordion = tools in a sidebar (vertical, always visible space). Widget Controller = tools overlaying a map (compact, icon-driven). Choose based on whether you have dedicated sidebar space or not.
Headers stay at the top of every page. They're the perfect place for your app title, logo, navigation, and login widget.
Added in February 2025, the Flow Row is different from the regular Row. Instead of a rigid 12-column grid, it positions widgets in a continuous flow — like inline elements in a web page.
12-column grid. Fixed proportions. Resizing one column affects others. Best for major layout divisions.
Continuous flow. Widgets auto-adjust when siblings are removed. Best for button bars, icon groups, header content.
Inside your header: Flow Row → Image (logo, fixed width 120px) + Text ("My App Title", flexible) + Button ("Help") + Login widget. They align horizontally and space naturally. Much easier than fighting with a 12-column Row for header content.
These two containers let you show different content in the same space — like tabs or a slideshow. They're how you avoid creating too many pages.
Multiple "views" in one container with navigation dots or arrows. Like a carousel. Good for step-by-step workflows or alternate views of the same data.
Multiple "screens" in one container that can be triggered by buttons or widget actions. More control than Sections. Think of it as a mini-app within your app.
In a fullscreen page, you often want some things to stay put (map, header) while other things scroll (a panel of results). The key is understanding how Column overflow works.
Sidebar layout → Main area: Map (fills space, doesn't scroll) → Sidebar panel: Column set to fill height with overflow:scroll → Inside the Column: lots of widgets that scroll within the sidebar while the map stays fixed. This is how every professional EB dashboard works.
You now have: responsive design cascade, Widget Controller toolbar, headers/footers, Flow Row, Sections vs Screen Groups, and the fixed/scrolling pattern. These are the layout techniques that separate beginner apps from professional ones.
Templates, app state management, page visibility, embed widget patterns, and the layout recipes we use for real Red Cross disaster operations.
Once you've built a layout you like, save it as a template so you never start from scratch again.
New in October 2025: you can restrict who sees specific pages based on their ArcGIS user type or group membership. Combined with the Login widget, this lets you build multi-audience apps.
Page 1 (public): Shelter locations map — anyone can see it. Page 2 (restricted to "EOC Staff" group): Operational dashboard with shelter capacity, resource tracking, volunteer assignments. Same app, different audience, one URL.
The Embed widget lets you put other web content inside your EB app: ArcGIS Dashboards, Survey123 forms, YouTube videos, external websites, or even other EB apps. It's an iframe under the hood.
experience-builder-help-creator skill to generate it!)Not all websites allow embedding (they block iframes via X-Frame-Options). ArcGIS products generally allow it. External sites may not. Also, if embedding secure content, use the Login widget with the "Redirect to sign-in page" option — the pop-up window option doesn't work for Embed widget authentication.
New in June 2025: EB can now restore app state. This means if a user zooms the map, opens a sidebar, and filters data, they can get a URL that preserves all of that. Incredibly useful for sharing specific views.
An EOC coordinator zooms to Hurricane impact zone, filters shelters to "Open" only, opens the resource panel. They copy the URL and paste it in a Slack channel. Everyone who clicks that link sees exactly that view. No "okay now zoom to Florida and click the filter..." instructions needed.
After building dozens of operational apps, here are the layout patterns that work best for real-world disaster response.
Layout: Fullscreen → Header (logo + title + Login) → Sidebar (right, default open) → Map in main area → Sidebar: Column → Accordion with Summary stats / Shelter List / Resource filters
Layout: Fullscreen → No header (maximize map space) → Map (full) → Widget Controller floating on map with: Search, Bookmarks, Edit, Directions. Sidebar: collapsed by default, contains Layer List + Filters.
Layout: Scrolling page → Header (logo + Menu) → Hero section with Text + Image → Map section (fixed height, e.g. 500px) → Scrolling content below: shelter locations List + resource info Text blocks + Footer.
Layout: Multi-page → Page 1: Dashboard overview (map + key metrics) → Page 2: Detailed tables (Table widget full width) → Page 3: Charts and trends → Shared header with page Menu for navigation.
You've covered every major layout concept in Experience Builder — from basic pages and rows all the way through responsive design, Widget Controllers, sections, templates, role-based pages, embed patterns, app state, and operational layout recipes. This is the foundation for everything else in the EB Field Guide.