Navigating around the ArcGIS Experience Builder User Interface (UI)!
What is the ArcGIS Experience Builder?
ArcGIS Experience Builder is the next generation web application builder to create immersive and engaging websites to highlight your spatial and non-spatial data. Released in February 2020 for ArcGIS Online and ArcGIS Enterprise platforms, the ArcGIS Experience Builder may be a daunting user interface compared to the soon to be deprecated ArcGIS Web AppBuilder but fear not for in this blog we’ll be discussing the user interface, how to navigate the various windows and panes, the contextual design of some workflows, and the various toolbars within the ArcGIS Experience Builder “builder”!
Where to begin? First, you will need to be a member of an ArcGIS organization with a user type that includes privileges to create content. Second, you will need to verify that you are working with a supported browser such as Google Chrome, Microsoft Edge, Mozilla Firefox, or Safari as only WebGL-enabled 64-bit browsers are supported. Once these two requirements are met, you are ready to author your first experience!
Experience Gallery
Once you have logged into the ArcGIS Experience Builder, you may see previously authored experiences that are “owned by me,” those experiences marked as “my favorites,” or “shared with me” via a dropdown menu on the Recent Experiences page. Or if this is your first time using the ArcGIS Experience Builder, then the Experience Gallery will be empty and ready for your first experience! Either way, you may open an existing experience or click the blue “+Create new” button on the top right of the user interface (UI) to create a new experience. Let us explore creating a new experience!
Template Gallery
The next UI you will see is the Template Gallery. Here you may choose what type of template to use to author your first experience. Top left is the “Select a template to start” text and below that is the underlined Default where you can explore various categories of ArcGIS Experience Builder templates – All, Blank, Web AppBuilder classic, Map centric, dashboard, web page and website. When you hover your mouse over a template of interest, a concise description appears providing more information about each template. Furthermore, if you click the Preview button bottom right of each template, then a new tab in your browser opens for you to navigate through the template to see if it meets your needs.
To view Esri and user created public templates, click the ArcGIS Online tab on the top of the webpage. Here you will see categories such as All, New, and noteworthy, 3D, People, Environment, Tourism, Infrastructure, Data, Document and Business Analyst. Esri curated templates, at the top of the UI, are more colorful, metadata complete and updated on a regular basis. User curated templates may or may not be as complete – it is up to the template author to create a complete template to share publicly. As with the Default templates, you can hover your mouse over a template for a concise description of the template as well as click the Preview button to open a new browser tab to review the template before committing to using the template.
Builder Interface
Once you select a template, the ArcGIS Experience Builder application creates a new user experience based upon the template. Once the ArcGIS Experience Builder creates the experience, we now see the “builder” webpage! Let us examine the six components that make up the builder! In the graphic below is an experience created from a Learn ArcGIS tutorial (by the way, there are nine free Learn ArcGIS lessons on the ArcGIS Experience Builder!) and letters A-F. Let us examine each one!
- Sidebar – the sidebar allows you to open the widget, page, data, utility services, theme, and settings panels.
- Left panel – the left panel displays content on what is selected in the sidebar such as your page and page outlines, application framework, themes and more.
- Builder toolbar – the builder toolbar displays tools that you use to lock the layout, preview your experience, save, undo/redo, publish and more.
- Canvas – the canvas is where you design and build your app page by page adding and moving widgets around the canvas.
- Right Configuration or settings panel – the configuration panel displays settings for the selected widget or page on the canvas.
- Status bar – configure various UI settings such as close settings panel, fit width to current window, zoom to 100%, zoom in/out, page navigation and more.
Now that we have seen the overall builder, let us break down each item of the builder to explain what each component provides to the creator of the experience.
Builder Toolbar
At the top of the builder is the toolbar. The toolbar contains a lot of functionality relevant to the management, viewing and publishing of your experience.
- Home button – return to the ArcGIS Experience Builder Home Page.
- Name – change the name of the experience item.
- Status – currently three statuses of draft, published and unpublished changes. Only one status is ever present.
- Lock layout – lock the layout to avoid unexpectedly changing a widgets size or position.
- Live view – test widgets on an active page.
- Device mode – view the experience in different device modes (large, medium, and small) and create a custom layout.
- Change screen resolution based upon device mode.
- Undo/redo buttons – undo or redo your last actions.
- Save – saves the experience.
- Preview – view the experience to evaluate functionality from the experience’s starting Home Page.
- More – save as, delete the experience, change share settings, create new, generate template and more.
- Publish – publish the experience to an ArcGIS Online or ArcGIS Enterprise portal.
- The portal user information.
Sidebar
The sidebar is located on the left side of the builder and allows you to open the widget, page, data, utility, and theme panels to add new elements and edit the overall design. When you click on an item on the left sidebar, the left pane becomes active with those items for the task.
 Left Sidebar |
|
Right Configuration Panel
On the canvas, it is likely you will have many widgets on your page. When you select a widget on the canvas, firstly there is a toolbar for each selected widget that appears top left of the selected widget and secondly the right configuration panel (or settings panel) becomes activated for that widget. The right configuration panel changes based upon whatever widget is selected. For example, in the graphic below, I have selected the map widget. Within the right configuration panel, I now have the configuration tabs for the map widget – Content, Style, and Action.
Status Bar
The status bar is often overlooked as it is on the very bottom of the builder and a very thin bar as well. As with other ArcGIS applications, it provides information about the current state of the application such as zoom levels, active page and more. The A11Y button is used to support the World Wide Web Consortium (W3C)’s Web Content Accessibility Guidelines (WCAG) and more.
- Bottom left – switch between pages in your experience.
- Right-center – A11Y – configure accessibility (A11Y) option.
- Bottom right – set zoom and zoom level, zoom to 100%, fit width to current window buttons, and close/open right configuration panel.
Conclusion
The best way to fully understand the UI and become more proficient is to build your first experience! Choose a topic of interest whether for work or a family vacation! Add new widgets to your pages, explore the configurations of each widget and most of all – have fun!
Further resources
To learn more about the ArcGIS Experience Builder user interface and the application itself, please visit the following URL’s:
Building Web Apps with ArcGIS Experience Builder | Esri Training Instructor-Led Course
Accessibility best practices for ArcGIS Experience... - Esri Community
Helpful resources to get you started - Esri Community
Welcome to Experience Builder Tips and Tricks - Esri Community
Experience Builder Resources to Help You Maximize ... - Esri Community
Tutorial Gallery | Documentation (arcgis.com)