Back to Top

Create your first web experience

In this topic

  1. Create an experience with full mode
  2. Create an experience with express mode

Create a web experience app with ArcGIS Experience Builder in full mode or express mode.

Step 1
1Start with a template
Step 2
2Choose a theme
Step 3
3Select source data
Step 4
4Add and connect widgets
Step 5
5Refine layouts for all devices
Step 6
6Save, preview, and publish

Create an experience with full mode

Create your first web experience with ArcGIS Experience Builder by following these six steps:

  1. Start with a template.
    1. Open ArcGIS Experience Builder and sign in with an ArcGIS organizational account with privileges to create content.
    2. Click Create new and review the templates available on all the tabs.
    3. Point to each for a short description or click the Preview button to see if the template meets your needs.
    4. Choose from single-page and multipage templates with full-screen and scrolling page layouts.

    The ArcGIS Online tab lists Esri and user-created public templates in the following categories:

    • New and noteworthy
    • 3D
    • People
    • Environment
    • Tourism
    • Infrastructure
    • Data
    • Document
    • Business Analyst
    Tip:

    To display a template in the gallery under one of these categories, assign it as the primary content category on the template's item page.

    Once you've decided which template to use, return to the Select a template window, and click Create on the respective card. You can add or remove pages as you configure the web experience.

    Tip:

    You can also access Experience Builder from the app launcher in ArcGIS Online, Map Viewer, Scene Viewer, the item page for a map or scene, or the My Content tab on the content page. When you start with a map or scene, the app already includes a Map widget that's connected to the data.

    License:

    If you can't sign in or the app isn't an available option, you may not have the required license or your organization may have blocked access.

  2. Configure the look and feel of the app by choosing a theme.

    Theme colors are applied to the header, footer, and body of each app page, including the color settings for widgets unless you change them.

  3. Select source data.

    On the Data tab, you can select multiple 2D and 3D data sources for use by the widgets in the app. You can connect to a variety of data types, such as web maps, web scenes, hosted layers, services, and feature tables.

  4. Add and connect widgets.

    Widgets provide functionality in an app, such as menus to access multiple pages, the ability to find a place on a map, and a button to view more details. Most page, window, block, and screen group templates have their own set of widgets, but you can change them or add more by unlocking the layout. Use the buttons on widget toolbars to align, remove, or duplicate widgets and drag new widgets onto the canvas from the Insert widget panel. As you configure content, style, and action settings for each, set links and connect widgets to data or other widgets to customize the flow of the app. To save time, you can copy and paste widgets across pages using standard keyboard shortcuts.

  5. Refine layouts for all devices.

    Use the options on the builder toolbar to view the app at different screen resolutions and to see how the design looks on small devices. The layouts are adaptive, but you can use the custom layout mode for more control. If a widget doesn't fit in the layout on a small screen, you can find it on the Pending tab to add manually and reconfigure. Use the live view to experiment with interactive widgets and designs.

  6. Save, preview, and publish.

    When you're satisfied with the layout and design, save and preview the app to test the user experience before you publish and share it. You can also generate an app template to use as a starting point so you can create a set of apps with a consistent design. To create a copy of a web experience or template, you can duplicate the item from the gallery or save a copy from the builder if you own the item or are an administrator.

    Tip:

    Explore the Experience Builder blog articles for the latest news, tips, and examples to get you started.

Create an experience with express mode

Express mode is a simple app building mode that allows you to quickly make an app. Create your first web experience with express mode by following these six steps:

  1. Switch to express mode.

    Open ArcGIS Experience Builder and sign in with an ArcGIS organizational account with privileges to create content. On the top right of the template gallery, click Go to express mode.

  2. To start with a template, click Create new and review the available templates.
    You can choose from the following mapcentric templates:
    • Foldable
    • Plateau
    • Tab
    • Launchpad
    • Dart
    • Jewelry Box
    • Pocket
    • Billboard
    • Dashboard
    Tip:

    These nine templates have the same names and are similar to the Web AppBuilder classic templates in full mode.

    All of the templates are optimized for medium- and small-screen devices.

  3. Click Create new app to open the experience in the express mode builder.
  4. Edit the app theme.

    Change the colors and font for the app on the Theme tab. Theme colors apply to the header and to the color settings for widgets, unless you change them.

  5. Select a map or scene.
    1. Select the Map widget to open its settings panel on the right of the builder.
    2. Click Select map, and add up to two web maps or web scenes.
  6. Add widgets.

    Widgets give your app extra functionality. They add things like images, tables, and printing capabilities to your app. Each express mode template has its own preconfigured set of widgets, and you can add more widgets in the following places:

    • Widget Controller widget—Every express mode template has a Widget Controller widget, which is a toolbar that you can use to add other widgets that interact with or complement the map.
    • Layout widgets—Each of the express mode templates contains some layout container widgets, such as Sidebar widgets, Placeholder widgets, and Grid widgets. You can decide which widgets to put in these containers.

  7. Save, preview, and publish.

    When you're satisfied with your app's design, save and preview the app to test the user experience before you publish and share it. You can also switch to full mode, where you will have access to all of the Experience Builder app editing features.

    Note:

    Once you switch an app from express mode to full mode, you cannot switch back to express mode.

Tip:

For the latest news, tips, and tutorials about Experience Builder, explore articles on ArcGIS Blog.

Feedback on this topic?

In this topic
  1. Create an experience with full mode
  2. Create an experience with express mode